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?
Add a comment
|
1 Answer
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>"
},
