Back

#### Slide Binding

Toggle:
One Big Orange Square.

#### View source code:

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

#### 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);