Kendo Editor with a Disabled Binding in MVVM

Have you ever used the Disabled binding on Kendo widgets with MVVM? It is really helpful to restrict the user’s editing, either based upon their current selections or based upon some login or role options. According to the documentation, we can use the Disabled binding for input, select, and textarea elements. But what about the Kendo Editor? It’s basically a big combination of a bunch of smaller elements, right?

With just a little work, we can set up a custom binding to allow Disabled to work for the Editor as well. But not only do we want it to actually be disabled (as in, the user can’t input any text), but we want it to look disabled too, so the user doesn’t think there is just something wrong with the text portion.

To begin with, just take a look at some regular inputs and the Editor, in enabled mode. I’ve added a checkbox to allow us to bind the Enabled/Disabled state of the editors all together:

And now, the custom binding for the Kendo Editor:

kendo.data.binders.widget.editorDisabled = kendo.data.Binder.extend({
            init: function (element, bindings, options) {
                kendo.data.Binder.fn.init.call(this, element, bindings, options);
            },

            refresh: function () {
                var enable = !this.bindings.editorDisabled.get();

                //selectboxes
                $('[data-role=selectbox]', this.element.toolbar.element)
                    .getKendoSelectBox()
                    .enable(enable);

                //comboboxes
                $('[data-role=combobox]', this.element.toolbar.element).each(function () {
                    $(this).getKendoComboBox().enable(enable);
                });

                //pickers
                $('[data-role=colorpicker]', this.element.toolbar.element).each(function () {
                    $(this).getKendoColorPicker().enable(enable);
                });

                //buttons
                $('.k-tool-icon', this.element.toolbar.element).toggleClass('k-state-disabled', !enable);

                //text area
                $(this.element.body).attr('contenteditable', enable);
                $(this.element.body).css('visibility', enable ? 'visible' : 'hidden');
            }
        });

Now, we can just use data-bind to bind our new editorDisabled to the checkbox property, and the Editor acts and looks disabled:

You see the entire example here:

Hope you find it useful!