I'm trying to create a dynamic template based on an array of columns with Kendo UI Grid.

I was able to create the template, but I can't get the values.

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

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

Thank you

jsFiddle: /

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

I'm trying to create a dynamic template based on an array of columns with Kendo UI Grid.

I was able to create the template, but I can't get the values.

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

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

Thank you

jsFiddle: http://jsfiddle/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>

• javascript
• jquery
• kendo-ui
• kendo-grid

1 Answer 1

Small change in your template; instead of:

#: detailCols[i].field #

use this:

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

(demo)