Change Theme
SASS Themes (beta)
LESS Themes
MVVM / Basic usage
Thank you for your registration,
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
- index.html
- Widget configuration