Group Header Template

[Steve]

I'm trying to add Group Headers to my grid, but can't get anything to display. Aggregate footers are fine, but headers just don't seem to work. Example grid...

@(Html.Kendo().Grid<PersonTimesheetSummary>()
                    .Name("grid")
                    .Columns(columns => {
                        columns.Bound(p => p.PersonCode);
                        columns.Bound(p => p.FullName);
                        columns.Bound(p => p.NoOfTimesheetDays).ClientGroupHeaderTemplate("#=sum#");
                    })
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .Aggregates(aggregates =>
                        {
                            aggregates.Add(p => p.NoOfTimesheetDays).Sum();
                        })
                        .Group(groups => { groups.Add(p => p.Company); groups.Add(p => p.Department); })
                        .Read(read => read.Action("GetPersonTimesheetSummary", "Person").Data("getGridParams")))
                )

I've tried this using the Html and tag helper formats with no success. I'm using version 2019.2.514.

[Marin Bratanov]

Hello Steve,

I am attaching here a small sample that shows how this can work so you can use it as a reference. The key difference is that I added grouping by the NoOfTimesheetDays field, so that it actually forms groups where you can see the ClientGroupHeaderTemplate.

If you want to see the sums in the current groups (by company and department), you should use the ClientGroupHeaderColumnTemplate. You can read more about the difference between them in the following article: https://docs.telerik.com/kendo-ui/controls/data-management/grid/Templates/group-templates. I am attaching a second version of the sample that showcases this as well.

It is perhaps also important to note that you must be using a version after R3 2018 so you can use the group header column template, and this includes the Kendo client assets that are usually in the _Layout file.

Regards,
Marin Bratanov
Progress Telerik

[Steve]

Hi Marin

I hadn't appreciated that there was a ClientGroupHeaderColumnTemplate, probably because I'm using tag helpers and it doesn't seem to exist as a 'column' tag attribute. "group-header-template" is there, but no "group-header-column-template". Am I looking in the wrong place?

Thanks

Steve

[Marin Bratanov]

Hello Steve,

Indeed, this is not available through the tag helper at the moment. You can track its status in the following issue I opened for adding it: https://github.com/telerik/kendo-ui-core/issues/5133.

You can achieve it with the following code in the meantime:

<kendo-grid name="grid2">
    <datasource type="DataSourceTagHelperType.Ajax">
        <transport>
            <read url="/Person/GetPersonTimesheetSummary" data="getGridParams" />
        </transport>
        <aggregates>
            <aggregate field="NoOfTimesheetDays" aggregate="sum" />
        </aggregates>
        <groups>
            <group field="Company">
                <aggregates>
                    <aggregate field="NoOfTimesheetDays" aggregate="sum" />
                </aggregates>
            </group>
            <group field="Department">
                <aggregates>
                    <aggregate field="NoOfTimesheetDays" aggregate="sum" />
                </aggregates>
            </group>
        </groups>
    </datasource>
    <groupable enabled="true" />
    <sortable enabled="true" />
    <filterable enabled="true" />
    <columns>
        <column field="PersonCode" />
        <column field="FullName" />
        <column field="NoOfTimesheetDays" />
    </columns>
</kendo-grid>

<script>
    $(document).ready(function () {
        var grid = $("#grid2").data("kendoGrid");
        var opts = grid.options;
        for (var i = 0; i < grid.options.columns.length; i++) {
            if (grid.options.columns[i].field == "NoOfTimesheetDays") {
                grid.options.columns[i].groupHeaderColumnTemplate = "#=sum#";
            }
        }
        grid.setOptions(opts);
    });
</script>

Regards,
Marin Bratanov
Progress Telerik

[Steve]

Thanks, Marin. This works as you've suggested.