Telerik Tabstrip不显示在Telerik Grid内部

时间:2014-01-23 23:50:23

标签: asp.net-mvc datagrid telerik

我有 Telerik MVC网格,其中包含单一详情视图

详细信息视图内部是 telerik tabstrip 。当我选择要显示的网格行时,细节将完全打开。

我已将 tabstrip 代码复制到网格外部,将网格名称更改为静态名称并渲染网格,而不是将其输出为 htmlstring ,并且它显示得很完美。

我已经尝试注册所有必需的javascript文件,没有变化。

我在这一点上很难过。我已经清除了整个标签,因此它只包含文字,但没有任何更改。

这是我的代码:

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

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

提前致谢!

更新

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

看起来在加载网格之后但在任何数据绑定完成之前抛出了无效的属性值错误,但我仍然无法确定准确的问题。再次,点击网格的刷新按钮或分页将成功数据绑定所有行。

1 个答案:

答案 0 :(得分:2)

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

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

改变这个:

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

到此:

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