How to sort the selected items of multiselect?

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

    Posted 02 Oct 2017 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
    423 posts

    Posted 04 Oct 2017 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 2017 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
    423 posts

    Posted 11 Oct 2017 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.
  5. Federico
    Federico avatar
    6 posts
    Member since:
    Nov 2017

    Posted 28 Nov 2017 Link to this post

    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);
      }
  6. Federico
    Federico avatar
    6 posts
    Member since:
    Nov 2017

    Posted 28 Nov 2017 in reply to Dimitar Link to this post

    It also does not delete the element if it is deselected from the row
  7. Federico
    Federico avatar
    6 posts
    Member since:
    Nov 2017

    Posted 28 Nov 2017 in reply to Federico Link to this post

    ***It orders him differently each time.
  8. Dimitar
    Admin
    Dimitar avatar
    423 posts

    Posted 29 Nov 2017 Link to this post

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