Hello,
I have a grid with a column that has template to displays a label based on a key ( ie: "#= getLabel(key) #"). The issue is that the sorting for this column is incorrect since the column is being sorted by the key and not the label ( which the user sees).
I implemented a custom sort for the grid but now every column clicked goes thru my custom compare function. I put this at the column item level in the columns array in the configuration.
Is it possible to have a custom compare for 1 column but not all ( ie: alphanumeric, date columns would go to default sorting)?
If only 1 sort function is allowed, how can I tell what column is clicked in that 1 sort function?
Thanks,
Bruce Radtke
12 Answers, 1 is accepted
Based on your post, I am not sure where did you implement the custom compare function. Could you please elaborate? Sending the code of the page will definitely help me a lot in fully understanding the case.
Further, the columns.sortable.compare configuration is a JavaScript function which is used to compare the values for a specific column:
Please, let me know if configuring columns.sortable.compare function helps in achieving the desired results.
I look forward to hearing from you.
Regards,
Preslav
Progress Telerik
Rank 1
Hi Preslav,
Thanks for the reply. I should clarify that my applications grid is using 'multiple' sort mode.
The single sort mode works as expected. Only when the column is clicked, then the custom sort function is called.
However in multiple sort mode, the custom function is called for every column sort, even thought it is only specified for the first column.
To recreate load the attached file.
Open devtools.
Place breakpoint in myColMultipleSort.
Click on the 2nd column of the bottom (multiple mode) grid. No breakpoint expected or hit.
Click on the 1st column that has the compare function. The breakpoint is hit and expected.
Click on the third column. The breakpoint is hit even thought the compare function is declared for the 1st column.
I expect the compare function to NOT be called on any other column but the 1st.
If it is the case that because it is 'multiple' mode that it is called for every column, how do I determine which column was actually clicked?
Please find sorting.html attached.
Best regards,
bruce
Rank 1
Hi Preslav,
My previous email was flagged as suspicious. I'm not sure why. I will add the html to the end of this email.
Here goes again---
My grid is 'multiple' mode. The custom compare function is declare for the 1st column. But if another column is clicked, the custom function is again called. I have modified the sorting.html example to include custom compare function for the 1st column only.
You can run the file and open Dev Tools.
Put a breakpoint on the myColMultipleSort function.
Click the 2nd column. No breakpoint hit or expected.
Click the 1st column. Breakpoint hit and expected.
Click the 3rd column. Breakpoint hit but not expected.
At this point ( after the 3rd column click), am I sorting for the 1st column or for the 3rd column? How can I determine which column cause the click?
Thanks,
bruce
Here is my sorting.html file:
<!DOCTYPE html>
<html>
<head>
<title>Sorting</title>
<meta charset="utf-8">
<link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
<link href="../../styles/kendo.common.min.css" rel="stylesheet">
<link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
<link href="../../styles/kendo.default.min.css" rel="stylesheet">
<link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
<script src="../../js/jquery.min.js"></script>
<script src="../../js/jszip.min.js"></script>
<script src="../../js/kendo.all.min.js"></script>
<script src="../content/shared/js/console.js"></script>
<script>
</script>
</head>
<body>
<a class="offline-button" href="../index.html">Back</a>
<script src="../content/shared/js/orders.js"></script>
<div id="example">
<div class="demo-section k-content wide">
<h4>Grid with single column sorting enabled</h4>
<div id="singleSort"></div>
</div>
<div class="demo-section k-content wide">
<h4>Grid with multiple column sorting enabled</h4>
<div id="multipleSort"></div>
</div>
<script>
$(document).ready(function () {
$("#singleSort").kendoGrid({
dataSource: {
data: orders,
pageSize: 6
},
sortable: {
mode: "single",
allowUnsort: false
},
pageable: {
buttonCount: 5
},
scrollable: false,
columns: [
{
field: "ShipCountry",
title: "Ship Country",
sortable: {
initialDirection: "desc",
compare: myColSingleSort
},
width: 300
},
{
field: "Freight",
width: 300
},
{
field: "OrderDate",
title: "Order Date",
format: "{0:dd/MM/yyyy}"
}
]
});
$("#multipleSort").kendoGrid({
dataSource: {
data: orders,
pageSize: 6
},
sortable: {
mode: "multiple",
allowUnsort: true,
showIndexes: true
},
pageable: {
buttonCount: 5
},
scrollable: false,
columns: [
{
field: "ShipCountry",
title: "Ship Country",
width: 300,
sortable: {
compare: myColMultipleSort,
},
},
{
field: "Freight",
width: 300
},
{
field: "OrderDate",
title: "Order Date",
format: "{0:d}"
}
]
});
});
</script>
<style>
.demo-section h3 {
margin: 5px 0 15px 0;
}
</style>
</div>
</body>
<script>
function myColMultipleSort(a,b,c){
console.log('myColMultipleSort called');
return 0;
}
function myColSingleSort(a,b,c){
console.log('myColSingleSort called');
return 0;
}
</script>
</html>
Rank 1
I tried to put the contents of settings.html in a explaination of the issue.
I got a server 500 error when I submitted.
How can I send you the contents of my html file which recreates this issue?
I was able to successfully open the HTML file from the first reply. Thank you for the runnable example, I was able to understand the issue.
The described is expected behavior due to the current implementation of the dataSource. When a new column is sorted, the dataSource is re-sorting the data for every sort expression.
If this behavior is slowing the performance of your project, a possible approach might be enabling server operations of the dataSource and sort the data on the server:
I hope this information is useful.
Regards,
Preslav
Progress Telerik
Rank 1
Hi ,
I am trying to achieve the same thing.I have two custom sorting function for two column.When i am clicking header of first column it calls the proper function and sorting works correctly but when i click on the second column header it will go to the another (first)custom compare function that i wrote for another(first) column.As per your answer in the post ,i should use serversorting=true.I tried that but it did not resolve my issue.Please suggest me how to resolve this issue?
Thanks,
vrushali
Based on your post, I created a test page:
It seems that the compare functions are working okay on my side. Could you please check the above Dojo, and let me know if I am doing something wrong? Additionally, it will help me a lot if you can prepare and share a runnable example or modify the above Dojo so it clearly replicates and isolates the issue.
I look forward to your reply.
Regards,
Preslav
Progress Telerik
Rank 1
Hi Preslav,
Thanks for the quick reply and example.I am not able to open the example.But i tried similar example for custom sorting through this link https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.sortable#columns.sortable.initialDirection and i edited the example as per my requirement.I am giving you the code that i edited and tried through this link and its not working.Can you please copy and paste the code and try it out.Please let me know what i am doing wrong here.
<div id="grid"></div>
<script>
var dataSource = new kendo.data.DataSource({
data: [
{ Distance: 4,City: "Bayonne",County:"Hudson",Name:"xyz"},
{ Distance: 6,City: "Newark",County:"Essex",Name:"abc" },
{ Distance: 3,City: "Jerscy City",County:"Hudson",Name:"pqr"},
{ Distance: 1,City: "Elizabeth",County:"Union",Name:"lmn"},
{ Distance: 5,City: "Newark",County:"Essex",Name:"def"},
{ Distance: 2,City: "Elizabeth",County:"Union",Name:"stv" }
],
sort :{
field:"City", dir: "desc", compare: function (a,b) {
return a.Distance === b.Distance ? 0 : (a.Distance > b.Distance) ? 1 : -1;
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
sortable:{
mode:"multiple",
allowUnsort:false
},
columns: [
{field: "Distance",sortable:false},
{
field: "City",
sortable: {
compare: function(a, b) {
return a.Distance === b.Distance ? 0 : (a.Distance >b.Distance)?1:-1;
}
}
},
{field: "County",sortable:false},
{
field: "Name",
sortable: {
compare: function(a, b) {
return a.County === b.County ? 0 : (a.County >b.County)?1:-1;
}
}
}
]
});
</script>
Thanks,
Vrushali
Rank 1
Hi Preslav,
My issue got resolved.I removed the mode:multiple and now my custom sorting function working fine as expected for both the column.This is just example i am trying ,But my actual requirement is i want to implement custom sorting for dyanamic column in kendo grid and as per the example i want to sort dyanamic column on key and display value in the column.Can you please send me some example and suggest me somthing.
Thanks,
Vrushali
In order to make the dynamic columns sortable by a compare function, we have to add this function to the Grid initialization. For example, when we create the columns array, based on the field, add the desire compare function.
I used "Create Grids with Dynamic Columns and Data Types" as a base, and added the following code to the generateColumns function:
function generateColumns(response){ var columnNames = response["columns"]; return columnNames.map(function(name){ if(name==="ProductName"){ return { field: name, sortable: { compare: function(a, b) { return a.UnitsInStock - b.UnitsInStock; } } }; }else{ return { field: name, format: (isDateField[name] ? "{0:D}" : "") }; } })}For a runnable example, check the modified code in this Dojo:
Regards,
Preslav
Progress Telerik
Rank 1
Hi Preslav,
I have some requirement in that i need to implement Multiple sorting on page load and i need to give priority to column while sorting means which column sort first and then second.Can i define that priorty at initial sorting,Is it possible?Please,suggest me somthing .
for eg:
sort :[
{ { field:"City", dir: "desc",priority:2},
{field:"County", dir: "desc",priority:1} ].
I wanted to implement somthing like this.Is it possible?
Thanks,
Sneha
]
For the time being, such functionality is not achievable. The priority is always based on the sorting order. For example, check the second Grid of this demo:
We will appreciate if you submit this idea to our feedback portal:
Most voted suggestions will be considered for implementation.
Regards,
Preslav
Progress Telerik