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

Disable key input when maxSelectedItems condition is met

3 Answers 319 Views
MultiSelect
This is a migrated thread and some comments may be shown as answers.
Ryan
Top achievements
Rank 1
Ryan asked on 28 Jan 2016, 10:36 PM

Hi, this control is amazing but i have two questions.

How can i disable the keyboard input, without disabling the whole control when the maxSelectedItems condition is met?. I've tried disabling the control but then the user can't delete the already selected item, and out of the box it allows the user to input meaningless data that confuses them if it's going to be submited or not.

Also i would like to have a way to re enable the keyboard input if they delete an item and the count is lower than the maxSelectedItems.

Here is the dojo with the default behavior: http://dojo.telerik.com/@mfito/EPUTI

I'm using the angular implementation but i don't mind an answer in jQuery. Thanks in advance, keep doing a great job!.

3 Answers, 1 is accepted

Sort by
0
Patrick | Technical Support Engineer, Senior
Telerik team
answered on 29 Jan 2016, 09:27 PM
Hi Joseph,

Take a look at the following Telerik Dojo illustrating a solution for both of your scenarios.

Here is the code I used in the change event:
change: function(e) {
          var amountOfSelectedItems = this.dataItems().length;
       var maxSelectedItems = e.sender.options.maxSelectedItems;
           
          if (amountOfSelectedItems >= maxSelectedItems){
            $('.k-input').attr('readonly', "readonly");
          } else {
            $('.k-input').removeAttr('readonly');
          }
        }

Here is another Dojo using the same approach with AngularJS.

Hopefully this helps steer you in the right direction.

Regards,
Patrick
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Marouan
Top achievements
Rank 1
answered on 03 May 2017, 10:16 AM

Hi patrick

How Can I solve it if I use angular controls.

Regards

0
Dimitar
Telerik team
answered on 05 May 2017, 06:08 AM
Hello Marouan,

On the following Dojo examle you will find a modified version of the previous example, which works with AngularJS. You will notice that I have set the change event handler through k-on-change attribute, which executes the previously shown javascript code to make the input field readonly.

For additional information about angular integration you can have a look at this documentation article. You can also find an AngularJS demo for every widget in Kendo UI demos website. You can find the one for the MulstiSelect widget here.

I hope this helps.

Regards,
Dimitar
Telerik by Progress
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
Ryan
Top achievements
Rank 1
Answers by
Patrick | Technical Support Engineer, Senior
Telerik team
Marouan
Top achievements
Rank 1
Dimitar
Telerik team
Share this question
or