This is a migrated thread and some comments may be shown as answers.

Kendo Grid Grouping Column Title

1 Answer 1716 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Enrico
Top achievements
Rank 1
Enrico asked on 07 Oct 2020, 12:38 PM

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.

 

1 Answer, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 09 Oct 2020, 06:29 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Enrico
Top achievements
Rank 1
Answers by
Neli
Telerik team
Share this question
or