Using custom GroupHeader for more than 1 group

Posted by: jordi.rierababures on 9 July 2018, 9:12 pm EST

    • Post Options:
    • Link

    Posted 9 July 2018, 9:12 pm EST

    I’m using wijmo 5+ with Angular 5+. I’m following the example here http://demos.wijmo.com/5/angular2/celltemplateintro/celltemplateintro/ to setup custom Group headers.

    It works for the first group, but when trying to apply the same approach to a second group (in another wj-flex-grid-column) it will still use the format defined for the first group. That is, the second wjFlexGridCellTemplate with GroupHeader is ignored.

    Is it possible to have custom group headers for more than one group?

  • Posted 10 July 2018, 9:17 pm EST

    Hi,

    You may set ‘GroupHeader’ for any number of columns but ‘GroupHeader’ template is visible for only those columns whose binding property is used for defining groups.

    If you want to set the template for ‘Group’ like one in the sample for ‘Downloads’ column then aggregate property for the column must be set in order to display ‘Group’ template.

    Please refer to the following sample which defines ‘GroupHeaader’ template for two different columns:-

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

    ~Manish

  • Posted 11 July 2018, 5:11 pm EST

    Thanks Manish. It’s working as expected now.

    For the Group part, if I understand correctly, I cannot use the same column with a different template for each GroupHeader, because the association is made in the ‘aggregate’ column.

    Let’s say I want to set a diferent background color for each group header (and its aggregate sum). This can be easily done for the GroupHeader part using their template, but how could we set the same background color in the Group part cell of the header, as we have only one Group template?

  • Posted 12 July 2018, 8:13 pm EST

    Hi,

    For aggregate column, cellType should be used Group while for GroupHeader cellType should be used for the column by which grouping is applied.

    Please refer to the following documentation link:

    http://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo-wijmo.angular2.grid.WjFlexGridCellTemplate.Class.html

    In such a case you may use cssClass property of row.

    Please refer to following code snippet:-

    
    grid.rows.forEach(row=>{
    	if(row instanceof wjcGrid.GroupRow){
    		let groupProp=row.dataItem.groupDescription.propertyName;
    		let className=null;
    		switch(groupProp){
    			case "country":className="countryGrp";break;
    			case "checked":className="checkedGrp";break;
    		}
    		if(className){
    			row.cssClass=className;
     		}
    	}
    });
    

    You may also refer to the updated sample here:- https://stackblitz.com/edit/angular-kkvbgm?file=app%2Fapp.component.ts

    ~Manish

  • Posted 12 July 2018, 9:52 pm EST

    Thanks again Manish. It is not always evident how to reach the right property in the wijmo structure…

Need extra support?

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

Learn More

Forum Channels