Nested EditorTemplates in Telerik MVC Grid Edit Popup Window Not Displaying in Custom Edit Template

Question

I have a grid using AJAX DATABINDING. When I issue a POPUP EDITING command with TEMPLATENAME SPECIFIED my NESTED EDITOR TEMPLATES are not populating.

My Models

namespace eGate.BackOffice.WebClient.Model
{
    public class TemplateTesterModel
    {
        public int TemplateModelId { get; set; }
        public string TemplateModelName { get; set; }
        public List<UserRole> UserRoles { get; set; }
    }
}

{
    public class TemplateTesterModels : List<TemplateTesterModel>
    {
    }
}

My View

@model eGate.BackOffice.WebClient.Model.TemplateTesterModels                  
@Html.EditorFor(m=>m)
 
@( Html.Telerik().Grid<eGate.BackOffice.WebClient.Model.TemplateTesterModel>()
        .Name("Grid")
        .DataKeys(keys => { keys.Add(m=>m.TemplateModelId); })
        .Columns(columns =>
        {
            columns.Bound(o => o.TemplateModelId);
            columns.Bound(o => o.TemplateModelName).Width(200);
            columns.Bound(o => o.UserRoles).ClientTemplate(
                                                 "<# for (var i = 0; i < UserRoles.length; i++) {" +
                                                 "#> <#= UserRoles[i].RoleName #>  <#" +
                                                 "} #>")
                                                 ;
            columns.Command(commands =>
            {
                commands.Edit().ButtonType(GridButtonType.Text);
            }).Width(180).Title("Commands");
        })
        .DataBinding(dataBinding => dataBinding.Ajax()
                        .Select("_SelectAjaxEditing", "TemplateTester")
                        .Insert("_InsertAjaxEditing", "Grid")
                        .Update("_SaveAjaxEditing", "TemplateTester")
                        .Delete("_DeleteAjaxEditing", "TemplateTester")
                     )
 
        .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("TemplateTesterModel"))
)

My Controller

namespace eGate.BackOffice.WebClient.Controllers
{
    public class TemplateTesterController : Controller
    {
        public ActionResult Index()
        {
            return View(GetTemplateTesters());
            //return View(new GridModel(GetTemplateTesters()));
        }
        private TemplateTesterModels GetTemplateTesters() {
 
            TemplateTesterModels returnme = new TemplateTesterModels();
            returnme.Add(new TemplateTesterModel());
            returnme[0].TemplateModelId = 0;
            returnme[0].TemplateModelName = "Template Tester 0";
            returnme[0].UserRoles = new List<UserRole>();
            returnme[0].UserRoles.Add(new UserRole() { RoleName = "Role1", IsChecked = true, Description = "Role for 1" });
            returnme[0].UserRoles.Add(new UserRole() { RoleName = "Role2", IsChecked = false, Description = "Role for 2" });
            returnme[0].UserRoles.Add(new UserRole() { RoleName = "Role3", IsChecked = false, Description = "Role for 3" });
            return returnme;
        }
        [GridAction]
        public ActionResult _SelectAjaxEditing()
        {
            return View(new GridModel(GetTemplateTesters()));
        }
        [AcceptVerbs(HttpVerbs.Post)]
        [GridAction]
        public ActionResult _SaveAjaxEditing(int id)
        {
            return View(new GridModel(GetTemplateTesters()));
        }
        [GridAction]
        public ActionResult _InsertAjaxEditing(){
            return View(new GridModel(GetTemplateTesters()));
        }
        [AcceptVerbs(HttpVerbs.Post)]
        [GridAction]
        public ActionResult _DeleteAjaxEditing(int id)
        {
            return View(new GridModel(GetTemplateTesters()));
        }
 
 
    }
}

My EditorTemplates Shared/EditorTemplates/TemplateTesterModel.cshtml

@model eGate.BackOffice.WebClient.Model.TemplateTesterModel
<div>TemplateTesterModel Editor</div>
<div>@Html.EditorFor(m=>m.TemplateModelId)</div>
<div>@Html.EditorFor(m=>m.TemplateModelName)</div>
<div>Roles</div>
<div>@Html.EditorFor(m=>m.UserRoles)</div>

Shared/EditorTemplates/UserRole.cshtml

@model eGate.BackOffice.WebClient.Model.UserRole
   
<div>
I can has user role?
@Html.CheckBoxFor(m=>m.IsChecked)
</div>

This renders out as such:

As you can see the @Html.EditFor statements that precede the grid filter down through to the userrole EditorTemplate as expected. Additionally we can see that role data is in the grid because it is showing up in the role column.

But click the edit window and this is the result:

As you can see the UserRoles template is not populating with the roles on the UserRoles property of the TemplateTesterModel we're editing.

Am I missing something? Why is the .UserRoles property not populating in the telerik grid pop-up window?

Answer 1

This could be a "by design" decision of ASP.NET MVC. It does not automatically render display and editor templates for nested complex objects. I even have a blog post discussing this.

Long story short you need to create a custom editor template for the parent model.