ColorPickerFor nullable - set default as null, change from color to null again etc

[Janusz]

Hi! I try to use ColorPickerFor in my custom kendo grid editor popup, in this way:

<table style="width: 100%" class="detail-table detail-table-wider-first-column">
            <tr>
                <td>@Html.Label("Kolor:")</td>
                <td>
                        <div>
                            @(Html.Kendo().ColorPickerFor(m => m.Color).HtmlAttributes(new { data_value_primitive = "true" }).Events(e => e.Close("colorpicker_select")).ClearButton(true))
                        </div>
                </td>
            </tr>
        </table>

 

Color's type is string.

I would like to set my color in default as null (or empty string). Furthermore I would like to allow reseting previous value (some color) to null again. I added clearButton, but it was insufficient. 
I tried to add some jquery function on onClose event:

function colorpicker_select(e) {
        $("#Color").val($(".k-color-value").val()).change();
    }

But it wasn't worked. I thought that data_value_primitive is necessary, but it wasn't worked too.

Can I get some help?

 

[Veselin Tsvetanov]

Hello Janusz,

The Grid configuration would not accept a null value to be default for some of its field. Instead, it will default to an empty string. That empty string, however, would conflict with the ColorPicker which does not accept such value. To resolve this issue, I would suggest you to implement the following event handler for the Grid BeforeEdit() event:

.Events(e => e.BeforeEdit("onBeforeEdit"))

and:

function onBeforeEdit(e) {
    var model = e.model;

    if (!model.id) {
        model.set('Color', null);
    }
}

Attached you will find a small sample implementing the above scenario.

Regards,
Veselin Tsvetanov
Progress Telerik