Kendo Disable Widget Examples

Examples of how to show disabled widgets using Kendo MVVM

by Falafel Software

HTML

<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css">
<input type="checkbox" data-bind="checked: isChecked" /> <span>Disable Inputs</span>
<div>
<input data-role="numerictextbox"  data-bind="disabled: isChecked">
</div>
<div>
<textarea data-bind="disabled: isChecked"></textarea>   
</div>
<div>
 <textarea name="email-message" placeholder="Message" data-bind="editorDisabled: isChecked" data-role="editor"  data-tools="['formatting', 'fontName', 'fontSize', 'foreColor', 'backColor', 'bold', 'italic', 'underline', 'strikethrough', 'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', 'insertUnorderedList', 'insertOrderedList', 'indent', 'outdent', 'insertImage', 'createLink', 'unlink', 'viewHtml' ]" ></textarea>
 </div>

CSS

div {margin:10px;}

.k-button-group .k-state-disabled {
display: inline-block;
}

JavaScript

(function () {
    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');
            }
        });
})();

(function () {
    var viewModel = kendo.observable({
         isChecked: false  
    })
    // Kendo MVVM binding    
    kendo.bind('body', viewModel);

})()