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

Question

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

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

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

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

谢谢

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

(demo)