This is a migrated thread and some comments may be shown as answers.

ColorPicker does not update the Model

3 Answers 105 Views
ColorPicker
This is a migrated thread and some comments may be shown as answers.
Alan
Top achievements
Rank 2
Alan asked on 10 Dec 2013, 05:30 PM
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

3 Answers, 1 is accepted

Sort by
0
Accepted
Petur Subev
Telerik team
answered on 12 Dec 2013, 11:27 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Accepted
Alan
Top achievements
Rank 2
answered on 15 Dec 2013, 01:13 PM
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
0
Alan
Top achievements
Rank 2
answered on 15 Dec 2013, 01:26 PM
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
Tags
ColorPicker
Asked by
Alan
Top achievements
Rank 2
Answers by
Petur Subev
Telerik team
Alan
Top achievements
Rank 2
Share this question
or