We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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?

            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

1 Reply

BS Balaji Sekar Syncfusion Team January 17, 2020 07:36 AM UTC

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() { 
        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, 
Please get back to us if you need further assistance. 
Balaji Sekar. 

Live Chat Icon For mobile
Up arrow icon