customize group header for kendo grid

Question

There's two fields 'number' and 'name' in my datasource which are 1 to 1 related.

Currently, I grouped the data using number field, and the group header display 'number: xxx'. Is there a way to append the name field behind the current text? As 'number: xxx, name: xxxx'?

I have checked the kendo grid documentation and searched a long time, it seems kendo grid only support show the group header based on the grouped field's value or aggreagates, couldn't find a solution to group as these two fields.

Then I have another solution to deal with it. Add a new field which combined the two fields, then group by this new field, but the new field will display in columns filter in the column header. Is there a way to solve this problem?

 $("#grid").kendoGrid({ columns: [{ field: "number", hidden: true },{ field: "name" }, { field: "order" }], dataSource: { data: [{ number: 1, name: "Jane Doe", order: "order1" }, { number: 1, name: "Jane Doe", order: "order2" }, { number: 1, name: "Jane Doe", order: "order3" },{ number: 2, name: "Allen", order: "order1" },{ number: 2, name: "Allen", order: "order2" } ], group: { field: "number" } } }); 

The code below could display the combined field, but there're two problems: 1. The header text always contains 'header:' prefix, such as "header:number:1,name:Jane Doe"; 2. In the column filter, there's a header column in it.

 $("#grid").kendoGrid({ columns: [{ field: "number", hidden: true },{ field: "name", hidden: true }, { field: "order" },{ field: "header", hidden: true } ], dataSource: { data: [{ number: 1, name: "Jane Doe", order: "order1", header: "number: 1, name: Jane Doe" }, { number: 1, name: "Jane Doe", order: "order2", header: "number: 1, name: Jane Doe" }, { number: 1, name: "Jane Doe", order: "order3", header: "number: 1, name: Jane Doe" },{ number: 2, name: "Allen", order: "order1", header: "number: 2, name: Allen" },{ number: 2, name: "Allen", order: "order2", header: "number: 2, name: Allen" } ], group: { field: "header" } }, columnMenu: true }); 

Thanks

Answer 1

To hide column description from the group header you should use groupHeaderTemplate: "#= data.value #".

To hide column from ColMenu you should use "menu": false in your column definition.

The column wiht both changes applied should look like:

    {
       field: "header",
       hidden: true,
       "menu": false,
       groupHeaderTemplate: "#= data.value #",
    }