EditorTemplate not working on Grid when using server binding mode.

[John]

We are currently evaluating the various different ways of binding our Backend code to the Kendo UI Grid control.

We have a Ajax enabled Controller and View which successfully uses a EditorTemplate to display a dropdown thus :


    @(Html.Kendo().Grid(Model)
                      .Name("EmployeesGrid")
                      .Columns(columns =>
                                   {
                                       columns.Bound(e => e.PersonFirstName).Width(230).Title("First Name");
                                       columns.Bound(e => e.PersonLastName).Width(230).Title("Last Name");
                                       columns.Bound(e => e.DOB).Width(120).Title("D.O.B");
                                       columns.Bound(e => e.Gender).Width(100).Title("Gender").EditorTemplateName("GenderDropDown");
                                       columns.Bound(e => e.SSN).Width(230).Title("SSN");
                                       columns.Command(command =>
                                                           {
                                                               if (ClaimsAuthorize.CheckAccess(Constants.Actions.Delete, Resources.Employee))
                                                               {
                                                                   command.Destroy();
                                                               }
                                                               if (ClaimsAuthorize.CheckAccess(Constants.Actions.Update, Resources.Employee))
                                                               {
                                                                   command.Edit();
                                                                   command.Custom("ViewDetails").Click("EmployeeDetails");
                                                               }
                                                           }).Width(260).Title("Commands");
                                   })
                      .Editable(editable => editable.Mode(GridEditMode.InLine))
                      .DataSource(datasource => datasource
                                                    .Ajax()
                                                    .ServerOperation(false)
                                                    .Model(model => model.Id(e => e.Id))
                                                    .Events(events => events.Error("error_handler"))
                                                    .Create(create => create.Action("CreateEmployee", "EmployeeAjax"))
                                                    .Read(read => read.Action("ReadEmployees", "EmployeeAjax"))
                                                    .Update(update => update.Action("EditEmployee", "EmployeeAjax"))
                                                    .Destroy(delete => delete.Action("DeleteEmployee", "EmployeeAjax"))
                      )
                      .ToolBar(tb =>
                                   {
                                       if (ClaimsAuthorize.CheckAccess(Constants.Actions.Create, Resources.Employee))
                                       {
                                           tb.Create();
                                       }
                                   })
                           .Pageable()
                      .Sortable()
                      .Scrollable()
                      .Filterable()
                      .Resizable(c => c.Columns(true))
                      .Reorderable(c => c.Columns(true))
                      .ColumnMenu()
                      .Groupable())


And the GendorDropDown partial view looks like:


    @(Html.Kendo().DropDownListFor(m => m)
      .Name("Gender")
      .DataTextField("Text")
      .DataValueField("Value")
      .BindTo(new List<SelectListItem>
                  {
                      new SelectListItem {Text = "Male", Value = "M"},
                      new SelectListItem {Text = "Female", Value = "F"}
                  }))


However if I try to setup a Server Bound View using the same template it fails to render the dropdown at all. The column appears but with a value but this disappears completely when attempting to edit the line.


The code for the failing view is below:


    @(Html.Kendo().Grid(Model)
                      .Name("EmployeesGrid")
                      .Columns(columns =>
                                   {
                                       columns.Bound(e => e.PersonFirstName).Width(230).Title("First Name");
                                       columns.Bound(e => e.PersonLastName).Width(230).Title("Last Name");
                                       columns.Bound(e => e.DOB).Width(120).Title("D.O.B");
                                       columns.Bound(e => e.Gender).Width(100).Title("Gender").EditorTemplateName("GenderDropDown");
                                       //columns.ForeignKey(e => e.Gender, new List<SelectListItem>
                                       //                                      {
                                       //                                          new SelectListItem {Text = "Male", Value = "M"},
                                       //                                          new SelectListItem {Text = "Female", Value = "F"}
                                       //                                      }, "Value", "Text").Width(100).Title("Gender");
                                       columns.Bound(e => e.SSN).Width(230).Title("SSN");
                                       columns.Command(command =>
                                                           {
                                                               if (ClaimsAuthorize.CheckAccess(Constants.Actions.Delete, Resources.Employee))
                                                               {
                                                                   command.Destroy();
                                                               }
                                                               if (ClaimsAuthorize.CheckAccess(Constants.Actions.Update, Resources.Employee))
                                                               {
                                                                   command.Edit();
                                                                   command.Custom("ViewDetails").Action("Details", "Employee").Text("Details");
                                                               }
                                                           }).Width(260).Title("Commands");
                                   })
                      .Editable(editable => editable.Mode(GridEditMode.InCell))
                      .DataSource(datasource => datasource
                      .Server()
                      
                              .Model(model => { model.Id(e => e.Id);
                                                  model.Field(e => e.DOB).DefaultValue(null);
                              })
                      .Create(create => create.Action("Create","Employee"))
                      .Read(read => read.Action("Index","Employee"))
                      .Update(update => update.Action("Edit","Employee"))
                      .Destroy(delete => delete.Action("Delete","Employee"))
                      )
                      .ToolBar(tb =>
                                   {
                                       if (ClaimsAuthorize.CheckAccess(Constants.Actions.Create, Resources.Employee))
                                       {
                                           tb.Create();
                                       }
                                   })
                      .Pageable()
                      .Sortable()
                      .Scrollable()
                      .Filterable()
                      .Resizable(c => c.Columns(true))
                      .Reorderable(c => c.Columns(true))
                      .ColumnMenu()
                      .Groupable())


It unclear to me reading the documentation to see if this is even supported or whether the partial view for the template needs to look different. Any help with this would be greatly appreciated and sorry for the masses of cut and paste code.

[Philip]

Still an issue ten years later.

[Anton Mironov]

Hi Philip,

Please find attached a sample project that I prepared for the case.

It implements a Telerik UI Grid with ServerBinding, InLine Edit Mode, and EditorTemplate for the "ShipName" column.

Feel free to make the needed tests locally with the sample project attached - edit a row in the Grid and observe the ShipName column editor.

If any further information or assistance is needed, do not hesitate to contact me and the team.


Kind Regards,
Anton Mironov

[Christopher]

I'm having the exact same problem.  Have you found a solution?  Is anyone on Telerik willing to help out?

[Atanas Korchev]

Hello,

 We are not sure what the actual problem is. Providing more details (sample code or a runnable application) would allow us to help further.

Regards,
Atanas Korchev
the Telerik team