New to Kendo UI for jQuery? Download free 30-day trial

Custom binding

Loading Demo...

EXAMPLE
VIEW SOURCE
Edit in Kendo UI Dojo
Change Theme
Default
SASS

LESS
- Default
- Bootstrap
- Material
- Launch Theme Builder
- Black
- Blue Opal
- Bootstrap v3
- Default
- Fiori
- Flat
- High Contrast
- Material
- Material Black
- Metro
- Metro Black
- Moonlight
- Nova
- Office 365
- Silver
- Uniform

custom.html

One Big Orange Spot.

Slide Binding

Toggle:

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

Support & Learning Resources

Was this demo helpful?

YES NO

Tell us how we can improve this demo

Submit Skip