All Components
Change Theme

SASS Themes (beta)

    LESS Themes

      SASS Theme Builder

      Create new or customize SASS themes
      Launch Theme Builder

      MVVM / Custom binding

      One Big Orange Spot.

      Slide Binding

      View source code:

      <div id="target" data-bind="slide: slideValue">
          One Big Orange Spot.
      </div>
      <label>
          Toggle: <input type="checkbox" data-bind="checked: slideValue" />
      </label>
              

      Custom binder source code:

      kendo.data.binders.slide = kendo.data.Binder.extend( {
          refresh: function() {
              var value = this.bindings["slide"].get();
      
              if (value) {
                  $(this.element).slideDown();
              } else {
                  $(this.element).slideUp();
              }
          }
      });
              

      View model source code:

      var viewModel = kendo.observable({
          slideValue: true
      });
      
      kendo.bind($("#example"), viewModel);
              

      HTML5/JavaScript source

      API Reference
      • custom.html
      • Widget configuration

      Support & learning resources