Changing the Multi-Column Header Title
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 the Data Grid programmatically when working with the Telerik UI for ASP.NET Core components?
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");
}