Kendo Grid - Not showing certain sub grids - razor

Question

I have a kendo grid within an mvc asp.net core application. When I expand the grid into a sub grid, for the most part, it works as expected, showing the sub grid and then making the call to the controller and returning the json data required.
When I expand the root grid to select a row to expand. On specific rows, when the sub grid is created, the root report is almost collapsed, the columns disappear and all the data rows. Subsequently, the call to the controller is still executed as normal and the data is returned. However, the data is not shown on screen as it appears the sub report is not displayed.
Why would the code that works to generate a sub report for one row, not work for another?
This is repeatable on my setup. i.e - I can refresh and restart my browser/application and the same rows cause this issue.
Clicking the second row causes the report to collapse, as if its datasource and columns were removed.
Please note that the root report I speak of, is in actual fact a sub report.
Root Report:
<script id="SalesByLocDept_DetailTemplate" type="text/x-kendo-tmpl">
<h4>Department Sales Summary For Location: #=LocCode# - #=LocName#</h4>
#(Html.Kendo().TabStrip()
.Name("sales_by_loc_tabstrip_#=ID#")
.Items(items =>
{
items.Add()
.Text("Department Summary")
.Selected(true)
.Content(#<text>
#(Html.Kendo().Grid<SalesSummaryByDepartmentViewModel>()
.Name("sales_by_loc_dept_tabstrip_#=ID#")
.Scrollable()
.Reorderable(r => r.Columns(true))
.Resizable(r => r.Columns(true))
.ColumnMenu()
.Columns(columns =>
{
columns.Bound(f => f.DeptCode).Title("Department Code");
columns.Bound(f => f.DeptDesc).Title("Department Name");
columns.Bound(f => f.TakingsToday).Title("Today's Takings");
columns.Bound(f => f.MarginToday).Title("Today's Margin");
columns.Bound(f => f.TakingsMonth).Title("Month's Takings");
columns.Bound(f => f.MarginMonth).Title("Month's Margin");
columns.Bound(f => f.TakingsYear).Title("Year's Takings");
columns.Bound(f => f.MarginYear).Title("Year's Margin");
columns.Bound(f => f.TakingsToDate).Title("Takings To Date");
columns.Bound(f => f.MarginToDate).Title("Margin To Date");
})
.Pageable(pageable => pageable.Refresh(true).PageSizes(new int[] { 100, 150, 200 }))
.Sortable()
.Selectable()
.Navigatable()
.Filterable()
.ClientDetailTemplateId("SalesByLocDeptGroup_DetailTemplate")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => { model.Id(detail => detail.ID); })
.Read(read => read.Action("SalesByLocDepartment_Read", "Reporting", new { LocCode = "#=LocCode#" }))
).ToClientTemplate()
)</text>);
}).ToClientTemplate()
)
</script>
Sub Report:
<script id="SalesByLocDeptGroup_DetailTemplate" type="text/x-kendo-tmpl">
<h4>Group Sales Summary For Location: #=LocCode# - #=LocName#, Department: #=DeptCode# - #=DeptDesc#</h4>
#(Html.Kendo().TabStrip()
.Name("sales_by_loc_dept_tabstrip_#=ID#")
.Items(items =>
{
items.Add()
.Text("Group Summary")
.Selected(true)
.Content(#<text>
#(Html.Kendo().Grid<SalesSummaryByGroupViewModel>()
.Name("sales_by_loc_dept_group_tabstrip_#=ID#")
.Scrollable()
.Reorderable(r => r.Columns(true))
.Resizable(r => r.Columns(true))
.ColumnMenu()
.Columns(columns =>
{
columns.Bound(f => f.GroupCode).Title("Group Code");
columns.Bound(f => f.GroupDesc).Title("Group Name");
columns.Bound(f => f.TakingsToday).Title("Today's Takings");
columns.Bound(f => f.MarginToday).Title("Today's Margin");
columns.Bound(f => f.TakingsMonth).Title("Month's Takings");
columns.Bound(f => f.MarginMonth).Title("Month's Margin");
columns.Bound(f => f.TakingsYear).Title("Year's Takings");
columns.Bound(f => f.MarginYear).Title("Year's Margin");
columns.Bound(f => f.TakingsToDate).Title("Takings To Date");
columns.Bound(f => f.MarginToDate).Title("Margin To Date");
})
.Pageable(pageable => pageable.Refresh(true).PageSizes(new int[] { 100, 150, 200 }))
.Sortable()
.Selectable()
.Navigatable()
.Filterable()
.ClientDetailTemplateId("SalesByLocDeptGroupProduct_DetailTemplate")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => { model.Id(detail => detail.ID); })
.Read(read => read.Action("SalesByLocDeptGroup_Read", "Reporting", new { LocCode = "#=LocCode#", DeptCode = "#=DeptCode#" }))
).ToClientTemplate()
)</text>);
}).ToClientTemplate()
)
</script>

Answer 1

I noticed that the rows which would fail had a pattern.
If I expanded the root report on row 1. The sub report, on expanding it's row 1, would fail.
If I expanded the root report on row 3. The sub report, on expanding it's row 3, would fail.
This made me look into the Name properties of my grids & tabs. I was including an ID on the end as a way of uniquely identifying them. I removed the IDs from the tabs. For the grids I had to further uniquely Identify them, using a combination of model values and Ids.
If anyone understands this behavior further than I do, please comment.