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

Fix the ColorPicker Value When Showing It Dynamically


Product Progress® Kendo UI® ColorPicker for jQuery


How can I fix the selected value of the Kendo UI ColorPicker when showing it by using jQuery?


When you hide the Kendo UI ColorPicker and change its value, the palette 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