Runtime dynamic column template from string

[Brian Vallelunga]

I'd like to pass a cell template to a grid column at runtime. The template is just a string that I have elsewhere in memory and can't be declared ahead of time.

I'm looking at the following example at: https://www.telerik.com/kendo-angular-ui/components/grid/columns/templates/#toc-cell-template

<kendo-grid [data]="gridData">
  <kendo-grid-column field="ProductName">
    <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
      Row: {{ rowIndex }} /
      <strong>{{ dataItem.ProductName }}</strong>
      <span class="{{ dataItem.Discontinued ? 'discontinued' : 'active' }}">
        {{ dataItem.Discontinued ? "discontinued" : "active" }}
      </span>
    </ng-template>
  </kendo-grid-column>
</kendo-grid>

What I want is for the entire ng-template to be defined elsewhere, or at least the contents of it. In the past I was able to do something like:

    <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
      {{ myTemplate }}
    </ng-template>

But this hasn't worked for a while. I suspect the custom template needs to be compiled somehow, but am not sure what to do. I looked in to using ngTemplateOutlet, but that also needs the template pre-declared. Any advice is appreciated. Thanks.

[Svet]

Hi Brian,

Thank you for the provided details.

A custom template that is shared for all column cells can be indeed achieved using the *ngTemplateOutlet directive. But the template context should still be defined for each column. Please see the following example demonstrating such an approach:

https://stackblitz.com/edit/angular-dbrg1w?file=app/app.component.ts

I hope this helps. Please let me know in case any further information is required for this case.

Regards,
Svet
Progress Telerik

[Brian Vallelunga]

Thanks, but I don't think this is quite what I'm looking for. I want to send the template itself defined as a string in a JSON response from the server. I don't have a pre-defined set of columns and my data is always dynamic. To achieve this, I send down data about how the columns should be created. I've put an example below of what my API returns:

{
    "data": [ { "firstName": "value", "lastName": "value" } ],
    "columns": [ { "field": "firstName", "title": "First Name", "width": 200, template: "" }
                 { "field": "lastName", "title": "LastName", "width": 250, template: "Some custom template here" } ]
}

For most fields, this is fine. I just loop through my columns and dynamically define columns for the grid. But some of the columns need a custom template sent from the server. This used to work but hasn't in a while. Here's a stripped down version of the grid code I'm using:

<kendo-grid-column *ngFor="let reportColumn of reportResult.columns;"
                    [field]="reportColumn.field"
                    [title]="reportColumn.title">
    <ng-template *ngIf="!reportColumn.template" kendoGridCellTemplate let-dataItem>
        <!-- Default column cell template here -->
    </ng-template>
    <ng-template *ngIf="reportColumn.template" kendoGridCellTemplate let-dataItem>
        <!-- What goes here to use reportColumn.template? -->
    </ng-template>
</kendo-grid-column>

[Svet]

Hi Brian,

Thank you for the provided code snippets.

What could be done to render the template string as HTML in Angular is to use the innerHTML input property. Please see the following example demonstrating such an approach:

https://stackblitz.com/edit/angular-a1tvda?file=app/app.component.ts

Please let me know in case I am missing something.