Disable key input when maxSelectedItems condition is met

2 posts, 0 answers
  1. El Nacho
    El Nacho avatar
    16 posts
    Member since:
    May 2014

    Posted 28 Jan 2016 Link to this post

    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!.

  2. Patrick
    Patrick avatar
    203 posts

    Posted 29 Jan 2016 Link to this post

    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 {

    Here is another Dojo using the same approach with AngularJS.

    Hopefully this helps steer you in the right direction.

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top