Multiple Kendo UI Grid with dropdown editor templates edit issues in ASP.NET MVC razor page - kendo-grid

Question

I have two Kendo UI grids with drop down editor template columns in an ASP.NET MVC razor page.Both grids are having one row always and working fine with edit and update.
But when the user clicks one first grid edit and trying to click the second grid edit then the editor templates are not working for the second grid. it is showing the grid values within a textbox. Both grids are sharing same editor templates for the columns. No errors in the browser console.
I tried moving these grids in partial views and try to create different editor templates for each grid but always the result is the same.
The funny thing is that if you edit in the second grid first and then click the first grid edit it doesn't create any problem and shows all the dropdown values with editor templates. (first and second grid means from top to bottom)
both grids have different models but share the same class for the model.
I am giving the sample code here ..please help me ..already spent lot of time on this.
#model ProjectName.ViewModel.EmployeesViewModel
#(Html.Kendo().Grid(Model.CasualEmployees)
.Name("GridCasualEmployees")
.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"))
)
)
#(Html.Kendo().Grid(Model.PermanentEmployees)
.Name("GridPermanentEmployees")
.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"))
)
)
#(Html.Kendo().DropDownListFor(i => i)
.Name("Quarter")
.DataValueField("Id")
.DataTextField("Name")
.BindTo((IEnumerable)ViewBag.Quarters)
.OptionLabel("Select Quarter")
)
#(Html.Kendo().DropDownListFor(i => i)
.Name("Frequency")
.DataValueField("Id")
.DataTextField("Name")
.BindTo((IEnumerable)ViewBag.Frequencies)
.OptionLabel("Select Frequency")
)
public class EmployeesViewModel
{
public List<Employee> CasualEmployees{ get; set; }
public List<Employee> PermanentEmployees{ get; set; }
}
Thanks in advance,