2016-01-22 107 views
0

下面我有显示所有Kendo Grid员工的代码。现在在这个例子中,假设我想在每个员工行下方的详细网格中显示员工的家人姓名和年龄。我怎样才能做到这一点?我尝试在Telerik网站上查找,但我无法理解。请指教。谢谢。Telerik Kendo MVC 5主细节网格

型号

public class Emp 
    { 
     public int EmpID{ get; set; } 
     public string FirstName{ get; set; } 
     public string LastName { get; set; } 
    } 

public class EmpFamily 
    { 
     public int EmpID{ get; set; } 
     public string Name{ get; set; } 
     public int Age { get; set; } 
    } 

控制器

public ActionResult Index(string SearchString) 
    { 
     var EmpRows = from S in db.Emp 
         select S; 

     List<EmpRec> EmpList = new List<EmpRec>(); 
     foreach (Disk EmpRow in EmpRows) 
     { 
      EmpRec e = new EmpRec(); 

      e.EmpID = EmpRow.EmpID; 
      e.FirstName = EmpRow.FirstName; 
      e.LastName = EmpRow.LastName ; 
      EmpList.Add(e); 
     } 
     return View(EmpList); 
    } 

查看

@model IEnumerable<TestProj.Models.EmpRec> 
@using (Html.BeginForm()) 
{ 

} 

@(Html.Kendo().Grid(Model) 
     .Name("kGrid") 
     .Pageable() 
     .Columns(columns => 
     { 
      columns.Bound(p => p.EmpID).Filterable(true).Title("ID"); 
      columns.Bound(p => p.FirstName).Title("First Name"); 
      columns.Bound(p => p.LastName).Title("Last Name "); 
     }) 
     .Navigatable() 
     .DataSource(datasource => datasource 
      .Ajax() 
      .PageSize(15) 
      .ServerOperation(false) 

     ) 
) 

回答

0

你有一个孩子模板添加到y我们的网格会从您的父网格中键入一个密钥。

@(Html.Kendo().Grid(Model) 
     .Name("kGrid") 
     .Pageable() 
     .Columns(columns => 
     { 
      columns.Bound(p => p.EmpID).Filterable(true).Title("ID"); 
      columns.Bound(p => p.FirstName).Title("First Name"); 
      columns.Bound(p => p.LastName).Title("Last Name "); 
     }) 
     .Navigatable() 
     .DataSource(datasource => datasource 
      .Ajax() 
      .PageSize(15) 
      .ServerOperation(false) 

     ) 
     .ClientDetailTemplateId("tmpGridDetail") 
) 


<script id="tmpGridDetail" type="text/kendo-tmpl"> 
     <div id="tabStripDetails"> 
      @(Html.Kendo().TabStrip().HtmlAttributes(new { @Class = "tabStrip" }) 
       .Name("tsDetail_#=SomParentGridID#") 
       .Animation(animation => 
       { 
        animation.Enable(true); 
        animation.Open(config =>{config.Fade(FadeDirection.In); 
       }); 
       }) 
       .Items(items => 
       { 
        items.Add().Text("Summary").LoadContentFrom(@Url.Action("SomePartialView1", "SomeController") + "?someID=#=SomeParentGridID#"); 
        items.Add().Text("Detail").LoadContentFrom(@Url.Action("SomePartialView1", "SomeController")+"?someID=#=SomeParentGridID#"); 
       }) 
       .SelectedIndex(0)  
       .ToClientTemplate() 
      ) 
     </div> 
    </script> 

我没有具体的网格示例,但是,您可以用KendoGrid替换下面的模板。这里有几个关键点:#=SomeField#限定符允许您读取父网格数据并将其应用于模板中。另外,如果要成为客户端模板或子网格,则必须在网格的配置中调用.ToClientTemplate()。最后要注意的是你应该确保所有的子项都有唯一的名字。这通常通过在项目名称中使用父唯一键来完成。如果您的EmpID是父网格中所有项的唯一ID,那么您可以命名模板中的所有控件,如.Name("grdChild_#EmpID");

1

您必须使用分层网格。这个演示清楚地解释了这一点。尝试一下,看看你是否面临任何问题,并让我知道。我在我的应用程序中尝试过,它运行良好。

Grid/Hierarchy