Adding new items to multiselect

2 posts, 0 answers
  1. David
    David avatar
    1 posts
    Member since:
    Oct 2018

    Posted 25 Jun 2019 Link to this post

    I would like the user to be able to add options, however I intend to handle adding the new items when the form is posted rather than dynamically.

    Ideally I'd like to continue using the tag helper if possible for simplicity, and be able to hit enter to add the entry if it doesn't appear in the filtered list.

    Is there any existing solution to this?

  2. Dimitar
    Admin
    Dimitar avatar
    732 posts

    Posted 01 Jul 2019 Link to this post

    Hello David,

    What you could try for achieving the desired result is to subscribe to the 'Enter' keydown event of the MultiSelect wrapper. Once a value that is not available in the DataSource is entered and the 'Enter' key is pressed, you could add the value to the widget through the dataSource.add() method and then sync() the changes. Calling sync() will send a request to the /create url of the DataSource:
    <script>
    var multi =$("#products").getKendoMultiSelect();
               
    multi.wrapper.keydown(function(e) {
      if(e.keyCode == 13){
        alert('Enter key');
        addNew("products", multi.input.val());
      }
    });
     
    function addNew(widgetId, value) {
      var widget = $("#" + widgetId).getKendoMultiSelect();
      var dataSource = widget.dataSource;
           
      if (confirm("Are you sure?")) {       
        dataSource.add({
          ProductID: 0,
          ProductName: value
        });
     
        dataSource.one("sync", function(args) {
          widget.value(widget.value().concat(dataSource.view().length)); 
        });
     
        dataSource.sync();
      }
    }
    </script>


    Regards,
    Dimitar
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

Back to Top