Is there a way to include the template in the Group summary in React Grid?

[Matteo]

As per title, I am trying to group all rows with a certain value on a custom column, in the documentation I read there is a way to include the Format, is there a way to include the template?

CODE:

            groupSettings: { columns: ["PhaseId"], showDropArea: false, showUngroupButton: false },

            columns: [

                { field: "AssemblyId", visible: false, isPrimaryKey: true },

                { field: "AuditSequenceSequenceId", headerText: "SequenceId", isPrimaryKey: true },

                { field: "AuditAuditId", visible: false, isPrimaryKey: true },

                { field: "AuditSequenceResourcesItalianText", headerText: "Description", width: 500 },

                { field: "AuditLaps", headerText: "Laps" },

                { field: "AuditApplicationId", headerText: "Application", dataSource: this.ApplicationData, foreignKeyValue: "ApplicationName", foreignKeyField: "ApplicationId", query: this.ApplicationQuery },

                //{ field: "PhaseId", headerText: "Phase", dataSource: this.PhaseData, foreignKeyValue: "ResourcesItalianText", foreignKeyField: "PhaseId", query: this.PhaseQuery },

                { field: "PhaseId", headerText: "Phase", template: this.phaseTemplate },

                { field: "LineId", headerText: "Line", dataSource: this.LineData, foreignKeyValue: "ResourcesItalianText", query: this.LineQuery },

                { field: "Priority", headerText: "Priority" },

            ],

I attached a screenshot of the situation.

Attachment: Cattura_2318f28e.zip

[Balaji Sekar]

Hi Matteo, 

Greetings from the Syncfusion support, 

Query:  Is there a way to include the template in the Group summary? 

Yes, We suggest you to use the “custom helper function” to achieve a client side callback to change the Group caption header. In the below code we have defined a custom helper function, hence while defining the group caption header of Grid every time the function will be triggered to display the customized text. Please refer the code example below, 

constructor() { 

        super(...arguments); 

        this.groupOptions = { showDropArea: false, captionTemplate: 'Group Label -${customhelper(data)}', columns: ['Computed'] }; 

       window.customhelper= function(data){ 

           return data.items[0].EmployeeID + "available"; //The returned value will be displayed in group caption header 

        } 

       ... 

    } 

 

 

We have also shared the sample for your convenience. Please refer the sample link below, 

 

Sample : https://stackblitz.com/edit/react-tmaivw-bvsvmb?file=index.js 

 

Documentation : https://ej2.syncfusion.com/react/documentation/api/grid/groupSettings/#captiontemplate 

                                https://ej2.syncfusion.com/documentation/common/template-engine.html?lang=typescript#available-template-syntax 

 

Please get back to us if you need further assistance. 

 

Regards, 

Balaji Sekar.