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

Fix ColorPicker Value When Showing It Dynamically

When you hide the Kendo UI ColorPicker and change its value, the pallette renders an incorrect selection as a side-effect from these actions.

The reason for this behavior is that the viewport of the hidden DOM element is zero. As a result, the position of the DOM element that represents the selected value cannot calculate its accurate position.

To handle such situations, call the value method of the Kendo UI FlatColorPicker widget again after showing it. This reassigns the color and positions the selection to the selected color.

    <div id="colorPickerFlat"></div>
    <div id="colorPicker"></div>
    <button id="hide">Hide</button>
    <button id="show">Show</button>

        $("#hide").click(function () {

        $("#show").click(function () {

            var colorPicker = $("#colorPickerFlat").data("kendoFlatColorPicker");
            // Set the value again when showing the DOM element
            // in order for the selected color to be properly positioned.


            change: function (e) {

See Also

In this article
Not finding the help you need? Improve this article