ColorPicker in Editor Template

[Daniel]

Hello,
 
I have an editable grid which is set up to use PopUp edit mode. One of the columns (color) is a string that holds a hex value for a color. I have created an editor template to handle the edit and create functions.  Here is how I define the grid:

@(Html.Kendo().Grid<DL.Data.PayCodes>()
            .Name("grdPayCodes")
            .Columns(columns =>
            {
                columns.Bound(p => p.pay_code).Width(120).Title("Code");
                columns.Bound(p => p.color).Width(75).Title("Color").ClientTemplate("<div style='width: 100%; text-align: center;'><div style='width: 25px; height: 25px; background: #=color#; -moz-border-radius: 17px; -webkit-border-radius: 17px; border-radius: 17px; margin: auto; #= SetBorder(this, color)#'></div></div>");
                columns.Bound(p => p.description).Title("Description");
                columns.Command(command => { command.Edit(); command.Custom("Delete").Click("DeletePayCodes_Click"); }).Width(180).HtmlAttributes(new { style = "text-align: center;" });
            })
            .ToolBar(toolbar => toolbar.Create())
            .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("PayCodesAddRecordTemplate"))
            .Sortable()
            .Scrollable()
            .HtmlAttributes(new { style = "height:430px; margin-top: 7px;" })
            .DataSource(dataSource => dataSource
                .Ajax()
                .Model(model => model.Id(p => p.pay_code))
                .Create(update => update.Action("CreatePayCodes", "Settings"))
                        .Read(read => read.Action("GetPayCodesDSGrid", "Common"))
                        .Update(update => update.Action("UpdatePayCodes", "Settings"))
                                .Events(events => events.Error("grdPayCodes_ErrorHandler").RequestEnd("grdPayCodes_RequestEnd"))
            )
                    .Events(ev => ev.DataBound("grdPayCodes_DataBound").Edit("grdPayCodes_Edit"))
        )

and here is how I define my editor template

<table style="margin-left: 5%; width: 90%;">
    <tr>
        <td class="label-cell">
            <label for="pay_code">Code</label>
        </td>
        <td>
            <input id="pay_code" name="pit_name" class="data-cell" data-bind="value: pay_code">
        </td>
    </tr>
    <tr>
        <td class="label-cell">
            <label for="color">Color</label>
        </td>
        <td>
            @(Html.Kendo().ColorPicker()
                .Name("color")
                .Value("#ffffff")
            )
        </td>
    </tr>
    <tr>
        <td class="label-cell">
            <label for="description">Description</label>
        </td>
        <td>
            <input id="description" name="description" class="data-cell" data-bind="value: description">
        </td>
    </tr>
</table>

Everything works well for the edit, however when I try to create a new record, I get an error: Cannot Parse Color: at kendo.all.min.js, line 17, column 6374

I understand that when creating a new record the color property of the model is an empty string, but I am initializing the color picker with a default value of #ffffff. Why am I still getting this error?

I am using version 2013.3.1119.340 with VS 2013. I am testing on IE 11, but I tried FF and I am still getting the same error.

Any help would be greatly appreciated.

Thank you.

[Dimiter Madjarov]

Hi Daniel,

I answered this question in the support thread. I hope my answer was helpful for you.

Have a great day!

Regards,
Dimiter Madjarov
Telerik

[Daniel]

Thank you Dimiter. Your suggestion to specify the default value of the "color" column as model.Field(f => f.color).DefaultValue("#ffffff"); corrected the problem.

Thank you for your help.

[Masaab]

IF you are using MVVM pattern. you can set the value to null as default value.

<input data-role="colorpicker"

                  data-bind="visible: isVisible,

                             enabled: isEnabled,

                             value: selectedColor,

                             events: { change: onChange }"

                style="width: 180px">

var viewModel = kendo.observable({
    selectedColor: null,
    isVisible: true,
    isEnabled: true,
    onChange: function() {
        kendoConsole.log("event :: change (" + this.get("selectedColor") + ")");
    }
});
kendo.bind($("#example"), viewModel);

[Daniel]

Thank you Masaab.

I will give your suggestion a try.  I think your approach might be more efficient than the one I am using currently.

Thanks for your help.

[prakash]

Can you help me understand what exactly you mean by model.Field(f => f.color).DefaultValue("#ffffff"); 
Where do you add this line ?

I am having the same issue and I couldn't really get this answer.

[Dimiter Madjarov]

Hello Prakash,

The default value is set in the dataSource model configuration.
E.g.

.DataSource(dataSource => dataSource
  .Ajax()
  .PageSize(20)
  .Model(model =>
      {
          model.Id(p => p.ProductID);
          model.Field(p => p.ProductName).DefaultValue("default");
      })

Regards,
Dimiter Madjarov
Telerik