Kendo UI Dynamic Detail Template from Column Array for Grid

Question

I am trying to create a dynamic template based on an array of columns with a Kendo user interface network.

I managed to create a template, but I can not get the values.

With this code: detailCols [i] .field, I just get the name of the fields. It makes sense. But how can I get the actual value of a field?

Instead of showing "col3" (field name), I want to show the value of "val13"

thanks

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

A slight change in the template; instead:

#: detailCols[i].field #

use this:

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

()