Search results

ColorPicker in DropDownButton in ASP.NET MVC ColorPicker control

22 Oct 2021 / 1 minute to read

This section explains about how to render the ColorPicker in DropDownButton. The target property of the DropDownButton helps to achieve this scenario. To know about the usage of target property refer to Popup templating section.

In the below sample, the color picker is rendered as inline type by setting inline property as true and the rendered color picker wrapper is passed as a target to the DropDownButton to achieve the above scenario.

Copied to clipboard
<div class='wrap'>
    <h4>Choose color</h4>

    // Triggers while changing the colors.
    function onChange(args) {
        document.getElementById('ddb').children[0].style.backgroundColor = args.currentValue.rgba;
    // Triggers after the ddb popup open.
    function onDdbOpen(args) {
        args.element.parentElement.querySelector('.e-cancel').addEventListener('click', closePopup);
    // Triggers before closing the ddb popup.
    function onDdbBeforeClose(args) {
        args.element.parentElement.querySelector('.e-cancel').removeEventListener('click', closePopup);
    // Function to close the ddb popup.
    function closePopup() {
        ej.base.getInstance(document.getElementById('ddb'), ejs.splitbuttons.DropDownButton).toggle();

    .wrap {
        margin: 0 auto;
        width: 300px;
        text-align: center;
    /* DropDownButton preview customization */
    #ddb .e-btn-icon.e-dropdownbtn-preview {
        background-color: #008000;
        height: 18px;
        width: 18px;
        margin-top: 0; 
    #ddb {
        padding: 4px;
    h4 {
        font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
        font-size: 14px;
Copied to clipboard
public ActionResult Dropdownbtn()
        return View();