How to set Telerik.Web.Mvc.UI.GridColumnSettings.HeaderTemplate

1 Answer 36 Views
Grid
Sakshi
Top achievements
Rank 1
Sakshi asked on 23 Jun 2021, 04:42 AM

Hello,

I have created wrapper for tekerik grid in c# MVC code.

Now I want to add checkbox/image in header instead of plain text.

I have found one property named "Telerik.Web.Mvc.UI.GridColumnSettings.HeaderTemplate" but it is of type delegate Action.

I do not have idea how to set the header template and finally checkbox/image.

 

Kindly suggest.

 

Thanks & Regards

Nitin kumar

1 Answer, 1 is accepted

Sort by
0
Anton Mironov
Telerik team
answered on 25 Jun 2021, 11:07 AM

Hello Sakshi,

Thank you for the details provided.

In order to achieve the desired behavior, I would recommend using HTML elements as a string for a parameter in the Header Template of the Kendo UI Grid.

Here is an example for a checkbox in the header of the column:

columns.Bound(p => p.ShipName).HeaderTemplate("<input type='checkbox' id='check - all' /><label for='check - all'>Check All</label>");
Example of implementing an image in the header template:
columns.Bound(p => p.ShipCity).HeaderTemplate("<img src='HERE INSERT LINK TO AN IMAGE' alt='Girl in a jacket' width='100' height='100'>");
Attached is a sample project that I prepared for the case. It includes the implementations above. Make the needed tests locally with the project attached and let me know if further assistance is needed.

 

Kind Regards,
Anton Mironov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Sakshi
Top achievements
Rank 1
Answers by
Anton Mironov
Telerik team
Share this question
or