All Components
Change Theme

SASS Themes (beta)

    LESS 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