Kendo UI (jquery) template getting value when property name is in a string

Question

I'm working on building a KendoGrid that has a variable number of columns that aren't known until runtime. I have code in place that takes the first row of the data and generates the schema and column information, which gets attached to the Kendo DataSource before the grid is wired up. I'm also using a proxy to inject the column field and display name into the template.

What I'm having a hard time dealing with is not knowing how to reference the row data directly, without knowing the property name. I know in a normal kendo template, you could do #= WorkItemId = to get the value itself, but I'm looking for something along the lines of #= model[item.field] # so I can pull the values dynamically.

Is this possible? I've tried this, but that points back to the values I inject with the $.proxy. I've also tried item, model, etc. but nothing seems to give me what I'm looking for.

// kendo.datasource
for (i = 0; i < columns.length; ++i) {
    // add template to the cell
    columns[i].template = $.proxy(
        kendo.template($('#QueueTemplate_Default').html()),
        {
            columnName: columns[i].title,
            fieldName: columns[i].field
        }
    );
}

// cell template
<script id="QueueTemplate_Default" type="text/x-kendo-template">
    #= {{model/this/something}}[item.columnName] #
</script>

// example schema that comes back from the controller
{
"schema": {
    "data": "Data",
    "total": "Total",
    "model": {
        "id": "WorkItemId",
        "field": {
            "WorkItemId": {
                "editable": false,
                "type": "number"
            },
            "WorkItem": {
                "editable": false,
                "type": "string"
            },
            // edited for brevity
        }
    }
},
"columns": [
    {
        "field": "WorkItemId",
        "title": "Work Item Id",
        "template": null
    },
    {
        "field": "WorkItem",
        "title": "Work Item",
        "template": null
    },
    // edited for brevity
]
}

DontVoteMeDown DontVoteMeDown · Accepted Answer · 2019-12-10T19:19:52

Inside a template, you have data object. In fact you can only access all properties by names like #= PropertyA # because the code is wrapped into a with(data) { ... }(reference) statement. So doing #= PropertyA # is the same as #= data.PropertyA #. Note that with is obsolete.

Example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.mobile.all.min.css">

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
  <script>
    let data = {
        propertyName: 'myProperty',
        myProperty: 'myValue'
      };
    
    console.log(kendo.template("#= data[data.propertyName] #")(data));
  </script>
</head>
<body>
</body>
</html>

Demo

Your case I think can be like:

<script id="QueueTemplate_Default" type="text/x-kendo-template">
    #= data[item.columnName] #
</script>

Kendo UI (jquery) template getting value when property name is in a string

1 Answers