Angular - kendo-grid-column - Bind html data

Question

Can I directly bind a pre formatted value to a kendo grid column? The data contains html tags and I want the column to render the data with formatting and not treat the tags as text. I could use ng-template to achieve the desire output but for that I will need to parse the whole data, store it into different keys and use them to format in the .html file. Is there anyway I could make kendo render the html inside the column?

Answer 1

You can render the HTML using a wrapper element within the cell template, and bind its innerHtml property to the data item field, containing the HTML you would like to render, e.g.:

<kendo-grid-column field="htmlField">
              <ng-template kendoGridCellTemplate let-dataItem>
                <div [innerHtml]="dataItem.htmlField"></div>
              </ng-template>
            </kendo-grid-column>

Model:

{
        "ProductID": 1,
        "ProductName": "Chai",
        "SupplierID": 1,
        "CategoryID": 1,
        "QuantityPerUnit": "10 boxes x 20 bags",
        "UnitPrice": 18,
        "UnitsInStock": 39,
        "UnitsOnOrder": 0,
        "ReorderLevel": 10,
        "Discontinued": false,
        "Category": {
            "CategoryID": 1,
            "CategoryName": "Beverages",
            "Description": "Soft drinks, coffees, teas, beers, and ales"
        },
        "FirstOrderedOn": new Date(1996, 8, 20),
        "htmlField": "<h1>RENDERED HTML</h1>"
    },

EXAMPLE