displayInline doesn't show apply and cancel buttons

[Phu Trieu]

If i set 

displayInline: true, showApplyCancel: true

The apply and cancel buttons do not display.

[Prem Kumar Madhan Raj]

Hi Trieu, 

Thanks for contacting Synfusion Support. 

In colorpicker normal mode, the color value of the ColorPicker control will not be selected until apply button is being clicked and value changed made before clicking apply button will be deselected on clicking the cancel button ,but, in display inline mode, the value will be selected whenevever a new value is changed in the colorpicker popup hence apply cancel button is not required so, showApplyCancel API will not reflect in displaInline mode of colorpicker. 

Regards, 

Prem Kumar M

[Phu Trieu]

What if I wanted the value to be set when I click apply.  I want the control to always display and only change the value when I hit apply.  Inline is the only way I found to do that but it doesn't allow apply button.

[Prem Kumar Madhan Raj]

Hi Trieu, 

 

Currently, we don’t have any built-in option to display apply and cancel button in Color Picker inline mode to achieve your requirement . However, we can customize our Color Picker component to display the apply and cancel buttons and bind click events for them to achieve your requirement as shown in the below code snippet. 

 

<div style="padding:10px"> 

    <div id="colorpicker"></div> 

</div> 

<script> 

 

    $("#colorpicker").ejColorPicker({ 

        displayInline: true, 

        select: "onSelect", 

        value: "#734d4d" 

    }); 

 

    var colorObj = $("#colorpicker").ejColorPicker("instance"); 

    var selectedValue; 

    $(".e-applyButton").on("click", function () { 

        selectedValue = colorObj.model.value;// updating the colorpicker value in apply button click 

    }); 

    $(".e-cancelButton").on("click", function () { 

        colorObj.option("value", selectedValue);// resetting the value on cancel button click 

    }); 

</script> 

<style> 

    .e-popupWrapper .e-footerContainer .e-footer, .e-popupWrapper .e-footerContainer .e-applyButton, .e-popupWrapper .e-footerContainer .e-cancelButton { 

        display: block !important; /*displaying apply cancel button*/ 

    } 

 

    .e-popupWrapper .e-footerContainer .e-applyButton { 

        left: 110px; /*adjusting alingment of apply cancel button*/ 

    } 

</style> 

 

 

For your convenience, we have also attached the JS playground link for the customized sample. Please check it 

Sample: http://jsplayground.syncfusion.com/3z4y4lno   

 

Please let us know if you need further assistance on this. 

 

Regards, 

 

Prem Kumar M