Sort column based on part of header clicked

[Christy]

I am replacing a webforms grid with the Kendo UI Grid and have come across an odd situation. We have a column that contains 2 pieces of information (Created By and Created Date). I initially set up the column with a template that includes both pieces

<td>
    <div>{{::dataItem.created | date: 'short'}}</div>
    <div>{{::dataItem.createdby.fullname}}</div>
</td>

and then set up the column in the columns array as

{
    field: 'created',
    title: 'Created Date<br/>User',
    width: '110px',
}

This works fine and sorts on the created date. However, the current webforms grid targets the sort based on where in the header the user clicks. If they click on 'Created Date', it sorts by created. If they click on 'User', it sorts by createdby.

I have seen a few posts on rewriting the column header, but I am not sure what to put in the <a> tag to distinguish between the created and createdby sorts. When I try to change it with something like

var newHeader = '<div ng-click="vm.sortCreated(created);">Created Date</div>' +
   '<div ng-click="vm.sortCreated(createdby);">User</div>';
var colHeader = $('#myGrid th[data-field=created]');
colHeader.html(newHeader);

I end up showing all of the html tags and the click events don't work.

Is this possible to do, or do I need to just create 2 separate columns? Thanks!

[Konstantin Dikov]

Hello Christy,

It should be possible to define headerTemplate for the column and use the API of the Grid's DataSource to fire different sort command depending on the clicked element, but you will have to disable the default sorting for that column. Following are two help topics that should help you achieve the desired result:

• http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.headerTemplate 
• http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-sort

I would personally recommend to use two separate columns and use the built-in sorting functionality.


Best Regards,
Konstantin Dikov
Telerik by Progress