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

    Set the DropDownList DataSource Dynamically

    Environment

    Product Progress® Kendo UI® DropDownList for jQuery
    Operating System Windows 10 64bit
    Visual Studio Version Visual Studio 2017
    Preferred Language JavaScript

    Description

    How can I dynamically set the data source of a Kendo UI DropDownList widget?

    Solution

    The following example demonstrates how to achieve the desired scenario.

    Open In Dojo
      <div id="example">
        <div class="demo-section k-header">
          <h4>View Order Details</h4>
          <p>
            <label for="categories">Categories:</label><input id="categories" style="width: 270px" />
          </p>
          <p>
            <label for="products">Products:</label><input id="products" disabled="disabled" style="width: 270px" />
          </p>
          <p>
            <label for="orders">Orders:</label><input id="orders" disabled="disabled" style="width: 270px" />
          </p>
    
          <button class="k-button" id="set">Set DataSource</button>
        </div>
    
        <style scoped>
          .demo-section {
            width: 400px;
          }
          .demo-section p {
            margin-top: 1em;
          }
          .demo-section label {
            display: inline-block;
            width: 100px;
            padding-right: 5px;
            text-align: right;
          }
          .demo-section .k-button {
            margin: 1em 0 0 105px;
          }
          .k-readonly
          {
            color: gray;
          }
        </style>
    
        <script>
          $(document).ready(function() {
            var categories = $("#categories").kendoDropDownList({
              optionLabel: "Select category...",
              dataTextField: "CategoryName",
              dataValueField: "CategoryID",
              dataSource: {
                type: "odata",
                serverFiltering: true,
                transport: {
                  read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
                }
              }
            }).data("kendoDropDownList");
    
            var products = $("#products").kendoDropDownList({
              autoBind: false,
              cascadeFrom: "categories",
              optionLabel: "Select product...",
              dataTextField: "ProductName",
              dataValueField: "ProductID",
            }).data("kendoDropDownList");
    
            var orders = $("#orders").kendoDropDownList({
              autoBind: false,
              cascadeFrom: "products",
              optionLabel: "Select order...",
              dataTextField: "Order.ShipCity",
              dataValueField: "OrderID",
              dataSource: {
                type: "odata",
                serverFiltering: true,
                transport: {
                  read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Order_Details?$expand=Order"
                }
              }
            }).data("kendoDropDownList");
    
            $("#set").click(function() {
              products.setDataSource({
                type: "odata",
                serverFiltering: true,
                transport: {
                  read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
                }
              });
            });
          });
        </script>
      </div>