Is it possible to bind the sorting/grouping of a column to a different property than its display property?

[Andrew]

Specifically this would be useful for grouping and sorting dates.
Take 5/1/2013 at 12:00 PM and 5/1/2013 at 1:00 PM

I'd like to provide an object with .DateTime that I can format against.

#= kendo.toString(CreateDate.DateTime, 'M/d/yyyy hh:mm tt') #

I'd also like to provide a separate property within the object to use for grouping, which would probably be an integer like 20130501, as well as another integer for sorting such as 201305012500.

I'm not having much luck so far in the fluent MVC wrapper.

I can bind to my strongly typed object that I called a 'GridDate', and have my ClientRowTemplate displaying GridDate.DisplayValue, which I format within the property.
I tried overriding GridDate's ToString to return a format of yyyyMMdd, but it spin-freezes when I try to group the column.

I'm out of ideas, need help.

[Alexander Valchev]

Hello Andrew,

The Grid will sort and filter according to the column field, e.g. the dataSource field to which the column is bound. You can control which dataSource field the column will display through the .ClientTemplate.

To sum up, you can bind the column to field A but make it display field B via template. In this way the user will see field B, but any sort/group/filter action will be done for field A.

Regards,
Alexander Valchev
Telerik

[Andrew]

Thanks Alex. I got the display and grouping functionality that I want, but not the sorting.

Just a suggestion cause you'll probably never hear the end of it until you do, but the ability to bind DisplayValue, GroupValue, and SortValue separately would be a big win for kendo ui.

Example from http://stackoverflow.com/questions/2466356/javascript-object-list-sorting-by-object-property

cars = [{
    name: "Honda", speed: 80
},
{
    name: "BMW", speed: 180
},
{
    name: "Trabi", speed: 40
},
{
    name: "Ferrari", speed: 200
}]

cars.sort(function(a, b) {
    return a.speed - b.speed;
})

I know it would be a challenge to implement such a feature both clientside and serverside, but its something that will never go away.
I'll want to display it one way, group it another way, and sort it in a culture invariant way. (we silly americans and our MM/dd/yyyy)

Another idea would be to allow us an specify a seperate sorting and grouping javascript method.
So kendo's js gets the collection that needs sorting/grouping put together, and applies our method in order to sort/group it.

[Alexander Popov]

Hello Andrew,

Thank you for the feedback! I would suggest you to submit this idea at KendoUI UserVoice, so other members of the community can evaluate, comment on and vote for it. Most voted ideas are often implemented in future KendoUI releases. Regarding the custom sorting - this is actually supported either by using server sorting or by using custom compare method, as seen in this example.

Regards,
Alexander Popov
Telerik

[Andrew]

Thanks Alexander, that does sort it by the compare initially, but I turned on sorting in that example and it doesn't seem to use the compare for when sorting the name column after initial load.
http://jsbin.com/IbOpuMed/1/edit

Is there a way to get the custom compare method to perform the sorting when clicking the column headers? (click Name header, sort by Speed)

[Andrew]

http://jsbin.com/efuleZew/2/edit

Playing around with it some more, seems datasource.sort controls the initial sorting, and passing the same compare method to datasource.sortable controls the sorting when the table headers are clicked.

This works well when there is only one column to sort, but how would I get this working with other columns that I would want to sort independently?

http://jsbin.com/efuleZew/2/edit

Here I want sorting by color to be unaffected by the name field's custom sorting.
I could think of a way if compare were passed the column that was selected for sorting, return a different function depending on that value.

Any ideas?

[Andrew]

Aha!

Thanks in combination to Alexander Popov and OnaBai.

http://onabai.wordpress.com/2013/09/28/kendoui-grid-custom-sorting-algorithms/

http://jsbin.com/OzolOfU/1/edit

sortable: true,
columns: [
{
    field: "name", title: "name",
    sortable : {
        allowUnsort: false,
        compare: function(a,b, dir) {
            return a.speed - b.speed;
        }
    }
},
{ field: "speed", title: "speed" },
{ field: "color", title: "color" }
],

To only perform the custom compare sort on the column you want it to intercept, pass that sortable block in as a property for the column.

My next task.. to figure out how to inject this sort function into a grid on page load cause we're using the fluent server wrappers....

[Alexander Popov]

Hi Andrew,

Although not supported out of the box it is possible to apply the sorting options once the DataSource requestStart event is triggered. 

Regards,
Alexander Popov
Telerik