Back

Element | Current view model state
--- | ---

#### Text

    {
        textValue: ,
        textareaValue: ,
        checkboxValue: ,
        radioValue: ,
        checkBoxListValue: [],
        selectValue: ,
        multipleSelectValue: []
    }

#### Text with update on keyup event

#### Textarea

Check

#### Checkbox

Apple Banana Orange

#### Radio

Apple Banana Orange

#### Checkbox list

#### Select

#### Multiple select

#### View source code:

    <table>
        <tr>
            <th>Element</th>
            <th>Current view model state</th>
        </tr>
        <tr>
            <td>
                <h4>Text</h4>
                <input type="text" data-bind="value: textValue" />
            </td>
            <td rowspan="6">
    <pre>
    {
        textValue: <span data-bind="text: textValue"></span>,
        checkboxValue: <span data-bind="text: checkboxValue"></span>,
        radioValue: <span data-bind="text: radioValue"></span>,
        checkBoxListValue: [<span data-bind="text: displayCheckBoxListValue"></span>],
        selectValue: <span data-bind="text: selectValue"></span>,
        multipleSelectValue: [<span data-bind="text: displayMultipleSelectValue"></span>]
    }
    </pre>
            </td>
        </tr>
        <tr>
            <td>
                <h4>Textarea </h4>
                <textarea data-bind="value: textareaValue"></textarea>
            </td>
        </tr>
        <tr>
            <td>
                <h4>Checkbox</h4>
                <input type="checkbox" data-bind="checked: checkboxValue" />
            </td>
        </tr>
        <tr>
            <td>
                <h4>Radio</h4>
                <label><input type="radio" name="fruit" value="Apple" data-bind="checked: radioValue" />Apple</label>
                <label><input type="radio" name="fruit" value="Banana" data-bind="checked: radioValue" />Banana</label>
                <label><input type="radio" name="fruit" value="Orange" data-bind="checked: radioValue" />Orange</label>
            </td>
        </tr>
        <tr>
            <td>
                <h4>Checkbox list</h4>
                <label><input type="checkbox" value="Apple" data-bind="checked: checkboxListValue" />Apple</label>
                <label><input type="checkbox" value="Banana" data-bind="checked: checkboxListValue" />Banana</label>
                <label><input type="checkbox" value="Orange" data-bind="checked: checkboxListValue" />Orange</label>
            </td>
        </tr>
        <tr>
            <td>
                <h4>Select</h4>
                <select data-bind="source: fruits, value: selectValue"></select>
            </td>
        </tr>
        <tr>
            <td>
                <h4>Multiple select</h4>
                <select multiple data-bind="source: fruits, value: multipleSelectValue"></select>
            </td>
        </tr>
    </table>

#### View model source code:

    var viewModel = kendo.observable({
        textValue: "Text value",
        textareaValue: "Textarea value",
        checkboxValue: false,
        radioValue: "Apple",
        checkboxListValue: ["Apple"],
        multipleSelectValue: ["Apple"],
        fruits:["Apple", "Banana", "Orange"],
        selectValue: "Apple",
        displayCheckBoxListValue: function() {
            return this.get("checkboxListValue").join(", ");
        },
        displayMultipleSelectValue: function() {
            return this.get("multipleSelectValue").join(", ");
        }
    });

    kendo.bind($("table"), viewModel);