All Components


    MVVM / Basic usage

    Thank you for your registration,

    • I have read the licence agreement

    Current view model state:

            firstName: ,
            lastName: ,
            gender: ,

    View source code:

            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 class="demo-section k-content">
                <label>First Name: <input data-bind="value: firstName" /></label>
                <label>Last Name: <input data-bind="value: lastName" /></label>
                    <select data-bind="source: genders, value: gender"></select>
                <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">

    View model source code:

        var viewModel = kendo.observable({
            firstName: "John",
            lastName: "Doe",
            genders: ["Male", "Female"],
            gender: "Male",
            agreed: false,
            confirmed: false,
            register: function(e) {
                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