Skip to content

Latest commit

 

History

History
67 lines (59 loc) · 1.91 KB

grid-header-multicolumn-title-change.md

File metadata and controls

67 lines (59 loc) · 1.91 KB
title description type page_title slug position tags ticketid res_type
Change Title of Multi-Column Header
Replace the title of multi-column headers in a Kendo UI Grid
how-to
Set Multi-Column Header Programmatically | Kendo UI Grid
grid-header-multicolumn-title-change
grid, header, multicolumn, title, change, column
1433557
kb

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