Edit this page

Change Options of Widgets Dynamically

Environment

Product Progress Kendo UI for jQuery
Operating System Windows
Browser All
Browser Version All
Visual Studio version All
Preferred Language JavaScript

Description

How can I change the options of a Kendo UI widget programmatically?

Solution

Set the setOptions method for the widget that you use.

The following example demonstrates how to dynamically change the Grid columns based on a selection of the MultiSelect widget. You can use the same approach to adjust all options of both the Grid and the other Kendo UI widgets.

For the complete implementation, refer to this Dojo example.

   <div id="example">
   <p>Select Grid columns: </p>
    <select id="columns"></select>
    <p>The Grid columns will be shown based on the values selected in the MultiSelect:</p>
    <div id="grid"></div>
    <script>
     $(document).ready(function() {
          var defaultColumns = [{field:"OrderID",filterable: false},
                                {field:"Freight"},
                                {field: "OrderDate",title: "Order Date",format: "{0:MM/dd/yyyy}"},
                                {field: "ShipName",title: "Ship Name"},
                                {field: "ShipCity",title: "Ship City"}]
    $("#columns").kendoMultiSelect({
            dataSource:{
              data:["OrderID", "Freight", "ShipName", "OrderDate", "ShipCity"]
            },
     change:function(e){
              var selectedColumns = this.value()
              var grid = $('#grid').data('kendoGrid')
              if(selectedColumns.length == 0){
                grid.setOptions({
                  columns:defaultColumns
                })
              }
              else{
                grid.setOptions({
                  columns:selectedColumns
                })
              }
            }
          })
          $("#grid").kendoGrid({
            dataSource: {
              type: "odata",
              transport: {
                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
              },
              schema: {
                model: {
                  fields: {
                    OrderID: { type: "number" },
                    Freight: { type: "number" },
                    ShipName: { type: "string" },
                    OrderDate: { type: "date" },
                    ShipCity: { type: "string" }
                  }
                }
              },
              pageSize: 20,
              serverPaging: true,
              serverFiltering: true,
              serverSorting: true
            },
            height: 550,
            filterable: true,
            sortable: true,
            pageable: true,
            columns: defaultColumns
          });
        });
      </script>
    </div>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy