ColorPicker does not update the Model

[Alan]

I am using a ColorPicker as part of a new user form. The selected colour is intended to be used later in a Scheduler.
I have tried setting the Value to Model.Colour directly and, using a scrip via a hidden textbox but cannot get it to work; the Model.Colour field always returns null.
My views and script are shown below .

I would appreciate any ideas about what I am doing wrong.

The View;  some fields have been stripped out for clarity

@model ServiceUserViewModel<BR>@{<BR>    ViewBag.Title = "New User";<BR>}<BR><BR>@using (Html.BeginForm())<BR>{<BR>    @Html.AntiForgeryToken()<BR>    @Html.ValidationSummary(true)<BR>    <fieldset><BR>        <legend>Registration Form</legend><BR>        <table><BR>            <tr><BR>                <td class="editor-label"><BR>                    @Html.LabelFor(m => m.UserName)<BR>                </td><BR>                <td class="editor-field"><BR>                    @Html.EditorFor(m => m.UserName)<BR>                    @Html.ValidationMessageFor(m => m.UserName)<BR>                </td><BR>            </tr><BR>            <tr><BR>                <td class="editor-label"><BR>                    @Html.LabelFor(m => m.Password)<BR>                </td><BR>                <td class="editor-field"><BR>                    @Html.PasswordFor(m => m.Password)<BR>                    @Html.ValidationMessageFor(m => m.Password)<BR>                </td><BR>            </tr><BR>            <tr><BR>                <td class="editor-label"><BR>                    @Html.LabelFor(m => m.ConfirmPassword)<BR>                </td><BR>                <td class="editor-field k-password"><BR>                    @Html.PasswordFor(m => m.ConfirmPassword)<BR>                    @Html.ValidationMessageFor(m => m.ConfirmPassword)<BR>                </td><BR>            </tr><BR>            <tr><BR>                <td class="editor-label"><BR>                    @Html.LabelFor(m => m.FirstName)<BR>                </td><BR>                <td class="editor-field"><BR>                    @Html.EditorFor(m => m.FirstName)<BR>                    @Html.ValidationMessageFor(m => m.FirstName)<BR>                </td><BR>            </tr><BR>            <tr><BR>                <td class="editor-label"><BR>                    @Html.LabelFor(m => m.LastName)<BR>                </td><BR>                <td class="editor-field"><BR>                    @Html.EditorFor(m => m.LastName)<BR>                    @Html.ValidationMessageFor(m => m.LastName)<BR>                </td><BR>            </tr><BR>            <tr><BR>                <td class="editor-label"><BR>                    @Html.LabelFor(m => m.Colour)<BR>                </td><BR>                <td class="editor-field"><BR>                    @(Html.Kendo().ColorPicker()<BR>                        .Name("colourPicker")<BR>                        .Palette(ColorPickerPalette.WebSafe)<BR>                        //.Value(Model.Colour)<BR>                        .Events(events => events<BR>                                  .Change("pickerSelect")<BR>                          )<BR>                    )<BR><BR>                    @Html.HiddenFor(m => m.Colour)<BR>                    @Html.ValidationMessageFor(m => m.Colour)<BR>                </td><BR>            </tr><BR>        </table><BR>    </fieldset><BR>}<BR><BR>@section Scripts {<BR>    @Scripts.Render("~/bundles/jqueryval")<BR>}

The view is called from this grid

@(Html.Kendo().Grid<ServiceUserViewModel>()<BR>    .Name("ServiceUsersGrid")<BR>    .AutoBind(true)<BR>    .Columns(columns =><BR>    {<BR>        columns.Bound(p => p.ServiceUserId).Hidden();<BR>        columns.Bound(p => p.FirstName).Title("First Name");<BR>        columns.Bound(p => p.LastName).Title("Last Name");<BR>        columns.Command(command => command.Edit().UpdateText("Save")).Hidden();<BR>        columns.Command(command => command.Destroy()).Width(100);<BR>    })<BR>    .ToolBar(toolbar => <BR>        {<BR>                toolbar.Create().Text("Add User");<BR>        })<BR>    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("NewPerson"))<BR>    .Sortable(sortable => sortable<BR>            .AllowUnsort(true)<BR>            .SortMode(GridSortMode.MultipleColumn))<BR>    .Scrollable()<BR>    .Events(e=>e.Edit("RenameNewUserWindow").DataBound("onDataBound").Change("onDataBound"))<BR>    .DataSource(dataSource => dataSource<BR>        .Ajax()<BR>        .ServerOperation(false)<BR>            .Events(events => events.Error("error_handler"))<BR>        .Model(model =><BR>            {<BR>                model.Id(p => p.Id);<BR>                model.Field(f => f.FirstName);<BR>                model.Field(f => f.LastName);<BR>                model.Field(f => f.Password);<BR>                model.Field(f => f.ConfirmPassword);<BR>                model.Field(f => f.Colour);<BR>            })<BR>        .Read(read => read.Action("ServiceUser_Read", "Services"))<BR>        .Create(create => create.Action("ServiceUser_Create", "Services"))<BR>        .Update(update => update.Action("ServiceUser_Create", "Services"))<BR>        .Destroy(destroy => destroy.Action("ServiceUser_Destroy", "Services"))<BR>     )

As stated, I have tried populating the model directly from the .Value field without success so I am now updating the HiddenFor<> text field using the following script:

function pickerSelect(e) {<BR>    $("#Colour").val(e.value);<BR>}

After selection I can see that the text field has been updated with the colour as expected but when clicking submit the returned colour is always null.

Thanks in anticipation of your help

[Petur Subev]

Hello Alan,

Usually when there are problems with the value binding on the server it is most probably because the name attribute of the input is different than the property name. The Name() method of a widget (in your case the ColorPicker) specifies not only the id of the widget but the name attribute of the input as well.

Try to omit specifying Name() (so it is automatically generated to be the same as the property name) or make it to be the same as the name of the property.

Kind Regards,
Petur Subev
Telerik

[Alan]

Petur,

Thank you for your reply.
As suggested I omitted the name but got an error "Value cannot be null. Parameter name: expression" as this is a mandatory field so I changed it to the name of the property, "Colour" and reset the .value property to .Value(Model.Colour)

I am now getting an error in the kendo.all.js function parse(color, nothrow) in
if (!nothrow) {
            throw new Error("Cannot parse color: " + color);
        }
This happens when I click on the New Person button to open my popup form
The color is, at this point, an empty string as no colour has been selected in the colorpicker yet

The solution is as per Petur's suggestion however it is necessary to add a default value to the Model.Colour field of the underlying grid model to avoid the parse error in the ColorPicker.

Many thanks

[Alan]

I have found the solution;
As per Petur's suggestion however it is necessary to add a default value to the Model.Colour field of the underlying grid model to avoid the parse error in the ColorPicker.

Many thanks