This is a migrated thread and some comments may be shown as answers.

Restrict MultiSelect to a single selection...

6 Answers 3331 Views
MultiSelect
This is a migrated thread and some comments may be shown as answers.
Robin
Top achievements
Rank 1
Robin asked on 14 May 2014, 05:39 PM
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

6 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 15 May 2014, 07:44 AM
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!
 
1
Kiril Nikolov
Telerik team
answered on 15 May 2014, 08:05 AM
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!
 
0
Robin
Top achievements
Rank 1
answered on 15 May 2014, 11:26 AM
Not sure how I missed that property. Thank you so much, this is much easier.
0
Kiril Nikolov
Telerik team
answered on 15 May 2014, 11:42 AM
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!
 
0
jackson
Top achievements
Rank 1
answered on 12 Jul 2017, 06:38 PM
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.
0
Dimitar
Telerik team
answered on 14 Jul 2017, 10:58 AM
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.
Tags
MultiSelect
Asked by
Robin
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Robin
Top achievements
Rank 1
jackson
Top achievements
Rank 1
Dimitar
Telerik team
Share this question
or