Update Kendo grid with editor dropdownlist value

Question

I have a Kendo grid set up like so:

@(Html.Kendo().Grid<ParticipatingDentalEE>()
.Name("DentalEE")
.Columns(columns =>
{
    columns.Bound(p => p.State).Title("State").Width(150).EditorTemplateName("State");
    columns.Bound(p => p.Count).Title("Count").Width(150);
    columns.Command(c => { c.Edit(); c.Destroy(); });
})
.DataSource(dataSource => dataSource
    .Ajax()           
    .Model(m => {
        m.Id(p => p.State);
        m.Field(p => p.State).Editable(true);
        m.Field(p => p.Count).Editable(true).DefaultValue("");
    })
    .Create(update => update.Action("EditingInline_Create", "Dental"))
    .Read(read => read.Action("EditingInline_Read", "Dental"))
    .Update(update => update.Action("EditingInline_Update", "Dental"))
    .Destroy(update => update.Action("EditingInline_Destroy", "Dental"))
)
//.Scrollable()
//.Sortable()
.Editable(e => e.Mode(GridEditMode.InLine))

)

The "State" column consists of a dropdown template that looks like this:

@(Html.Kendo().DropDownList()
    .Name("States") // Name of the widget should be the same as the name of the property
    .DataValueField("CODE") // The value of the dropdown is taken from the EmployeeID property
    .DataTextField("NAME") // The text of the items is taken from the EmployeeName property
    .BindTo((System.Collections.IEnumerable)ViewData["States"]) // A list of all employees which is populated in the controller
)

My dropdown shows up properly when I edit or create an item, but when I save the item the dropdown value does not stay in the grid. Is there something else I need to set up in order to do this?

Readable

Answer 1

as you say in your own comment,

.Name("States") // Name of the widget should be the same as the name of the property

which is to say, it must match the name of the column, and the column name is "State" not "States".

Partridgeberry

Yes, you are correct about that mistake - however I also found that I needed the Text/Value to be the same in order for it to display correctly when saving. – Readable

I have this functionality working, but when I enter editor mode, the dropdownlist defaults to the first item in the ViewBag collection and not the actual value, so an accidental update might happen if the user does not manually change the dropdown to what is what previously? Do you know how I can handle this scenario, or even use DataSource.read on the dropdown instead of ViewBag – Agonist

Answer 2

Obviously this is an old thread, however the fix is to use the DropDownListFor method (as opposed to the DropDownList) and not to specify a name. I suspect Kendo does some internal name matching to apply the edited value back to the model.

@model int // ...or whatever type works for your model

@(Html.Kendo().DropDownListFor(i => i)
    .DataValueField("CODE")
    .DataTextField("NAME")
    .BindTo((System.Collections.IEnumerable)ViewData["States"]))

Unburden

Removing the 'Name' fixed it for me. – Insurable

Answer 3

I'm not sure if this will fix your problem, but the editor templates for my grid didn't work correctly until I had set the UIHint decorator in the model, and the EditorTemplateName in the view.

E.g.

public class ParticipatingDentalEE {
   ...

   [UIHint("State")] // this should be the name of your EditorTemplate
   public State State { get; set; }

}

I speculate that UIHint is used for the grid in 'view' mode, while the EditorTemplateName is used while in 'edit' mode, and both are required to link the two together.

Hibbs