Edit this page

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.

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

    <script>
        $("#hide").click(function () {
            $("#colorPickerFlat").hide();
        });

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

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

        $("#colorPickerFlat").kendoFlatColorPicker();

        $("#colorPicker").kendoColorPalette({
            change: function (e) {
                $("#colorPickerFlat").data("kendoFlatColorPicker").value(e.value);
            }
        });
    </script>

See Also

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy