This is a migrated thread and some comments may be shown as answers.

How to sort the selected items of multiselect?

15 Answers 4153 Views
MultiSelect
This is a migrated thread and some comments may be shown as answers.
Federico
Top achievements
Rank 1
Federico asked on 02 Oct 2017, 08:51 AM

I ordered the source, but I can not do it for 'value'.

I use the multiselect with MVVM.

 

 

My html code:

<select id="doc" data-role="multiselect"
data-value-primitive="true"
data-text-field="name"
data-value-field="id"
data-bind="value: valueDoc,
source: sourceDoc"></select>

 

My js code:

vm = kendo.observable({

sourceDoc: new kendo.data.DataSource({
            data: [],
            sort: { field: "name", dir: "asc" }
        })
});

 

The value is not ordered

15 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 04 Oct 2017, 07:47 AM
Hello Frederico,

You can achieve this by the following implementation in the MultiSelect's change event:
<script>
  onChange: function(e) {
    var multi = e.sender;
           
    multi.tagList.find('> li').sort(function (a, b) {
      return $(a).text() > $(b).text();
    }).appendTo(e.sender.tagList);
  }
</script>


Here is a working Dojo example, where the above is demonstrated.

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Federico
Top achievements
Rank 1
answered on 09 Oct 2017, 11:41 AM

if I want to sort them by default.

both at the beginning and the change will be in order
0
Accepted
Dimitar
Telerik team
answered on 11 Oct 2017, 07:09 AM
Hеllo Federico,

You can checkout this modified Dojo example, where the the initially selected values in the MultiSelect are also being sorted. 

To achieve the desired result, I have moved the sorting logic in a separate function, which is called in both change and dataBound events of the widget.

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Federico
Top achievements
Rank 1
answered on 28 Nov 2017, 10:36 AM

This code doesn't work!

The onDataBound event doesn't sort the elements, why?

They are not sorted.
He orders him differently each time.
The event is called both before and after the value set.

I would like to have items sorted only at the beginning, and not at onChange.

 

<select id="doc" data-role="multiselect"
data-value-primitive="true"
data-text-field="name"
data-value-field="id"
data-bind="value: valueDoc,
        source: sourceDoc,
        events: { 
             dataBound: onDataBound                           
        }">
</select>

 

 

onDataBound:function(e){
    console.log("onDataBound doc aggiuntivi");
        orderMultiSelect(e.sender);
}
function orderMultiSelect(multi) {
      multi.tagList.find('> li').sort(function (a, b) {
        return $(a).text() > $(b).text();
      }).appendTo(multi.tagList);
  }
0
Federico
Top achievements
Rank 1
answered on 28 Nov 2017, 10:51 AM
It also does not delete the element if it is deselected from the row
0
Federico
Top achievements
Rank 1
answered on 28 Nov 2017, 10:52 AM
***It orders him differently each time.
0
Dimitar
Telerik team
answered on 29 Nov 2017, 01:20 PM
Hello Federico,

I have provided an answer in your other support thread on the same topic. To avoid duplicate posts, I would suggest that we continue our communication there. 

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Michael
Top achievements
Rank 1
answered on 08 Oct 2020, 01:43 AM

Dimitar,

The Dojo example doesn't sort the selected (dataitems) items, or at least do not appear to be sorted. Isn't that what was asked for? I am looking for the same functionality.

Need: select multiples from the multiselect that has a sorted datasource, and regardless of the order they are selected, they are (re)sorted and then displayed in the textbox when the dropdown is closed. OR sorted as described as each selection is made. Thanks.

0
Dimitar
Telerik team
answered on 12 Oct 2020, 05:18 AM

Hello Michael,

The following Dojo example correctly sorts the items upon selection on my end:

Were you referring to the same example? If that is indeed the cast, could you elaborate a bit more on what exactly is wrong with the example?

Regards,
Dimitar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Michael
Top achievements
Rank 1
answered on 12 Oct 2020, 02:24 PM

Thank you, Dimitar.

I think I could/should have been a little clearer. My multiselect uses a sorted list of objects, and I am trying to show the selected item sorted by the same property, which is not the ID or Text (display) fields defined.

Obj (ID: Text: Sorter)

The datasource is sorted in the list by Sorter property, additionally I need to sort the Selected (dataItems) by that property as they are selected and displayed.

Apologies, but inclusion of actual code is not possible per employer.

Thanks again, and I hope this is a bit clearer.

Michael

 

 

 

0
Dimitar
Telerik team
answered on 14 Oct 2020, 11:15 AM

Hello Michael,

You can sort the list according to a data item property by modifying the sort function as demonstrated in the following Dojo:

In addition to the above, note that the DataSource sort is also changed accordingly:

sort: { field: "UnitPrice", dir: "asc" }

Regards,
Dimitar
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

0
NithyaShree
Top achievements
Rank 1
answered on 25 Jan 2021, 07:09 AM

This worked for me:

 var multiSelect = $("#MultiSelectID").data("kendoMultiSelect");
 var multiSelectValArray = ("" + multiSelect.value() + "").split(",").sort();
 multiSelect.value(multiSelectValArray);     

0
Andrew
Top achievements
Rank 1
Iron
Iron
answered on 01 Feb 2021, 01:37 AM

If you manually sort the selected tags after data binding, you introduce an error into the code.

This error only appears if the sort order of the items by value is different to the sort order of items by text, for the initial selected items.

See this example that demonstrates the error. Try and deselect "Uncle Bob's Organic Dried Pairs" and you will see the control gets confused.

 

http://dogo.telerik.com/oliMeVIj

0
Andrew
Top achievements
Rank 1
Iron
Iron
answered on 01 Feb 2021, 01:39 AM

Sorry, here is the DOJO link:

DOJO LInk

 

 

0
Andrew
Top achievements
Rank 1
Iron
Iron
answered on 01 Feb 2021, 04:25 AM
Do not attempt to solve this problem by manually rearranging the dom elements. This is a hack which will result in undefined behavior. Specifically, the displayed items will not be internally mapped to the underlying data properly, so removing a visible item will cause a different data item to be removed.

Here is the correct way to order it, given that the value field is "ProductID" but you want it sorted by "ProductName"

 
function orderMultiSelect(multi) {
    const dataItems = multi.dataItems();
    dataItems.sort(
        (a, b) => {
            const textA = a.ProductName;
            const textB = b.ProductName;
            return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
        }
    );
   const values = dataItems.map(di => di.ProductID);
   multi.value(values);
}


Here is a working example link...
Tags
MultiSelect
Asked by
Federico
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Federico
Top achievements
Rank 1
Federico
Top achievements
Rank 1
Michael
Top achievements
Rank 1
NithyaShree
Top achievements
Rank 1
Andrew
Top achievements
Rank 1
Iron
Iron
Share this question
or