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

2 posts, 0 answers
  1. Janusz
    Janusz avatar
    20 posts
    Member since:
    Jul 2012

    Posted 24 May 2019 Link to this post

    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?

     

  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1220 posts

    Posted 28 May 2019 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top