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