Last Updated: 15 Oct 2020 14:02 by ADMIN
Created on: 12 Oct 2020 16:03
Category: Grid
Type: Feature Request
Column Header Template not available for group columns


I want to be able to expand / collapse grouped column headers in my grid (ASP.NET Core). I have found this example which achieves what I need (https://docs.telerik.com/kendo-ui/knowledge-base/grid-expand-collapse-columns-group-button-click), however the HeaderTemplate() method appears to be unavailable. See my placement below. 

I am using the following packages:

KendoUIProfessional, Version="2020.3.915"
Telerik.UI.for.AspNet.Core, Version="2020.3.915"


    .Columns(columns =>
        columns.Group(g => g
            .Title("Key information")
            .HeaderTemplate("Key info <button class='k-button' style='float: right;' onclick='onExpColClick(this)'><span class='k-icon k-i-minus'></span></button>")
            .Columns(i =>
                i.ForeignKey(p => p.ContinentId, (System.Collections.IEnumerable) ViewData["continents"], "Id", "ContinentName")
                i.ForeignKey(p => p.AreaId, (System.Collections.IEnumerable) ViewData["areas"], "Id", "AreaName")
        columns.ForeignKey(p => p.CountryStateProvinceId, (System.Collections.IEnumerable)ViewData["countries"], "Id", "CountryStateProvinceName")
        columns.Command(command => command.Destroy()).Width(100);
        .ToolBar(toolbar =>
        toolbar.Custom().Text("Mark reviewed").Name("review");
    .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Resizable(r => r.Columns(true))
        .Reorderable(r => r.Columns(true))
        .Filterable(f => f
            .Messages(m => m.Info("Show items with:"))
            .Operators(operators => operators
                .ForString(str => str
        .Scrollable(sc => sc.Virtual(true))
        .Events(e => e
    .DataSource(dataSource => dataSource
        .Model(model =>
        model.Id(p => p.Id);
        model.Field(p => p.Id).Editable(false);
        model.Field(p => p.ContinentId).DefaultValue((ViewData["defaultContinent"] as ContinentViewModel).Id);
        model.Field(p => p.AreaId).DefaultValue((ViewData["defaultArea"] as AreaViewModel).Id);
        model.Field(p => p.CountryStateProvinceId).DefaultValue((ViewData["defaultCountry"] as CountryStateProvinceViewModel).Id);
        .Read(read => read.Action("GetRegulations", "RegulationIndex").Type(HttpVerbs.Get))
        .Create(create => create.Action("AddRegulations", "RegulationIndex").Type(HttpVerbs.Post))
        .Update(update => update.Action("UpdateRegulations", "RegulationIndex").Type(HttpVerbs.Post))
        .Destroy(delete => delete.Action("DeleteRegulations", "RegulationIndex").Type(HttpVerbs.Delete))
Alex Hajigeorgieva
Posted on: 15 Oct 2020 14:02

Hi, Dina,

Thank you very much for sharing the solution and tips with the Kendo UI community.

The UI for ASP.NEŠ¢ Core Grid has a ClientHeaderTemplate() method that can be used for Columns headers:

columns.Bound(p => p.Name).ClientHeaderTemplate("Contact Info <button class='k-button' style='float: right;' onclick='onExpColClick(this)'><span class='k-icon k-i-minus'></span></button>");

However the GridColumnGroupBuilder seems to be missing this template indeed. I have moved this to our Feedback Portal so others may upvote it.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

Posted on: 15 Oct 2020 10:13

For information, I have now achieved what I needed using HeaderHtmlAttributes() to programatically add a button to the header as per the following simple solution:



For anyone doing similar, it's worth noting that editing the header after the grid has already calculated its size caused some layout issues. Rather than fiddling with CSS, I just used the following after my customisation code: $("#grid").data("kendoGrid").resize();