Restrict MultiSelect to a single selection...

[Robin]

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

[Kiril Nikolov]

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

 

 

[Kiril Nikolov]

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

 

 

[Robin]

Not sure how I missed that property. Thank you so much, this is much easier.

[Kiril Nikolov]

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

 

 

[jackson]

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.

[Dimitar]

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