<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>

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);