cssClass is not being added for hierarchical grids

cssClass is not being added for hierarchical grids

Posted by: philip.johnson on 26 March 2019, 1:33 pm EST

• 

  philip.johnson

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 26 March 2019, 1:33 pm EST

  Hi,

  I noticed when I upgraded our wijmo version on npm, some of our styling stopped being applied. After some investigation, I learned that on hierarchical grids (grids with a property of

  childItemsPath

  , the column ```
  
  cssClass

  
  To see this in action I made this fiddle:
  
  https://jsfiddle.net/sm6kgtwv/3/
  
  If you remove the last line (the childItemsPath property), you'll see the text turn red because the css class is applied.

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 27 March 2019, 3:53 am EST

  The cssClass only renders cells having class “wj-cell”. But when we create a hierarchical grid, all the cells have class atrribute set as “wj-group” as they are now considered as group cells and therefore are not rendered using cssClass.

  If you would like to change the color of the column “name”, then you need to use FlexGrid’s itemFormatter. Please refer to the sample below:

  https://jsfiddle.net/schz8bt2/

• 

  philip.johnson

  • Post Options:
  • Link
    Copy

  Posted 27 March 2019, 1:49 pm EST

  I see why from a technical standpoint that happens (though I still think it’s weird one can’t apply a class to a column, regardless of cell type), but it leaves us with a problem.

  Our columns are dynamically created from an array of items, which was setting the column class based on a property of these items. Let’s say, for example, an array of employees, and a color would be set depending on the employees’ department. The rows are various hierarchical data about, for example, data access privileges, keyed by the employee’s id.

  We are using the grid in Angular 2, not JS like my fiddle. So because the itemFormatter sets ‘this’ to the grid, the itemFormatter function no longer has access to the component, and thus has no access to the employee array. So the only way we can pull this off is do something like this:

  export class EmployeeGridComponent {
    @Input() employees: Employee[];
    @Input() treeData: any[]
  
    @ViewChild(WjFlexGrid) grid: WjFlexGrid;
  
    ngOnInit() {
      // change 'this'
      this.grid.itemFormatter = this.itemFormatter.bind(this);
  
      this.employees.forEach(e => this.grid.columns.push({
        binding: employee.id,
        header: employee.name
        width: 80,
        // this no longer works
        cssClass: employee.department === 'IT' ? 'it-dept' : 'other-dept'
      }))
    }
  
    itemFormatter: function(panel, r, c, cell) {
      const employeeIndex = c - NUM_OF_STATIC_COLUMNS;
      const employee = this.employees[employeeIndex];
  
      if (employee.department == 'IT') {
         wijmo.toggleClass(cell, 'it-dept', true);
      } else {
        wijmo.toggleClass(cell, 'other-dept', true);
      }
    }
  }
  

  It works, but it’s sure a hassle and awfully brittle compared to using cssClass.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 28 March 2019, 8:41 am EST

  Hi Philip,

  Thanks for sharing your approach. For a simpler approach you may handle the formatItem event and add css class from the column object without relying on the component instance. Please refer to the following code snippet and sample demonstrating the same:
  
  https://stackblitz.com/edit/angular-lv5fnw?file=src%2Fapp%2Fapp.component.ts

  Further, we have also escalated the case to the devTeam to fix the issue. Internal tracking Id for the issue is 372776. We will let you know regarding any updates on the issue.

  Regards

• 

  philip.johnson

  • Post Options:
  • Link
    Copy

  Posted 28 March 2019, 2:44 pm EST

  Thank you for the advice! This approach is much better.