2016-01-22 114 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