Question

首先，我制作了一个剑道网格。网格的每一行都有一个按钮，点击该按钮可打开一个Kendo模板（弹出窗口）。还在这里很好。

是否可以在弹出窗口中添加另一个网格，并为每个网格行添加可编辑的子项（，如网格层次结构）？

这是我的主要网格：

＆＃13;

var grid= $("#Grid").kendoGrid({
        columns: [
          { field: "Name", title: "Name" },
          { field: "Description", title:"Description"},
          { field: "Remarks", title:"Remarks" },
          { command: { name: "details", text: "....", click: showDetails }, title: "Button", attributes: {
              style: "text-align: center;"
          }
          },
          {field:"Status",title:"Status"},
          ],


{......... data source and irrelevant code }

});

＆＃13;

窗口弹出和按钮点击功能代码：

＆＃13;

wnd = $("#details")
                        .kendoWindow({
                            title: "Details",
                            modal: true,
                            visible: false,
                            resizable: false,
                            width: 400,
                            height:600
                        }).data("kendoWindow");

    detailsTemplate = kendo.template($("#template").html());
    });

    function showDetails(e) {
        e.preventDefault();

        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        wnd.content(detailsTemplate(dataItem));
        wnd.center().open();
    }

＆＃13;

模板代码如下：

＆＃13;

<script type="text/x-kendo-template" id="template">

    <div id="details-container">
        
        <dl>
            <dt id="fac">Fan: </dt>
            <dt id="gc"> AC </dt>
            <dt id="pn"> Name: </dt>
            <dt id=pk> #=Name# </dt>
            <dt id="sn">Status: </dt>
            <dt id=sk> #=Status# </dt>

        </dl>
        <br />
        <div class="rowdiv">
   
            <div id="windowgrid"></div>
           <!-- windowgrid is another grid which I need to get from this template, it is not displaying the grid but give a space in between -->         
           
        </div>
   
        <br />
        <button id="bbb3" class="button">Cancel</button>
        <button id="bbb2" class="button">Save</button>
        <button id="bbb1" class="button">Refresh </button>



    </div>
</script>

＆＃13;

包含窗口网格的div标签不显示网格，而是显示剩余的其他内容。你能说出我在代码中犯了什么错误吗？其次，你能帮助我使用代码为每个网格行获取子行。

谢谢

编辑这是整个代码的道场链接：http://dojo.telerik.com/igOroG

Answer 1

您尝试在元素在x-kendo-template中呈现之前初始化元素，因此只需将网格实例化移至open的{{1}}之后。

kendoWindow

“为每个网格行获取子行的代码”

您可以在网格上使用detailInit和function showDetails(e) { e.preventDefault(); var dataItem = this.dataItem($(e.currentTarget).closest("tr")); wnd.content(detailsTemplate(dataItem)); wnd.center().open(); // grid definition here var grid = $("#windowgrid").kendoGrid({ ..... }).data("kendoGrid"); }来实现此目的。使用detailTemplate功能，您将能够使用detailInit访问该特定行的数据。

[e.data]

我已更新您的Dojo example以显示首次初始化网格所需的更改，并扩展代码以提供第一个网格的详细信息行。

修改

为了根据所选值将过滤后的dataSource应用于弹出网格，您可以在应用于Kendo DataSource之前对数据使用filter函数：

// gets elements on detailRow
var detailRow = e.detailRow;
// get the data at the expanded row
var dataList = [e.data];

var filteredDataArr = dataArr.filter(function(el) { return el.NId == e.NId });是数据数组中的元素，el是父网格中的选定e.NId。

更新Dojo example以演示上述操作。

如何在剑道模板上获取剑道网格

1 个答案:

修改