The rendering (structure and order of elements) of the th element of a column, for which a HeaderTemplate is set, does not match the Kendo UI Grid's rendering in a similar scenario. Prerequisites: HeaderTemplate, Sortable, Filterable enabled. For more context, see Ticket ID: 1639834.
Check the rendering of the header of the second column:
@(Html.Kendo().Grid<TelerikMvcApp1.Models.OrderViewModel>()
.Name("grid2")
.Columns(columns => {
columns.Bound(p => p.OrderID).Filterable(false).Width(100);
columns.Bound(p => p.Freight).HeaderTemplate("<span class='k-link'>My Template</span>");
columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}").Width(140);
columns.Bound(p => p.ShipName);
columns.Bound(p => p.ShipCity).Width(150);
})
.Sortable()
.Filterable()
.Pageable()
.Scrollable()
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Orders_Read", "Grid"))
)
)
The content of the th is the following:
<a aria-hidden="true" class="k-grid-filter-menu k-grid-header-menu">
...
</a>
<span class="k-link">
...
</span>
The th content should be rendered as follows:
<span class='k-cell-inner'>
<span class='k-link'>
...
</span>
<a aria-hidden='true' class='k-grid-filter-menu k-grid-header-menu'>
...
</a>
</span>
It should match the Kendo UI Grid's rendering: https://dojo.telerik.com/oTalIGir/8