Customise the Grouping Header in an Angular ejs-grid

[Tim Hartog]

Hi,

I searched the forum and documentation, found some items about it, but cannot make it work.

I have two columns in a large grid (ejs-grid version 18.1.46) that are related to each other.

A status number and a status name. The grid has to be sorted on the status number (which is no problem) but also grouped based on the statusname and keep the sorting of the number. As soon as it is grouped on statusname the sort on the number is no longer there.

Because I have no control over this behaviour I thought to group it based on the status number and dynamically change to group headers with the corresponding status names.

It sounds complex and I hope there is some kind of solution for this.

Hope you can help me with this question.

Kind regards,

Bob

[Sujith Kumar Rajkumar]

Hi Bob, 

 

Greetings from Syncfusion support. 

 

By default when a column is grouped in the Grid that column will also be sorted. So if a column is initially sorted and then another column is grouped, the grouped column will be sorted first and grouped and then the initially sorted column will maintain sort based on each group. This is the functionality’s default behavior. We have explained this below in your scenario for better understanding. 

 

Considering two columns – “Status Number” and “Status Name”. Initially “Status Number” is sorted in ascending order and then the “Status Name” column is grouped. Now the “Status Name” column will be sorted in ascending order first and then only grouped. The previously applied sort on the “Status Number” column will also be maintained only that the sorting will be based on each grouped records in the “Status Name” column. 

 

But we are not able to clearly understand your use-case and requirement by this – “Because I have no control over this behavior I thought to group it based on the status number and dynamically change to group headers with the corresponding status names.”. So can you please elaborate on this with details so that we can validate further and provide you the response for it. 

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R 

[Tim Hartog]

Hi Sujith,

I noticed that when grouping it sorts on this group and not one the first sort and then group. (the behaviour you mentioned)

That is why I want to sort on the column with a sort number and then assign dynamically in the header of the group a different name.

For example:  I group on the sort column and in the grouped headers I have 1    2    3    4

I want to dynamically change the text 1, 2, 3, 4 etc. into the names that are associated with these numbers.

So I have the right sort order in the group with the right names.

I hope the thing I try to achieve is more clear now.

Kind regards,

Bob

[Sujith Kumar Rajkumar]

Hi Bob, 

 

From the provided information we could understand that your requirement is to – “Group based on number field and display the corresponding text field value of the number in the grouped header”. You can achieve this requirement using the group’s captionTemplate which helps to customize the grouped header. This is demonstrated in the below code snippet, 

 

app.component.html 

<ejs-grid #grid [dataSource]='data' ...> 

    <e-columns> 

        <e-column field='Inventor' headerText='Name'></e-column> 

        <e-column field='NumberofPatentFamilies' headerText="Number"> 

            <ng-template #groupSettingsCaptionTemplate let-data> 

                {{groupTemplateFn(data)}} 

            </ng-template> 

        </e-column> 

    </e-columns> 

</ejs-grid> 

 

 

app.component.ts 

groupTemplateFn(args) { 

        // Group header is set based on grouped field 

        if (args.field === "NumberofPatentFamilies") { 

            // return field’s header text + current group key value + different column data from same row 

            return args.headerText + ': ' + args.key + ' Name: ' + args.items[0].Inventor; 

        } else { 

            return args.headerText + ': ' + args.key; 

        } 

} 

 

 

We have prepared a sample based on this for your reference. You can find it below, 

Sample: https://stackblitz.com/edit/angular-jxnh8v?file=app.component.ts 

 

More details on this can found in the below help documentation link, 

 

Group caption template: https://ej2.syncfusion.com/angular/documentation/grid/grouping/?no-cache=1#caption-template 

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R 

[Tim Hartog]

Hello Sujith,

I already looked at the groupsettingstemplate, but did not succeed.

With your additional information it works perfect.

Thank you very much for your time and support.

Kind regards,

Bob

[Prasanna Kumar Viswanathan]

Hi Bob, 

 

We are happy to hear that your query has been resolved. 

 

Please get back to us if you need any further assistance. 

 

Regards, 

Prasanna Kumar N.S.V