Thank you for the provided runnable example.
The described behavior is caused by the fact that when sorting is enabled, and a header template is used, we do not handle the click events over the elements that are part of the template automatically, because the user might want to set up his own handlers and logic (for example - include a button in the header template).
This is why the click events of the header template elements have to be handled by the developer. In general, when sorting is enabled, the Grid header content is wrapped in an anchor tag (<a>
I replaced the <div>
from the example with a <span>
so that the sort direction icon is rendered next to the text when the column is sorted, and to follow the best practices of nesting only inline elements inside of an <a>
tag. Then when the <span> is clicked by the user, the parent <a> is clicked programmatically in the span click event handler, which in turn triggers the built-in Grid sorting functionality:
I hope this helps.
Telerik by Progress