Question

我正在寻找Kendo UI网格中的N级嵌套子行为。到目前为止，我已经实现了3-4级，但这些网格必须在代码中进行硬编码。

请指导某人是否以动态方式完成动态或动态生成网格作为子网格如果可能有任何替代方案来实现同样的目标。

我希望你们能帮帮忙。

Answer 1

我已编辑了此处的详细模板演示：http://demos.telerik.com/kendo-ui/grid/detailtemplate

                    detailRow.find(".orders").kendoGrid({
                        detailTemplate: kendo.template($("#template").html()),
                        detailInit: detailInit,
                        dataSource: {...

细节行在扩展之前不会被初始化（它们在DOM中不存在）。因此，在我们扩展包含它的行之前，调用新网格是不可能的。

幸运的是，剑道提供了一个'detailInit'活动，您可以插入并初始化您的子网格。

更新.net绑定： 首先，在您的页面上，您需要定义一个模板。在模板中使用类而不是ID非常重要。您的模板将被多次使用，并且您希望保持ID的唯一性。

<script type="text/x-kendo-template" id="template">
    <div class="orders"></div>                
</script>

然后，您需要将该模板引用为网格的详细行模板。这里我们只需要引用上面模板的id。（你可以使用.DetailTemplate（）来定义模板，但是后来将它用于以后的子网格会更难，因为你必须将它解析出服务器制造的JS）

@(Html.Kendo().Grid<mySite.ViewModels.GridViewModel>()
    .Name("Grid")
    .ClientDetailTemplateId("template")
    .Columns(columns => .....

现在来了JS。我们需要做两件事。一个是创建可重用的启动函数，另一个是注册此函数以在启动时运行。

在我们的功能中，我们应该定义一个新的网格。此时，这也是在JS中完成的。从理论上讲，你可以定义一个示例网格，并寻找服务器构建的JQuery，它将是它的兄弟，并为你的子网格重用它，但此时你也可以使用JQuery定义你的网格。

function detailInit(e) {
    var detailRow = e.detailRow;                                        

    detailRow.find(".orders").kendoGrid({
        detailTemplate: kendo.template($("#template").html()),
        detailInit: detailInit,
        ....

现在我们需要链接我们的第一个网格以使用我们的启动功能

$(document).ready({
    $("#Grid").data("kendoGrid").bind("detailInit", detailInit);
});

我希望这会有所帮助。

组装N-Nested Kendo UI Grid asp.NET MVC 4

1 个答案: