New to Telerik UI for ASP.NET Core? Download free 30-day trial

Change Title of Multi-Column Header

Environment

Product Version 2019.3.917
Product Progress® Kendo UI® Grid for ASP.NET MVC and ASP.NET Core

Description

How can I change the title of a multi-column header in a Kendo UI Grid programmatically?

Solution

First, add a new class to the Columns.Group.HeaderHtmlAttributes property to act as a selector.

   @(Html.Kendo().Grid<GridChangeMultiColHeader.Models.MyModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Group(a => a.Title("One").HeaderHtmlAttributes(new { @class = "multiColumnOne"})  //class added
            .Columns(multiColumnOne =>
            {
                multiColumnOne.Bound(p => p.ID);
                multiColumnOne.Bound(p => p.Name);
            })
        );
        columns.Group(a => a.Title("Two").HeaderHtmlAttributes(new { @class = "multiColumnTwo"})  //class added
            .Columns(multiColumnTwo =>
            {
                multiColumnTwo.Bound(p => p.MyDate).Format("{0:MM/dd/yyyy}");
                multiColumnTwo.Bound(p => p.Address);
            })
        );
        ...
    })

Then, set the title using the jQuery html method at the appropriate time such as during a button click event.

   function onClick(e) {
      $("#grid thead").find(".multiColumnOne").html("New One");
      $("#grid thead").find(".multiColumnTwo").html("New Two");
   }

See Also

In this article
Not finding the help you need? Improve this article