All Components

Disabled ColorPicker

By default, the ColorPicker is enabled.

To disable the component, set its enable setting.

<div id="vueapp" class="vue-app">
    <button v-on:click="toggleColorPicker" v-text="buttonText" class="k-button"></button>
    <br/><br/>
    <kendo-colorpicker ref="colorPicker" :disabled="true"></kendo-colorpicker>
</div>
Vue.use(InputsInstaller);

new Vue({
    el: "#vueapp",
    data () {
        return {
            disabledState: true
        }
    },
    computed: {
        buttonText () {
            return this.disabledState ? 'Enable' : 'Disable';
        }
    },
    methods: {
        toggleColorPicker () {
            var colorPicker = this.$refs.colorPicker.kendoWidget();
            this.disabledState = !this.disabledState
            colorPicker.enable(!this.disabledState);
        }
    }
})
In this article