Kendo UI Demos

Sample Applications

Custom Themes

Documentation

MVVM / Basic usage

Current view model state:

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


Thank you for your registration,

View source code:

<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">
        <h4>Confirmation</h4>
        <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>
</form>
        

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);
        
Documentation
  • HTML
  • index.html

Copyright © 2002-2014 Telerik. All rights reserved.

Powered by Telerik Sitefinity CMS