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

Changing the Multi-Column Header Title


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


How can I change the title of a multi-column header in the Data Grid programmatically when working with the Telerik UI for ASP.NET Core components?


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

    .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");

More ASP.NET Core Grid Resources

See Also

In this article