Move selected items to top of kendo multiselect

1 Answer 12 Views
MultiSelect
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
Lee asked on 24 Apr 2024, 01:31 PM | edited on 24 Apr 2024, 01:35 PM
I have a kendo multi-select with a list of items sorted by name (Alaska, California, Delaware, Florida, Georgia...). When a user selects items, I want them to be displayed at the top of the list the next time the list is opened (not to move during the select process). For example, if the user selects Delaware and Florida the new order should be: Delaware (selected), Florida (selected), Alaska, California, Georgia. How would I accomplish this? Note, if it makes a difference, some of my lists are virtualized and some are not. It depends on how many reasonable options I could have. All are using a local JSON data source.

1 Answer, 1 is accepted

Sort by
0
Georgi Denchev
Telerik team
answered on 29 Apr 2024, 11:41 AM

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

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
commented on 29 Apr 2024, 05:26 PM

Thank you, George. This got me on the right track. I did find a bug with using the change event. When the list is long enough to scroll and autoClose is set to false, it causes jumping. Here is an updated dojo using the close event instead: 
https://dojo.telerik.com/uJAZAliQ
Georgi Denchev
Telerik team
commented on 30 Apr 2024, 10:28 AM

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

Tags
MultiSelect
Asked by
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
Answers by
Georgi Denchev
Telerik team
Share this question
or