Exclude Specific Items When Sorting Grid Data

Environment

Product Grid for ProgressĀ® Kendo UIĀ®
Product Version 2018.2.516

Description

How can I exclude a particular row from sorting so that it always stays on top?

Solution

Use the compare function of the sortable property and use custom logic to override the default behavior. In the following example, Chai will always be the first row regardless of the sorting that the user applies.

<script src="https://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>

<div id="example">
  <div id="grid"></div>

  <script>
    $(document).ready(function() {
      $("#grid").kendoGrid({
        dataSource: {
          data: products,
          schema: {
            model: {
              fields: {
                ProductName: { type: "string" },
                UnitPrice: { type: "number" },
                UnitsInStock: { type: "number" },
                Discontinued: { type: "boolean" }
              }
            }
          },
          pageSize: 80
        },
        height: 850,
        sortable: {
          compare: function(a, b, descending) {
            if (descending){
              return b.ProductName == "Chai" ? -1 : a.ProductName === b.ProductName ? 0 : (a.ProductName > b.ProductName) ? 1 : -1;
            }
            else{
              return a.ProductName == "Chai" ? -1 : a.ProductName === b.ProductName ? 0 : (a.ProductName > b.ProductName) ? 1 : -1;
            }
          }
        },
        pageable: {
          input: true,
          numeric: false
        },
        columns: [
          "ProductName",
          { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px", sortable: false },
          { field: "UnitsInStock", title: "Units In Stock", width: "130px", sortable: false },
          { field: "Discontinued", width: "130px", sortable: false }
        ]
      });
    });
  </script>
</div>

See Also

In this article
Not finding the help you need? Improve this article