customize group header for kendo grid

0
votes

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

1
javascriptkendo-uikendo-grid
Can you reproduce this scenario in a snippet? That'd help us fix the issue for you. There's not much we can do with just a description. – Cerbrus
@Cerbrus, thanks for your reply, please see my code in the post. the data grouped by number, and all the name in the group are the same, so I want to hide the name field, and let it display in the group header. Such as "number: 1, name: Jane Doe". – Allen4Tech

1 Answers

0
votes

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 #",
    }