All Components
Theme

Themes

    MVVM / HTML element binding

    • Text

    • Text with update on keyup event

    • Textarea

    • Checkbox

    • Radio

    • Checkbox list

    • Select

    • Multiple select

    Current view model state

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

    View source code:

        <div class="demo-section k-content wide">
            <div>
                <ul class="fieldlist">
                     <li><h4>Text</h4> <input type="text" data-bind="value: textValue" class="k-textbox" /></li>
                     <li><h4>Text with update on keyup event</h4> <input type="text" data-value-update="keyup" data-bind="value: textValue" class="k-textbox" /></li>
                     <li><h4>Textarea</h4> <textarea data-bind="value: textareaValue" class="k-textbox" style="height: 40px; width: 140px;"></textarea></li>
                     <li><h4>Checkbox</h4>
                         <label>
                             <input type="checkbox" data-bind="checked: checkboxValue" />Check
                         </label>
                     </li>
                </ul>
            </div>
            <div>
                <ul class="fieldlist">
                     <li><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>
                     </li>
                     <li><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>
                     </li>
                     <li><h4>Select</h4> <select data-bind="source: fruits, value: selectValue" style="width: 147px;"></select></li>
                     <li><h4>Multiple select</h4> <select multiple data-bind="source: fruits, value: multipleSelectValue" style="width: 147px;"></select></li>
                </ul>
            </div>
            <div>
                <h4>Current view model state</h4>
                <pre>
    {
        textValue: <span data-bind="text: textValue"></span>,
        textareaValue: <span data-bind="text: textareaValue"></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>
            </div>
        </div>
    

    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($("div.demo-section"), viewModel);
    

    HTML5/JavaScript source

    API Reference
    • elements.html
    • Widget configuration

    Support & learning resources