如何在 kendo 模板上获得 kendo 网格

Question

首先我做了一个Kendo网格。网格的每一行都有一个按钮，单击它会打开一个 Kendo 模板（弹出窗口）。还在就好

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

这是我的主网格：

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 }

});

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

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();
    }

模板代码如下：

<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>

包含window网格的div标签不显示网格，而是显示剩余的其他内容。你能指出我在代码中犯了什么错误吗其次，你能帮我写代码让每个网格行都有一个子行吗？

谢谢

编辑这是整个代码的 dojo link：http://dojo.telerik.com/igOroG

Answer 1

您正试图在元素在 x-kendo-template 中呈现之前对其进行初始化，因此只需将网格实例化移动到 kendoWindow 的 open 之后即可。

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");
}

"Code to get a child row for each grid row"

您可以在网格上使用 detailInit 和 detailTemplate 来实现此目的。使用 detailInit 函数，您将能够使用 [e.data].

访问该特定行的数据

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

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

编辑

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

var filteredDataArr = dataArr.filter(function(el) {
    return el.NId == e.NId      
});

el 是数据数组中的元素，e.NId 是父网格中选定的 NId。

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

如何在 kendo 模板上获得 kendo 网格

How to get a kendo grid on a kendo template

gridview

kendo-ui

kendo-grid

kendo-window

kendo-template

编辑