Telerik Tabstrip not displaying inside Telerik Grid - asp.net-mvc

Question

I have a Telerik MVC grid with a single detail view.
Inside the detail view is a telerik tabstrip. When I select the grid row to display, the detail will open up completely empty.
I have copied the tabstrip code outside the grid, changing the name of the grid to a static name and rendering the grid instead of outputting it as an htmlstring, and it displays perfectly.
I've tried registering all required javascript files, no change.
I'm pretty stumped at this point. I've cleared out the entire tabstrip so it contains nothing but text, but no change.
Here's the code which i have:
<%: Html.Telerik().Grid(Model.AccessRequests)
.Name("gridAccessRequests")
.ColumnContextMenu()
.DataKeys(d => { d.Add(a => a.Access_Request_ID).RouteKey("id");})
.DataBinding(dataBinding => dataBinding
.Ajax()
.Select("AjaxBinding", "Home")
.Insert("Insert", "Home")
.Update("Save", "Home")
.Delete("Delete", "Home"))
.ToolBar(commands => commands.Insert())
.Editable(editing => editing
.InsertRowPosition(GridInsertRowPosition.Bottom)
.Mode(GridEditMode.PopUp))
.HtmlAttributes(new { style = "width:100%" })
.Selectable()
.Sortable(sorting => sorting
.OrderBy(sortOrder => sortOrder.Add(o => o.EMPLOYEE_NAME).Ascending()))
.Filterable(filtering => filtering
.Filters(filters => filters
.Add(o => o.RECORD_YEAR).IsEqualTo(Model.CurrentYear)))
.Pageable(paging =>
paging.PageSize(15)
.Style(GridPagerStyles.NextPreviousAndNumeric)
.Position(GridPagerPosition.Both))
.ClientEvents(events =>
{
events.OnEdit("onEdit");
events.OnRowDataBound("requests_onRowDataBound");
})
.DetailView(details => details.ClientTemplate(
Html.Telerik()
.TabStrip()
.Name("TabStrip_<#=id#>")
.SelectedIndex(0)
.Items(items =>
{
items.Add().Text("Assets").Content("Assets");
items.Add().Text("Locations").Content("Locations");
})
.ToHtmlString()
))
.Columns(col =>
{
col.Bound(c => c.Access_Request_ID).Title("ID");
col.Bound(c => c.RECORD_YEAR).Title("Year");
col.Bound(c => c.VERSION_NO).Title("Version");
col.Bound(c => c.EMPLOYEE_NAME).Title("Name");
col.Command(commands =>
{
commands.Edit()
.ButtonType(GridButtonType.Image);
commands.Delete()
.ButtonType(GridButtonType.Image);
commands.Custom("Clone")// the constructor accepts the name of the custom command (used to differentiate between multiple custom commands)
.Text("Clone")
// Specify which fields from the bound data item to include in the route (pass as action method arguments)
.DataRouteValues(route => route.Add(o => o.Access_Request_ID).RouteKey("requestId"))
.Ajax(true)
// Which action method to call
.Action("CloneRequest", "Home");
}).Width(145)
.IncludeInContextMenu(false);
})%>
Here is the standalone tabstrip:
<%
Html.Telerik().TabStrip()
// Make the Name unique
.Name("TabStrip")
.SelectedIndex(0)
.Items(items =>
{
items.Add().Text("Assets").Content("Assets");
items.Add().Text("Locations").Content("Locations");
})
.Render();
%>
Any Suggestion/ Solution/Demo will be helpful.
Thanks in advance!
UPDATE
I have figured out that the tabstrips are not displaying on initial load of the grid; after hitting the grid's refresh button or paging the tabstrips display and function correctly.
It appears that there is an invalid property value error being thrown after the grid is loaded but before any databinding is completed, but I still can't seem to pinpoint the exact problem. Again, hitting the grid's refresh button or paging will successfully databind all the rows.

Answer 1

When the page first loads, the grid is loaded via server side binding. The tab strips are defined in the client template which is not used during server binding. When you refresh the grid, it is loaded via ajax binding and the client template is used.
You need to make the grid load initially via ajax binding so you need to use a different constructor.
Change this:
Html.Telerik().Grid(Model.AccessRequests)
to this:
Html.Telerik().Grid<AccessRequests>() //Put in the appropriate type for AccessRequests