Kendo Grid Grouping Column Title

[Enrico]

Hi, is it possible to move the column name under the group header?

 var data = [
        { name: 'test1', age: 30 },
        { name: 'test2', age: 30 },
        { name: 'test3', age: 32 },
        { name: 'test4', age: 33 },
        { name: 'test5', age: 33 },
        { name: 'test6', age: 34 },
        { name: 'test7', age: 35 },
        { name: 'test8', age: 30 },
    ];

    $("#grid").kendoGrid({
        dataBound: function (e) {
            e.sender.table.find(".k-grouping-row:contains('Stock')").each(function (ind, item) {
                e.sender.collapseGroup($(item));
            })
        },
        dataSource: {
            data: data,
            group: [
                {
                    field: 'name', aggregates: [{
                        field: "name",
                        aggregate: "count"
                    }]
                }
            ]
        },
        height: 550,
        sortable: true,
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
        columns: [{ field: 'name',  groupHeaderTemplate: "#=value#" }, 
            {
            field: "age",
            title: "age",
            width: 240
        }]
    });

i want to move the column header below the group header.

 

[Neli]

Hi Enrico,

If you need to place the row with the column titles under the group header, I am afraid that such an appearance is not supported.  However, you could modify the groupHeaderTemplate and add the name of the column below the value of the group. You could add the column name in a <div> element or use '<br/>' in order to render the column title on a separate row.

Here is a Dojo example. 

I hope this helps.

Regards,
Neli
Progress Telerik