Question

下面我有代码显示Kendo Grid中的所有员工。现在在这个例子中，假设我想在每个员工行下面的详细网格中显示员工的家庭成员的姓名和年龄。我怎样才能做到这一点？我试着在Telerik网站上查看，但我无法理解。请指教。感谢。

模型

 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)

         )
)

Answer 1

您必须使用分层网格。在这个演示中清楚地解释了它。试一试，看看你是否遇到任何问题并告诉我。我已经尝试过我的应用程序并且运行良好。

Grid / Hierarchy

Answer 2

您必须在网格中添加一个子模板，该模板将从父网格中键入一个键。

@(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");

Telerik Kendo MVC 5 Master细节网格

2 个答案: