Kendo UI R3'17 Release Webinar is near! Sign up to watch technical demos of the freshly released bits, including support for React and Vue.
All Components
Change Theme

SASS Themes (beta)

    LESS Themes

      SASS Theme Builder

      Create new or customize SASS themes
      Launch Theme Builder

      MVVM / Widget binding

      Current view model state

      {
          autoCompleteValue: ,
          comboBoxValue: ,
          dropDownListValue: ,
          datePickerValue: ,
          timePickerValue: ,
          numericTextBoxValue: ,
          sliderValue: ,
          multiSelectValue: ,
          gridSource: [
          ],
          treeviewSource: [
          ]
      }
                      
      • AutoComplete

      • ComboBox:

      • DropDownList:

      • DatePicker:

      • TimePicker:

      • NumericTextBox:

      • Slider:

      • TreeView

      • MultiSelect:

      • Grid

      • Splitter

        Pane 1
        Pane 2
      • TabStrip

        • First
        • Second

        First page:

        Pick a time:

        Second page:

        Time is:

      View source code:

      <div class="demo-section k-content wide">
                  <h4>Current view model state</h4>
                  <pre class="prettyprint">
      {
      autoCompleteValue: <span data-bind="text: displayAutoCompleteValue"></span>,
      comboBoxValue: <span data-bind="text: displayComboBoxValue"></span>,
      dropDownListValue: <span data-bind="text: displayDropDownListValue"></span>,
      datePickerValue: <span data-bind="text: displayDatePickerValue"></span>,
      timePickerValue: <span data-bind="text: displayTimePickerValue"></span>,
      numericTextBoxValue: <span data-bind="text: displayNumericTextBoxValue"></span>,
      sliderValue: <span data-bind="text: sliderValue"></span>,
      multiSelectValue: <span data-bind="text: displayMultiSelectValue"></span>,
      gridSource: [
      <span data-bind="text: displayGridSource"></span>    ],
      treeviewSource: [
      <span data-bind="text: displayTreeviewSource"></span>    ]
      }
                  </pre>
      </div>
      <div class="demo-section k-content wide">
          <ul class="fieldlist">
              <li>
                  <h4>AutoComplete</h4>
                  <input data-role="autocomplete" data-text-field="name" data-bind="source: colors, value: autoCompleteValue"/>
              </li>
              <li>
                  <h4>ComboBox:</h4>
                  <select data-role="combobox" data-text-field="name" data-value-field="value" data-bind="source: colors, value: comboBoxValue"></select>
              </li>
              <li>
                  <h4>DropDownList:</h4>
                  <select data-role="dropdownlist" data-text-field="name" data-value-field="value" data-bind="source: colors, value: dropDownListValue"></select>
              </li>
              <li>
                  <h4>DatePicker:</h4>
                  <input data-role="datepicker" data-bind="value: datePickerValue" />
              </li>
              <li>
                  <h4>TimePicker:</h4>
                  <input data-role="timepicker" data-bind="value: timePickerValue" />
              </li>
              <li>
                  <h4>NumericTextBox:</h4>
                  <input data-role="numerictextbox" data-format="c" data-bind="value: numericTextBoxValue" />
              </li>
              <li>
                  <h4>Slider:</h4>
                  <input data-role="slider" data-bind="value: sliderValue" />
              </li>
              <li>
                  <h4>TreeView</h4>
                  <div data-role="treeview" data-drag-and-drop="true" data-bind="source: treeviewSource"></div>
              </li>
          </ul>
          <ul class="fieldlist">
              <li>
                  <h4>MultiSelect:</h4>
                  <select multiple="multiple" data-role="multiselect" data-text-field="name" data-value-field="value" data-bind="source: colors, value: multiSelectValue"></select>
              </li>
              <li>
                  <h4>Grid</h4>
                  <div data-role="grid" data-sortable="true" data-editable="true" data-columns='["Name", "Price", "UnitsInStock", {"command": "destroy"}]' data-bind="source: gridSource"></div>
              </li>
              <li>
                  <h4>Splitter</h4>
                  <div data-role="splitter" data-panes="[{size:'30%', collapsible:true},{size:'70%'}]">
                      <div>Pane 1</div>
                      <div>Pane 2</div>
                  </div>
              </li>
              <li>
                  <h4>TabStrip</h4>
                  <div data-role="tabstrip" data-animation="false">
                      <ul>
                          <li class="k-state-active">First</li>
                          <li>Second</li>
                      </ul>
                      <div>
                          <h4>First page:</h4>
                          Pick a time: <input data-role="timepicker" data-bind="value: timePickerValue"/>
                      </div>
                      <div>
                          <h4>Second page:</h4>
                          Time is: <span data-bind="text: displayTimePickerValue"></span>
                      </div>
                  </div>
              </li>
          </ul>
      </div>
          

      View model source code:

      var viewModel = kendo.observable({
          autoCompleteValue: null,
          colors: [
              { name: "Red", value: "#f00" },
              { name: "Green", value: "#0f0" },
              { name: "Blue", value: "#00f" }
          ],
          displayAutoCompleteValue: function() {
              var autoCompleteValue = this.get("autoCompleteValue");
              return kendo.stringify(autoCompleteValue);
          },
          comboBoxValue: null,
          displayComboBoxValue: function() {
              var comboBoxValue = this.get("comboBoxValue");
              return kendo.stringify(comboBoxValue);
          },
          dropDownListValue: null,
          displayDropDownListValue: function() {
              var dropDownListValue = this.get("dropDownListValue");
              return kendo.stringify(dropDownListValue);
          },
          numericTextBoxValue: 10,
          displayNumericTextBoxValue: function() {
              var numericTextBoxValue = this.get("numericTextBoxValue");
      
              return kendo.toString(numericTextBoxValue, "c");
          },
          datePickerValue: new Date(),
          displayDatePickerValue: function() {
              var datePickerValue = this.get("datePickerValue");
              return kendo.toString(datePickerValue, "yyyy-MM-dd");
          },
          timePickerValue: new Date(),
          displayTimePickerValue: function() {
              var timePickerValue = this.get("timePickerValue");
      
              return kendo.toString(timePickerValue, "hh:mm:ss");
          },
          multiSelectValue: [],
          displayMultiSelectValue: function() {
              var multiSelectValue = this.get("multiSelectValue");
              return kendo.stringify(multiSelectValue);
          },
          gridSource: [
              { Name: "Chai", Price: 18.00, UnitsInStock: 39 },
              { Name: "Chang", Price: 19.00, UnitsInStock: 17 },
              { Name: "Mishi Kobe Niku", Price: 97.00, UnitsInStock: 29 }
          ],
          displayGridSource: function() {
              return stringify(this.get("gridSource"));
          },
          treeviewSource: kendo.observableHierarchy([
              { text: "Andrew", expanded: true, items: [
                  { text: "Nancy" },
                  { text: "Steve" }
              ] }
          ]),
          displayTreeviewSource: function() {
              return stringify(this.get("treeviewSource").toJSON());
          }
      });
      
      viewModel.autoCompleteValue = viewModel.colors[1];
      viewModel.dropDownListValue = viewModel.colors[0];
      viewModel.comboBoxValue = viewModel.colors[0];
      
      kendo.bind($("table"), viewModel);
              

      HTML5/JavaScript source

      API Reference
      • widgets.html
      • Widget configuration

      Support & learning resources