New to Kendo UI for jQuery? Download free 30-day trial

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

  1. Initialize the DropDownList.

      <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").kendoDropDownList({
                      filter: "startswith",
                      dataTextField: "ProductName",
                      dataValueField: "ProductID",
                      dataSource: data
                  });
              });
          </script>
    
  2. Refer the data source of the DropDownList.

      var widget = $("#products").getKendoDropDownList();
      var dataSource = widget.dataSource;
    
  3. Implement the confirmation dialog.

      if (confirm("Are you sure?")) {
      dataSource.add({
          ProductID: 0,
          ProductName: value
      });
    
  4. Sync the data to update the records.

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

See Also

In this article