ColorPicker does not update the Model

4 posts, 2 answers
  1. Alan
    Alan avatar
    7 posts
    Member since:
    Jan 2013

    Posted 10 Dec 2013 Link to this post

    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
  2. Answer
    Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 12 Dec 2013 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Answer
    Alan
    Alan avatar
    7 posts
    Member since:
    Jan 2013

    Posted 15 Dec 2013 Link to this post

    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
  5. Alan
    Alan avatar
    7 posts
    Member since:
    Jan 2013

    Posted 15 Dec 2013 Link to this post

    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
Back to Top
UI for ASP.NET MVC is VS 2017 Ready