Custom binding

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