DropdownList not triggering change in Grid Editor template?

[Jeff Goldsack]

I am developing an MVC 4 website for a customer and have run into an issue with the dropdownlist. 

I have a Grid, bound to my model, and I can see all the data (correctly) in the grid.

01.@(Html.Kendo().Grid((IEnumerable<MyModel>)ViewBag.Model)
02.                    .Name("Grid")
03.                    .Columns(columns =>
04.                    {
05.                        ..
06.                        removed for brevity
07.                        ..
08.                        columns.Command(command => { command.Edit(); command.Destroy(); });
09.                    })
10.                    .ToolBar(toolbar => toolbar.Create())
11.                    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("EditorTemplate"))
12.                    .Pageable()
13.                    .Sortable()
14.                    .Scrollable()
15.                    .DataSource(dataSource => dataSource
16.                        .Ajax()
17.                        .PageSize(20)
18.                        .Events(events => events.Error("error_handler"))
19.                        .Model(model => model.Id(m => m.recordID))
20.                        .Create(update => update.Action("Create", "Controller"))
21.                        .Update(update => update.Action("Update", "Controller"))
22.                        .Destroy(update => update.Action("Destroy", "Controller"))
23.                    )
24.                )

The above code loads the grid fine, I can trigger all the actions correctly, and they all work great.

My problem comes in when I edit a row, and the field I need to change is a DropDownList. For this particular issue, it is a list of States. We are using popup edit mode, and have a custom editor template.

This is the Editor Template code.

01.@(Html.Kendo().DropDownListFor(m => m.StateId)
02.        .Name("StateId")
03.        .DataTextField("StateName")
04.        .DataValueField("StateId")
05.        .DataSource(source =>
06.        {
07.            source.Read(read =>
08.            {
09.                read.Action("GetStatesList", "Controller");
10.            })
11.            .ServerFiltering(true);
12.        })
13.        .SelectedIndex(0)
14.        .OptionLabel("Select a State")
15.    )

The control successfully loads the states, and binds to the model, and shows the correct state value, if there is one provided. In our database, the StateId field is Nullable, and I think this is where the problems arise. 

For completeness, here is the controller function that populates the state list.

1.public JsonResult GetStatesList()
2.{
3.    var states = client.GetStates();
4.    return Json(states, JsonRequestBehavior.AllowGet);
5.}

the client.GetStates() returns an IEnumerable<State> collection.

NOTE: This exact same code works in a non-grid view in our MVC project.

Now, when the StateId is populated on load, it will display the correct state in the DropDownList. If I change this state and click the Update button on my popup editor, the Update Action is triggered, model.StateId = NewIDSelected and the change gets saved to the database. Now if the StateId is NULL from the database, obviously no state is selected, but now, if I select a state from the DropDownList, and click the Update button on my editor, the Update Action is not triggered, and no change is saved to the database.

To add to that, if I change any other field on the editor (say change or add the street address)  in addition to the State change (from null to a state value), the Update Action is correctly triggered, but the model.StateId = null.

As I stated before, this exact same scenario works perfectly on a view that does not use a grid at all (as a matter of fact the popup editor is an exact duplicate of that view).

Can anyone help me figure out how to fix this? We have got around it by using a plain HTML DropDownList, but it is ugly ugly... but it works.

[Daniel]

Hello,

By default when the value is null the field is considered to be an an object and the value binding will try to update the field with the selected item and not the selected value. In order to update the field you should either use a custom binder as demonstrated in this code-library or bind the dropdownlist to an object as demonstrated in custom editor demo.

Regards,
Daniel
Telerik