Kendo UI grids with dropdown editor templates edit issue

Question

I have a grid with two drop-down list columns which are mapped with Editor Templates in a razor page. All single edit and update is working fine without any issues. But when I click first row to edit and trying to edit second row without update or cancel the first row it automatically close the edit mode of first row and second one made editable. It is fine but when I click back the first row without update or cancel the second row then the values from second row get updated in the first row as well.

How do I stop this issue. By the way it is found by tester not me.. :(

all problems are coming when we try to edit multiple rows without update or cancel the active editable row.

Please help me because I have spent lot of time on it. I am attaching the sample code here..the field name and template names are modified to give simple example.

Grid

@(Html.Kendo().Grid(Model.Employees)
              .Name("GridEmployees")
              .Columns(columns =>
              {
                  columns.Bound(i => i.Frequency).Title("Frequency").EditorTemplateName("Frequency").ClientTemplate("#:Frequency#").HtmlAttributes(new { @style = "text-align:Left; " }).Width(75);
                  columns.Bound(i => i.Quarter).Title("Quarter").EditorTemplateName("Quarter").ClientTemplate("#= kendo.toString(Quarter,\"MMM yyyy\") #").HtmlAttributes(new { @style = "text-align:left; " }).Width(75);
                  columns.Bound(i => i.EmpId).Hidden();
                  columns.Command(command => command.Edit()).Width(175);
              })
              .ToolBar(toolbar => toolbar.Create())
              .Editable((editable => editable.Mode(GridEditMode.InLine)))
              .Selectable(selectable => selectable
                  .Mode(GridSelectionMode.Multiple))
              .Sortable(sortable => sortable
                  .AllowUnsort(true)
                  .SortMode(GridSortMode.MultipleColumn))
              .DataSource(dataSource => dataSource
                  .Ajax()
                  .Batch(true)
                  .ServerOperation(false)
                  .Model(model =>
                  {
                      model.Id(s => s.EmpId);
                      model.Field(s => s.Frequency);
                      model.Field(s => s.Quarter);
                  })
                  .Create(update => update.Action("CreateEmployee", "Employee"))
                  .Read(read => read.Action("ReadEmployee", "Employee"))
                  .Update(update => update.Action("UpdateEmployee", "Employee"))
              )
              )

Editor Templates

Quarter.cshtml

@using System.Collections

@(Html.Kendo().DropDownListFor(i => i)
                .Name("Quarter")
                .DataValueField("Id")
                .DataTextField("Name")
                .BindTo((IEnumerable)ViewBag.Quarters)
                .OptionLabel("Select Quarter")
)

Frequency.cshtml

@using System.Collections

@(Html.Kendo().DropDownListFor(i => i)
                .Name("Frequency")
                .DataValueField("Id")
                .DataTextField("Name")
                .BindTo((IEnumerable)ViewBag.Frequencies)
                .OptionLabel("Select Frequency")
)

Thanks in advance,

Answer 1

Late is better than never...The problem is, that you generate multiple dropdown lists with the same id. Just assign a dynamic ID to the dropdown in the EditorTemplate and you should be fine.

@(Html.Kendo().DropDownListFor(i => i)
            .Name("Frequency")
            .HtmlAttributes(new { @id = "Frequency_#=UniqueId#" }) //eg. row id
            .DataValueField("Id")
            .DataTextField("Name")
            .BindTo((IEnumerable)ViewBag.Frequencies)
            .OptionLabel("Select Frequency")
 )