How to add custom header with sort graphics?

[Drew]

I'm trying to add a custom header template for the Kendo Grid, but when I do this the sort arrow graphic no longer shows up. I've search for quite a while looking for an example or forum discussion on how to fix this and I haven't found anything.

Can someone please tell me how to do this?

Here is an example of my current column definition:

columns.Bound(p => p.TotalCharges)

     .HeaderTemplate(@<text>Total<br />Charges</text>);

[Iliana Dyankova]

Hello Drew,

I am not quite sure what causes the problem in your application - the provided code snippet looks OK. Is it possible to provide a runnable project which demonstrates your current implementation? This way I would be able to check what is going wrong and advice your further. Thank you in advance for your time.
 
Regards,
Iliana Nikolova
the Telerik team

[Drew]

I've created a project that demonstrates what I'm experiencing. You'll notice that the first grid does not sort properly on the Total Charges column because I have a custom HeaderTemplate(). The second grid sorts correctly for the Total Charges column because I did not specify a HeaderTemplate(). Both grids use the same Model.

PLEASE NOTE:
I had to remove the Kendo UI DLL and MVC nuget package references from the project because the file upload limit is 2MB on this forum. If you have problems compiling the solution, you should be able to just create a basic MVC4 project in Visual Studio 2012 and drop the rest of the files into that.

Thanks in advance for your help.

[Drew]

After looking through the source code for the Kendo UI Grid I have found the following code that explains "why" the header graphic is not showing up. Nonetheless it does not help me understand "how" I can get around this limitation. I'm posting the snippet here in hopes that someone may have an idea. I will also continue to research and post anything helpful that I find.

Here is the code that causes the custom column header to no longer sort properly:
GridBoundColumn.cs

if (Sortable && Grid.Sortable.Enabled && !HeaderTemplate.HasValue())

{

    builder = new GridSortableHeaderCellBuilder(HeaderHtmlAttributes,

                                  GetSortUrl(),

                                  SortDirection,

                                  AppendHeaderContent);

}

else

{

    builder = base.CreateHeaderBuilderCore();

}

[Drew]

Found a solution!

The work around is to put your HTML code into the Title property of the GridColumnBuilderBase.

Example:

columns.Bound(p => p.TotalCharges)

       .Title("Total<br />Charges");

I hope this helps someone else save time in getting custom header values working along with sorting.

[Iliana Dyankova]

Hi Drew,

I am glad to hear you found a solution and thank you for sharing it with the community.
 
Kind regards,
Iliana Nikolova
the Telerik team