Telerik Tabstrip 未在 Telerik Grid 内显示

Question

我有一个 Telerik MVC 网格，带有一个单个详细视图。

详细视图内部是一个telerik tabstrip。当我选择要显示的网格行时，详细信息将完全为空。

我已将 tabstrip 代码复制到网格之外，将网格名称更改为静态名称并呈现网格而不是将其输出为 htmlstring，并且它显示完美。

我已尝试注册所有必需的 javascript 文件，没有任何变化。

在这一点上我很困惑。我已经清除了整个 tabstrip，所以它只包含文本，但没有任何变化。

这是我的代码：

<%: 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);

    })%>

这是独立的标签条：

<%
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();
 %>

任何建议/解决方案/演示都会有所帮助。

提前致谢！

更新

我发现标签条在网格的初始加载时没有显示；点击网格的刷新按钮或分页标签条显示并正常运行后。

似乎在加载网格之后但在任何数据绑定完成之前引发了一个无效的属性值错误，但我似乎仍然无法查明确切的问题。同样，点击网格的刷新按钮或分页将成功地对所有行进行数据绑定。

Answer 1

当页面首次加载时，网格是通过服务器端绑定加载的。标签条在客户端模板中定义，在服务器绑定期间不使用。当您刷新网格时，它会通过 ajax 绑定加载并使用客户端模板。

您需要通过 ajax 绑定初始加载网格，因此您需要使用不同的构造函数。

改变这个：

Html.Telerik().Grid(Model.AccessRequests)

到这里：

Html.Telerik().Grid<AccessRequests>()   //Put in the appropriate type for AccessRequests