All Components
Theme

Themes

    MVVM / Basic usage

    Thank you for your registration,

    • I have read the licence agreement

    Current view model state:

        {
            firstName: ,
            lastName: ,
            gender: ,
            agreed: 
        }
                

    View source code:

        <div>
            Thank you for your registration, <span data-bind="text: firstName"></span> <span data-bind="text: lastName"></span>
            <br /><br />
            <button data-bind="click: startOver">Start Over</button>
        </div>
        <div class="demo-section k-content">
            <form>
                <label>First Name: <input data-bind="value: firstName" /></label>
                <label>Last Name: <input data-bind="value: lastName" /></label>
                <label>Gender:
                    <select data-bind="source: genders, value: gender"></select>
                </label>
                <label><input type="checkbox" data-bind="checked: agreed" /> I have read the licence agreement</label>
                <button data-bind="enabled: agreed, click: register">Register</button>
                <div data-bind="visible: confirmed">
            
                </div>
            </form>
        </div>
            

    View model source code:

        var viewModel = kendo.observable({
            firstName: "John",
            lastName: "Doe",
            genders: ["Male", "Female"],
            gender: "Male",
            agreed: false,
            confirmed: false,
            register: function(e) {
                e.preventDefault();
    
                this.set("confirmed", true);
            },
            startOver: function() {
                this.set("confirmed", false);
                this.set("agreed", false);
                this.set("gender", "Male");
                this.set("firstName", "John");
                this.set("lastName", "Doe");
            }
        });
    
        kendo.bind($("form"), viewModel);
            

    HTML5/JavaScript source

    API Reference
    • index.html
    • Widget configuration

    Support & learning resources