How to sort numeric with string values in Kendo-Grid

Question

I am using Kendo-Grid which is having a column has values of both number & string (NA). Any idea how to sort them?

Solution 1

Its working with the code avilable in http://jsbin.com/egoneWe/3/edit

Solution 2

You can sort them using a custom compare function. Here is some sample code which will put items with 'N/A' on top:

$("#grid").kendoGrid({
  dataSource: [
    { price: 1 },
    { price: "N/A" },
    { price: 20 },
    { price: 2 }
  ],
  sortable: true,
  columns: [
    {
      field: "price",
      sortable: {
        compare: function(a, b) {
          var x = a.price;
          var y = b.price;

          if (x == 'N/A') {
            x = 0;
          }

          if (y == 'N/A') {
            y = 0;
          }

          return x - y;
        }
      }
    }
  ]
});

Here is a live demo: http://jsbin.com/urUXOCa/1/edit

Comments

[JPN]

From your jsbin, I couldn't understand from where you are calling valueTemplate(e)

[JPN]

This demo works well and I have edited it and added few more values and it works perfect. But the same logic is not working for me. I think the reason could be that I am not using jQuery and I am unsing Angular-Kendo. Any idea how to make this sortable: {compare:....}} working with angular-kendo

[JPN]

In the example, how do we get the column a.price dynamically. Atleast how to fetch the value field into var x = a.$field (something like that). Is that possible

[Robin Giltner]

In the columns collection on the grid. columns: [ { field: "name", title: "Name" }, { field: "sort", title: "Value", template: valueTemplate } ]

[JPN]

aaron - How can I add the string at the time of display? Can you please elaborate?

[ADH]

Just replace the zeros with whatever string you like using the template function. Thank you JPN, this was a very helpful post for me.

[Andy Roberts]

jsbin.com/yitugitece/edit?html,js,output a version of this answer working with secure css and jquery referneces

[Andy Roberts]

here's an updated jsbin with secure links to the libraries. jsbin.com/sezipoqebu/1/edit?html,js,output