来自网格的列数组的Kendo UI动态详细信息模板

Question

我正在尝试使用Kendo UI Grid创建基于列数组的动态模板。

我能够创建模板，但我无法获得值。

使用此代码：detailCols [i] .field，我只是获取字段的名称。 这是有道理的。 但是如何才能获得该领域的实际价值？

而不是显示“col3”（字段名称），我想显示值“val13”

谢谢

jsFiddle： http ： //jsfiddle.net/9PPbS/4/

   <div id="grid">
</div>

    <script id="detail-template" type="text/x-kendo-template">
    Dynamic Template:
    <ul>
      # for (var i =0; i < detailCols.length; i++) {   #
        <li>#: detailCols[i].title #  | val:  #: detailCols[i].field # (need value not field name)</li>
   # } #
    </ul>
    What I would like to generate:
    <ul>
        <li>Column 3 | val:  #: col3 #</li>
        <li>Column 4 | val:  #: col4 #</li>
    </ul> 
</script>

<script>
var data = [ 
        {col1: "val11", col2: "val12", col3: "val13", col4: "val14"},
        {col1: "val21", col2: "val22", col3: "val23", col4: "val24"}]

var mainCols = [ 
            { field: "col1", title: "Column 1" },
            { field: "col2", title: "Column 2" }]

var detailCols = [ 
            { field: "col3", title: "Column 3" },
            { field: "col4", title: "Column 4" }]

var dataSource = new kendo.data.DataSource({data: data});


$("#grid").kendoGrid({
                    dataSource: dataSource,
                    columns: mainCols,
                    detailTemplate: kendo.template($("#detail-template").html())
                });
</script>

Answer 1

模板中的小变化; 代替：

#: detailCols[i].field #

用这个：

#: data[detailCols[i].field] #

（ 演示 ）