Assign cell template in code code rather than in the view

Posted by: tadlockk on 24 July 2018, 1:53 am EST

    • Post Options:
    • Link

    Posted 24 July 2018, 1:53 am EST

    Hello,

    I am using flexgrid to create a table with column groups. I am using the columGroupProvider class given in the sample code, and it is working great. I am able to define the hierarchical structure of my data, specify column properties, ect.

    (this is Angular 6)

    
     header: 'Dept 1',
            columns: [
              {
                header: '2014',
                columns: [
                  {
                    header: 'Sales',
                    binding: 'Dept_1_sales'
                  },
                  {
                    header: 'Expenses',
                    binding: 'Dept_1_EXP'
                  },
                  {
                    header: 'Target',
                    binding: 'Dep_1_TARGET'
                  },
                  {
                    header: 'Payroll',
                    binding: 'DEPT_1_PAYR'
                  }
                ]
              },
    
    

    Later in my code I use my column group provider and a reference to the flex grid to draw the columns. So far so good.

    
    new ColumnGroupProvider(this.grid, this.columnDef);
    
    

    The problem I am having is that I also need to customize the content of the cells with a template.

    I have found some examples on the discussion board that use dynamic columns, but the code is very confusing and difficult to read. I would really like to be able to define a ng-template in my view and assign by reference to a particular template column like another property.

    Angular 6 allows you to set a reference to a template and then access it as type TemplateRef<> on the component. I have use this before to pass templates around to different components. Is it possible to assign a template to a property of the column pro grammatically, rather than having to iterate through a collection of columns in a view?

    So for example, the view could be

    
    <ng-template wjFlexGridCellTemplate #column1 [cellType]="'Cell'" let-item="item">
    	abc
    </ng-template>	
    
    

    In my component

    
    @ViewChild('column1 ') public column1 : TemplateRef<any>;
    
    

    Then when defining my columns

    
    	header: 'Dept 1',
            columns: [
              {
                header: '2014',
                columns: [
                  {
                    header: 'Sales',
                    binding: 'Dept_1_sales'
    		cellTemplate: [ this.column1 ];
                  },
    
    

    Is something like this possible, or could it be implemented as a feature?

    Thank you.

  • Posted 25 July 2018, 12:53 am EST

    Hi,

    The ColumnGroupProvider class is a custom implementation to allow groups in column headers, hence it does not allows the use of cell-templates.

    However, if you would like to use cell templates then you may modify ColumnGroupProvider as per your requirement.

    Please refer to the following sample which implements the same:-

    https://stackblitz.com/edit/angular-kf7nyz?file=app%2Fapp.component.ts

    ~Manish

  • Posted 25 July 2018, 10:10 am EST - Updated 3 October 2022, 7:21 am EST

    Thank you Manish. Your implementation of columnGroupProvider was very helpful, and I was able to use it to satisfy my requirement.

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels