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

ColorPicker does not update the Model

3 Answers 318 Views

ColorPicker

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

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

The view is called from this grid

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

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) { $("#Colour").val(e.value); }

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

Accepted

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