EditorTemplate not working on Grid when using server binding mode.

3 posts, 0 answers
  1. John
    John avatar
    6 posts
    Member since:
    Sep 2012

    Posted 13 Nov 2012 Link to this post

    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.
  2. Christopher
    Christopher avatar
    1 posts
    Member since:
    Jun 2012

    Posted 19 Dec 2012 Link to this post

    I'm having the exact same problem.  Have you found a solution?  Is anyone on Telerik willing to help out?
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 24 Dec 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top