How to sort the selected items of multiselect?

[Federico]

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

[Dimitar]

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

[Federico]

if I want to sort them by default.

both at the beginning and the change will be in order

[Dimitar]

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

[Federico]

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);
  }

[Federico]

It also does not delete the element if it is deselected from the row

[Federico]

***It orders him differently each time.

[Dimitar]

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

[Michael]

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.

[Dimitar]

Hello Michael,

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

• http://dojo.telerik.com/aGuKE/8

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

[Michael]

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

 

 

 

[Dimitar]

Hello Michael,

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

• http://dojo.telerik.com/adOrOTiX/4

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

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

Regards,
Dimitar
Progress Telerik

[NithyaShree]

This worked for me:

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

[Andrew]

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

[Andrew]

Sorry, here is the DOJO link:

DOJO LInk

 

 

[Andrew]

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...