R2 2018 Release is here – now with modern UI for chatbots and more! See what’s new!
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