This is a migrated thread and some comments may be shown as answers.

Sort column based on part of header clicked

1 Answer 601 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Christy asked on 09 Mar 2017, 02:44 PM

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

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

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]');

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!

1 Answer, 1 is accepted

Sort by
Konstantin Dikov
Telerik team
answered on 13 Mar 2017, 09:01 AM
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:
I would personally recommend to use two separate columns and use the built-in sorting functionality.

Best Regards,
Konstantin Dikov
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Asked by
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Share this question