Restrict MultiSelect to a single selection...

7 posts, 0 answers
  1. Robin
    Robin avatar
    46 posts
    Member since:
    Jul 2012

    Posted 14 May 2014 Link to this post

    Is there any way to restrict a multiselect to only having one selection, and then no more can be made.  I tried playing with the changed event, and checking for the number of values, and if more than zero, disabling the control, but then it wasn't possible to remove the selection, and add a new one.

    multiChanged: function(e) {
        var values = e.sender.value();
        if(values.length > 0) {
          viewModel.set("available", false);
        }
      }


    So I switched to using the select event, checking the value for more than zero.  

    selected: function(e) {
        if(viewModel.selectedNames.length > 0) {
          e.preventDefault();
        }
      },


    This seems to work, but am more wondering if there is something built-in to the multiselect so I wouldn't have to use the events.

    Here is my semi-working sample Demo@TryKendoUI

  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2598 posts

    Posted 15 May 2014 Link to this post

    Hi Robin,

    I am afraid that there is not built-in functionality that matches your requirements. I can see that your current solution is using the built-in events and methods and I can not see a reason not to use it.

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2598 posts

    Posted 15 May 2014 Link to this post

    Hi Robin,

    After some further looking in the configuration properties, I stumbled upon the maxSelectedItems configuration that you might use. Here is a link to the documentation:

    http://docs.telerik.com/kendo-ui/api/web/multiselect#configuration-maxSelectedItems 

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  4. Robin
    Robin avatar
    46 posts
    Member since:
    Jul 2012

    Posted 15 May 2014 in reply to Kiril Nikolov Link to this post

    Not sure how I missed that property. Thank you so much, this is much easier.
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2598 posts

    Posted 15 May 2014 Link to this post

    Hi Robin,

    Not sure how I missed it either, but glad I found it. 

    If something else comes up, please do not hesitate to contact us.

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. jackson
    jackson avatar
    2 posts
    Member since:
    Dec 2015

    Posted 12 Jul Link to this post

    how do I use this maxSelectedItems in MVVM? I tried to add data-maxSelectedItems ="1" in html markup, it didn't work. I also tried to put it in data-bind="maxSelectedItems:1" and it didn't work either. Thank you.
  7. Dimitar
    Admin
    Dimitar avatar
    351 posts

    Posted 14 Jul Link to this post

    Hi,

    The property should be set as data-max-selected-items="1" in MVVM. It works as expected in the following Dojo snippet, based on the MultiSelect MVVM demo. Note that in the snippet, the first MultiSelect is visible when the checkbox for "Set data-value-primitive" is checked. So it may be confusing if you change the value of this option for the first MultiSelect, run the snippet and check the result. It would be visible after you check the respective checkbox.

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