Kendo Grid Grouping Column Title

2 posts, 0 answers
  1. Enrico
    Enrico avatar
    14 posts
    Member since:
    Mar 2014

    Posted 07 Oct 2020 Link to this post

    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.

     

  2. Neli
    Admin
    Neli avatar
    432 posts

    Posted 09 Oct 2020 Link to this post

    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/.

Back to Top