how to create function for cancel button on kendo color picker

Question

i am trying kendo kendoColorPicker.
with change Events.
when change color and click on apply button its work.(change the font color).
but i want to set if click on cancel button then set default font color.
any idea how its done.
this is simple try.

<div id="example" class="k-content">
            <label for="hsv-picker">Font:</label>
                <input type="color" id="picker" value="#000000" data-role="colorpicker">
     <script>
        kendo.init($("#example"));
        $("#picker").each(function(){
            var colorPicker = $(this).data("kendoColorPicker");

            colorPicker.bind({
                change: function(e) {
                $("#example").css("color",e.value);
                    console.log("Change in picker #" + this.element.attr("id") + " :: " + e.value);
                }
            });
        });
    </script>
</div>

thanks in advance.

Answer 1

By default, the cancel button will revert the color to the previous value so I am not sure that it is necessary for you to control cancel button clicks. You could just set the initial value of the picker to your desired default value.

However, you'll want to use the close event. Here is an example.

$('#hsv-picker').kendoColorPicker({
    select: function (e) {
        log("Select in picker #" + this.element.attr("id") + " :: " + e.value);
    },
    change: function (e) {
        log("Change in picker #" + this.element.attr("id") + " :: " + e.value);
    },
    open: function () {
        log("Open in picker #" + this.element.attr("id"));
    },
    close: function (e) {
        log("Close in picker #" + this.element.attr("id"));
    }
});

Close fires any time the control was closed, regardless of whether change occurred or not. To capture only cancel clicks you'd have to either setup a delegate click event or use some flags between the open, change, and close events. Here's an example of handling the delegate click event.

$('body').on('click', '.k-controls button.cancel', function(){
    alert('Cancel clicked');
});

Here's a fiddle.