Back

#### AutoComplete:

#### Grid

#### ComboBox:

#### DropDownList:

#### NumericTextBox:

#### Splitter

Pane 1
Pane 2

#### TabStrip

- First
- Second

#### First page:

Pick a time:

#### Second page:

Time is:

#### DatePicker:

#### TimePicker:

#### MultiSelect:

#### Slider:

#### TreeView

#### Current view model state

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

#### View source code:

    <table>
        <tr>
            <td>
                <h4>AutoComplete:</h4>
                <input data-role="autocomplete"
                data-text-field="name"
                data-bind="source: colors, value: autoCompleteValue"/>
            </td>
            <td colspan="2" rowspan="3">
                <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>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>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>NumericTextBox:</h4>
                <input data-role="numerictextbox"
                data-format="c"
                data-bind="value: numericTextBoxValue" />
            </td>
            <td rowspan="3">
                <h4>Splitter</h4>
                <div data-role="splitter"
                data-panes="[{size:'30%', collapsible:true},{size:'70%'}]">
                    <div>Pane 1</div>
                    <div>Pane 2</div>
                </div>
            </td>
            <td rowspan="3">
                <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>DatePicker:</h4>
                <input data-role="datepicker" data-bind="value: datePickerValue" />
            </td>
        </tr>
        <tr>
            <td>
                <h4>TimePicker:</h4>
                <input data-role="timepicker" data-bind="value: timePickerValue" />
            </td>
        </tr>
        <tr>
            <td>
                <h4>MultiSelect:</h4>
                <select multiple="multiple"
                data-role="multiselect"
                data-text-field="name"
                data-value-field="value"
                data-bind="source: colors, value: multiSelectValue"></select>
            </td>
            <td>
                <h4>Slider:</h4>
                <input data-role="slider"
                data-bind="value: sliderValue" />
            </td>
            <td>
                <h4>TreeView</h4>
                <div data-role="treeview"
                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);
        },
        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);