[Solved] Custom Binding to enable/disable multiple input controls

[Bilal]

Hi,
I've written the following custom binder to enable/disable multiple input controls inside a div at once, instead of having to set the enabled/disabled binder on each and every control:

kendo.data.binders.toggleState = kendo.data.Binder.extend({
    refresh: function() {
        var that = this;
        var value = that.bindings["toggleState"].get(); // get value of binding from viewmodel

        if (value) { // true = enable
            $(that.element).find(':input').removeAttr('disabled');
        } else {
             $(that.element).find(':input').attr('disabled', 'disabled');
        }
    }
});

The above works fine on all "HTML" controls, not Kendo UI widgets (dropdownlist, etc.).

Would it be possible to write a single custom binder that can work fine with both widgets and normal html controls?

Best regards
Bilal Haidar

[Petyo]

Hi,

Yes, such binder may be implemented - most of the Kendo UI widgets expose the enable(state) method. You can check that in the API reference. 

Regards,
Petyo
Telerik

 

 

[Bilal]

The above code i posted, works only for HTML controls and its not working for widgets. You mentioned the "enabled" method on all widgets, how could I check inside my custom binder whether I am dealing with an HTML control or widget and accordingly either use attribute or call the enable function.

Thanks

[Petyo]

Hello,

Please check the widgetInstance method.

Regards,
Petyo
Telerik

 

 

[Bilal]

Thanks a lot. I believe that would help.
So inside the custom binder, I can check if widget, then use "bilt-in" binders, else work with normal HTML controls, correct?

Best regards
Bilal Haidar

[Petyo]

Hi Bilal,

yes, that's correct. 

Regards,
Petyo
Telerik