Back
Widget Current view model state

AutoComplete

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

ComboBox

DatePicker

DropDownList

MultiSelect

Grid

NumericTextBox

Slider

TimePicker

TabStrip

  • First
  • Second

First page:

Pick a time:

Second page:

Time is:

TreeView

Splitter

Pane 1
Pane 2

View source code:

<table>
    <tr>
        <th>Widget</th>
    </tr>
    <tr>
        <td>
            <h4>AutoComplete</h4>
            <input data-role="autocomplete" data-text-field="name" data-bind="source: colors, value: autoCompleteValue"/>
        </td>
    </tr>
    <tr>
        <td>
            <h4>ComboBox</h4>
            <select data-role="combobox"
                data-text-field="name" data-value-field="value" data-bind="source: colors, value: comboBoxValue"></select>
        </td>
    </tr>
    <tr>
        <td>
            <h4>DatePicker</h4>
            <input data-role="datepicker" data-bind="value: datePickerValue" />
        </td>
    </tr>
    <tr>
        <td>
            <h4>DropDownList </h4>
            <select data-role="dropdownlist"
                data-text-field="name" data-value-field="value" data-bind="source: colors, value: dropDownListValue"></select>
        </td>
    </tr>
    <tr>
        <td>
            <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>
        </td>
    </tr>
    <tr>
        <td>
            <h4>NumericTextBox</h4>
            <input data-role="numerictextbox" data-format="c" data-bind="value: numericTextBoxValue" />
        </td>
    </tr>
    <tr>
        <td>
            <h4>Slider</h4>
            <input data-role="slider" data-bind="value: sliderValue" />
        </td>
    </tr>
    <tr>
        <td>
            <h4>TimePicker</h4>
            <input data-role="timepicker" data-bind="value: timePickerValue" />
        </td>
    </tr>
    <tr>
        <td>
            <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>
        </td>
    </tr>
    <tr>
        <td>
            <h4>TreeView</h4>
            <div data-role="treeview"
                data-animation="false"
                data-drag-and-drop="true"
                data-bind="source: treeviewSource"></div>
        </td>
    </tr>
</table>

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);
    },
    datePickerValue: new Date(),
    displayDatePickerValue: function() {
        var datePickerValue = this.get("datePickerValue");
        return kendo.toString(datePickerValue, "yyyy-MM-dd");
    },
    dropDownListValue: null,
    displayDropDownListValue: function() {
        var dropDownListValue = this.get("dropDownListValue");
        return kendo.stringify(dropDownListValue);
    },
    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"));
    },
    numericTextBoxValue: 10,
    displayNumericTextBoxValue: function() {
        var numericTextBoxValue = this.get("numericTextBoxValue");

        return kendo.toString(numericTextBoxValue, "c");
    },
    timePickerValue: new Date(),
    displayTimePickerValue: function() {
        var timePickerValue = this.get("timePickerValue");

        return kendo.toString(timePickerValue, "hh:mm:ss");
    },
    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);