All Components
Theme

Themes

    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