Exclude Specific Items When Sorting Grid Data
Environment
| Product | Progress® Kendo UI® Grid for jQuery |
| 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 a.ProductName == "Chai" ? 1 : a.ProductName === b.ProductName ? 0 : (a.ProductName > b.ProductName) ? 1 : -1;
}
else{
return b.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>