How to implement a header template

[Musashi]

I'm looking to make a custom header for my grid. In the end, I want it to have the title, sorting arrows, and a custom filter image button that bypasses the built-in filtering of the grid.
To start off though, how do I get it to display the title?

01.Html.Kendo().Grid<dynamic>()
02.    .Name("grid")
03.    .Filterable(filter => filter.Enabled(false))
04.    .DataSource(ds => ds.Ajax().Read(read => read.Action("action", "controller")))
05.    .Columns(columns =>
06.    {
07.        columns.Bound("field")
08.            .Title("title")
09.            .Sortable(true)
10.            .HeaderTemplate("???");
11.    });

[Dimo]

Hi Mushashi,

If you want to implement a header template, which resembles the Grid's default header cell look, then use the following template string:

columns.Bound(p => p.Freight).Width(100).HeaderTemplate("<a class='k-link myHeaderTemplate' href=''>Your Title Here</a>");

In order to hide the Grid's native filtering icon in the above header cell, use the following code, placed after the Grid declaration:

$(function () {
    $(".myHeaderTemplate").parent().find(".k-grid-filter").hide();
});

At this point, you are free to include any other image or markup in the header template, which will serve as a filtering actuator. For custom filtering, you will need the access the Grid DataSource and use its API.

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#fields-dataSource
 
http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-filter

Regards,
Dimo
Telerik