Adding New Items

You can enable users to add a new item when the search results do not match their filtering conditions.

For a runnable example, refer to the demo on adding new items to the MultiSelect.

1. Initialize the MultiSelect.

   html

     <input id="products" style="width: 100%;" />
         <script>
             $(document).ready(function() {           
                 var data = [
                   { ProductName: "Beer", ProductID: "1" },
                   { ProductName: "Tee", ProductID: "2" },
                   { ProductName: "Coffee", ProductID: "3" }
                 ];                 
                 $("#products").kendoMultiSelect({
                     filter: "startswith",
                     dataTextField: "ProductName",
                     dataValueField: "ProductID",
                     dataSource: data
                 });
             });
         </script>

2. Refer the data source of the MultiSelect.

   js

     var widget = $("#products").getKendoMultiSelect();
     var dataSource = widget.dataSource;

3. Implement the confirmation dialog.

   js

     if (confirm("Are you sure?")) {
     dataSource.add({
         ProductID: 0,
         ProductName: value
     });

4. Sync the data to update the records.

   js

     dataSource.one("sync", function() {
         widget.select(dataSource.view().length - 1);
     });
   
     dataSource.sync();

See Also

• Adding New Items to the MultiSelect (Demo)
• JavaScript API Reference of the MultiSelect