Kendo-UI Use multiselect with user defined values (not predefined values)

1k views Asked by At

Can Kendo-UI multiselect be use for input of user defined values?

By default when user clicks on multiselect control a dropdown is opened and user can select one of the predefined values. When user select one of the predefined values, that value is added to the selection.

What we need is a little bit different behavior. We would like to allow user to enter a custom string value, press enter key, and then that entered value would added to the selection.

One idea was to abuse multiselect control, by subscribing to the key events and adding user defined value to data source of the control, at which point we could (possibly) mark that value as selected (I am just guessing this, not sure if it would actually work).

So, is there an option value for this kind of behavior for multiselect or maybe some other control (does not have to be Kendo), so we don't have to hack existing kendo control?

As an example of the behavior I have create a quick [PoC here] (http://plnkr.co/edit/mcpVsstaxB2Xteh374pk?p=preview).

Here is the code from the plnkr

<script>
  $(function() {
    var input = $('input');
    var list = $('ul');

    input.on('keyup', function(e) {
      if (e.which === 13) {
        var value = $.trim(input.val());
        if (value.length > 0) {
          list.append($('<li/>'));
          list.find('li:last').text(value);
          var remove = $('<span class="remove"/>');
          remove.html('&nbsp; x');
          list.find('li:last').append(remove);
          remove = list.find('.remove:last');
          remove.click(function() {
            $(this).closest('li').remove();
          });
          input.val('');
        }
      }
    });

  });
</script>
0

There are 0 answers