Unable to load hierachical data in Grid. 0 items - kendo-ui

Question

I keep getting "No items to display" in my child grids.
I have 2 view models, Master and Name. A Master can have multiple Names bound.
When I execute the page, it shows me Master information as expected. But its child, Name, has no items displayed although when I breakpoint on the JSON it contains 2 Names that it is returning.
Index.cshtml
#(
Html.Kendo().Grid(Model).Name("MainGrid")
.Columns(col =>
{
col.Bound(m => m.ListingId).Width(100);
col.Bound(m => m.Gender).Width(100);
})
.ClientDetailTemplateId("NameGridTemplate")
.Reorderable(reorder => reorder.Columns(true))
.Sortable()
.Scrollable()
.Filterable()
.Groupable()
.Pageable()
.DataSource(ds => ds
.Ajax()
.Model(m => m.Id(i => i.ListingId))
.Read(read => read.Action("HierarchyBinding_Master", "Main"))
)
.Events(events => events.DataBound("dataBound"))
)
<script id="NameGridTemplate" type="text/kendo-tmpl">
#(Html.Kendo().Grid<NameViewModel>()
.Name("grid_#=ListingId#") // template expression, to be evaluated in the master context
.Columns(columns =>
{
columns.Bound(o => o.PersonName).Width(110);
columns.Bound(o => o.Type).Width(110);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("HierarchyBinding_Name", "Main", new { listingId = "#=ListingId#" }))
)
.Pageable()
.Sortable()
.ToClientTemplate()
)
</script>
<script>
function dataBound() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
</script>
Master ViewModal
public class MasterViewModal
{
public int ListingId { get; set; }
public String Gender { get; set; }
public int? Swn { get; set; }
public DateTime? SwnExpDate { get; set; }
public String Source { get; set; }
public Boolean PrStatus { get; set; }
public String PrCountry { get; set; }
public Boolean PermanentBan { get; set; }
public String BanIssueAgency { get; set; }
}
NameViewModal
public class NameViewModel
{
public int ListingId { get; set; }
public String PersonName { get; set; }
public String Type { get; set; }
public DateTime DateLastUpd { get; private set; }
public String UserLastUpd { get; private set; }
}
Main controller
public class MainController : Controller
{
ListingContext db = new ListingContext();
public ActionResult Index()
{
List<Master> dataList = null;
dataList = db.Masters.ToList();
List<MasterViewModal> mvmList = Logic.GetMasterViewModels(dataList);
return View(mvmList);
}
public ActionResult HierarchyBinding_Master([DataSourceRequest] DataSourceRequest request)
{
List<Master> masterList = null;
masterList = db.Masters.ToList();
return Json(Logic.GetMasterViewModels(masterList));
}
public ActionResult HierarchyBinding_Name(int listingId, [DataSourceRequest] DataSourceRequest request)
{
List<Name> nameList = null;
nameList = db.Names.ToList();
JsonResult j = Json(nameList
.Where(name => name.ListingId == listingId)
.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
return j;
}
}

Answer 1

Please try this
public ActionResult HierarchyBinding_Name(int listingId, [DataSourceRequest] DataSourceRequest request)
{
List<Name> nameList = null;
nameList = db.Names.ToList();
return Json(nameList
.Where(name => name.ListingId == listingId)
.ToDataSourceResult(request));
}
Remove the Jsonrequestbehaviour.Allowget.
I think it ll work. I dont see anything wrong with your razor code