CODEWITHSUNDEEP
kendo-uikendo-grid
Jefferson
Jefferson

Reputation: 21

Kendo grid sorting not working with characters and number

In this example I am using the Kendo grid and the sortable flag. It sort columns with dateTime and all characters fine. But the Product name column has characters and numbers and the sorting is not working . ANA9 will always go to the to but ANA11 should be at the top. Any help with this would be great.

https://dojo.telerik.com/@mcdevittnccn/aDUyicow

Date Field

    var datea = a.publishedDate.split('/');
    var newDatea = datea[1] + '/' + datea[0] + '/' + datea[2];
    var dateb = b.publishedDate.split('/');
    var newDateb = dateb[1] + '/' + dateb[0] + '/' + dateb[2];
    
   if (newDatea === newDateb) { return 0; }
   if (newDatea > newDateb) { return 1; }
   return -1;

Upvotes: 0

Views: 2472

Answers (1)

NigelK
NigelK

Reputation: 8480

You need to implement a compare function for the ProductName column. This function receives two items from your datasource and you return 0 if you deem them to be equal, 1 if you decide the first item should sort higher than the second and -1 if it should sort lower.

This achieves your desired result for the data in your dojo:

field: "ProductName",
title: "Product Name",
sortable: {
    initialDirection: "asc",
    compare: function(a, b) {
        var inta = parseInt(a.ProductName.substring(3));
        var intb = parseInt(b.ProductName.substring(3));
        if (inta === intb) { return 0; }
        if (inta > intb) { return 1; }
        return -1;
     }
},
width: 300

Here I have simply assumed that the product name is 3 characters followed by a number and that it is the number that determines the order. Hence I have extracted the number from the string, converted to an int and then compared.

If the number of characters before the number can vary and/or you need to sort by the character part and then the number part, your compare function will clearly need to be more sophisticated than mine.

See the API at: https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.sortable

Upvotes: 1

Related Questions