Rank 2
Bronze
Bronze
Bronze
1 Answer, 1 is accepted
Hi, Lee,
Since you mentioned that you're using a local dataSource, you can utilize the dataSource.sort.compare function.
The configuration allows you to perform custom sorting on the dataSource data. To make sure the function is called every time you select/deselect an item, you can call the dataSource.sort() method in the change event of the component.
change: e => orderMultiSelect.call(e.sender)
});
function orderMultiSelect(multi) {
let ds = this.dataSource,
sort = ds.sort();
ds.sort(sort);
}And here's an example of how the custom sorting itself should look:
dataSource: {
data: [{value: "California", text: "California"}, {value: "Alaska", text: "Alaska"}, {value: "Florida", text: "Florida"}, {value: "Delaware", text: "Delaware"}, {value: "Georgia", text: "Georgia"}],
sort: {
field: "text",
dir: "asc",
compare: (a, b) => {
let selectedValues = $("#multiselect").data("kendoMultiSelect").value(),
aSelected = selectedValues.indexOf(a.text),
bSelected = selectedValues.indexOf(b.text);
if (aSelected !== -1 && bSelected !== -1) {
return a.text.localeCompare(b.text);
}
if (aSelected !== -1) return -1;
if (bSelected !== -1) return 1;
return a.text.localeCompare(b.text);
}
}
}Results
init:
Florida selected:
California selected after Florida(the selected items are also sorted between themselves):
Dojo
https://dojo.telerik.com/@gdenchev/UzeHabiH
Let me know if you have any questions.
Best Regards,
Georgi Denchev
Progress Telerik
Rank 2
Bronze
Bronze
Bronze
https://dojo.telerik.com/uJAZAliQ
Hi, Lee,
The solution with the close event looks good to me. As long as it achieves the desired result, it should work with no issues.
The jumping occurs because sorting the multiselect causes the list to re-render. Unfortunately, there is no way to reliable stop that behavior.
The downside of the close event approach is that you'll only see the "re-sorted" list when the user closes the popup and opens it up again. If this is the expected outcome then your solution is perfect.
Best Regards,
Georgi
Hello, Lee,
What I've shared with you is a customized solution that I was hoping would be of help to you as a starting point. This is not something that has been either thoroughly tested, nor intended to cover all possible cases.
Custom code such as this one is prone to not work well with other features as it is not written with them in mind. I would suggest you either use virtualization without the customization, or use the customization without virtualization.
Fully customized implementations fall out of the support scope.
If you believe this might be a useful feature to have, I'd recommend that you open a Feature Request in the public feedback portal.
Best Regards,
Georgi
Rank 2
Bronze
Bronze
Bronze
Hi, Lee,
If I had to take a guess, I'd say that it probably has to do with the sorting and only the portion of the data being available at a time. That is the purpose of the virtualization so problems will likely arise when you try to sort only a subset of the data.
Virtualization combined with the custom sorting approach most likely won't work.
Best Regards,
Georgi