Kendo Grid Sort with headerTemplate problem

[Dinko]

I got your new grip package and there seems to be a problem with how the sorting works when combined with header template. In the example below you can see the problem. Try sorting by "Product name".  When you click on the template the sort does not work. If you click on the link outside the div element then the sort works.

http://plnkr.co/edit/SukCe787HAwIwEgnRiC4?p=preview

 

The problem comes from how the sortColumn handler in header.component is defined. Apparently if the target is not the link element then the sort operation is interrupted. Does this mean that each header template must handle click events (for sorting) internally? 

    HeaderComponent.prototype.sortColumn = function (column, event, link) {
        var target = event ? event.target : null;
        if (column.headerTemplateRef && target !== link) { // this is the problem
            return false;
        }
        ...
    };

How are we supposed to use the grid's sort logic with header templates? 

P.S. clicking on the sort arrow icon also does not fire the sort event.

[Dimiter Topalov]

Hello Dinko,

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:

http://plnkr.co/edit/MvcaguxsghvLfLZ3Mxj1?p=preview

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress

[Dinko]

Hello Dimiter,

Thank you for the example. There is small one issue though. What about the arrow icon(when sorted)? You still can't click on it to toggle the sort. Do I have to attach programmatically click handler for that? Shouldn't the grid take care of that?

[Dimiter Topalov]

Hello Dinko,

Thank you for bringing this issue to our attention, it is logged, and you can expect a fix in a future release:

https://github.com/telerik/kendo-angular/issues/433

Meanwhile you can use some custom workaround for retrieving the icon element, and attaching a custom click handler to it as well, for example:

http://plnkr.co/edit/3W2Rs96tmz2ilDObda1r?p=preview

I am sorry for any inconvenience this might cause. I have also updated your Telerik points for helping us improve the quality of our product.

Regards,
Dimiter Topalov
Telerik by Progress