Position the Null Values Last When Sorting

Environment

Product Version	2019.3.917
Product	Progress® Kendo UI® Grid for jQuery

Description

How do I show the null values at the end of the Grid when I sort it in any order?

Solution

Use the following custom function in the columns.sortable.compare configuration.

  columns: [{
    sortable: {
      compare: function (a, b, desc) {
        if (a.name === b.name)
          return 0;
        else if (a.name === null)
          return desc ? -1 : 1;
        else if (b.name === null)
          return desc ? 1 : -1;
        else if (desc)
          return -1;
        else
          return 1;
      }
    }
  }]

Example

  <div id="grid"></div>
  <script>
      var numbers = {
          "one"  : 1,
          "two"  : 2,
          "three": 3
      };

      var dataSource = new kendo.data.DataSource({
          data: [
          { id : 1, name : "a" },
          { id : 2, name : "b" },
          { id : 3, name : "c" },
          { id : 4, name : "d" },
          { id : 5, name : "e" },
          { id : 6, name : null },
          { id : 7, name : "g" }
      ],
      pageSize: 10,
      schema  : {
          model: {
              fields: {
                  id   : { type: 'number' },
                  name : { type: 'string' }
              }
          }
      }
      });

      $("#grid").kendoGrid({
          dataSource: dataSource,
          sortable: true,
          columns: [ { field: "id", title: "id" },
          { 
              field: "name", 
              title: "Name",
              sortable: {
                  compare: function (a, b, desc) {
                    if (a.name === b.name)
                        return 0;
                      else if (a.name === null)
                        return desc ? -1 : 1;
                      else if (b.name === null)
                        return desc ? 1 : -1;
                      else if (desc)
                        return -1;
                      else
                        return 1;
                  }
                }
              }]
      });
  </script>

See Also

• columns.sortable.compare configuration