How to sort the selected items of multiselect?

4 posts, 1 answers
  1. Federico
    Federico avatar
    28 posts
    Member since:
    Sep 2017

    Posted 02 Oct Link to this post

    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

  2. Dimitar
    Admin
    Dimitar avatar
    176 posts

    Posted 04 Oct Link to this post

    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.
  3. Federico
    Federico avatar
    28 posts
    Member since:
    Sep 2017

    Posted 09 Oct Link to this post

    if I want to sort them by default.

    both at the beginning and the change will be in order
  4. Answer
    Dimitar
    Admin
    Dimitar avatar
    176 posts

    Posted 11 Oct Link to this post

    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.
Back to Top