Kendo grid Template is not working with html encoded symbol ( ' ), it shows the names with apostrophe like sam's as sam &#39s

Question

I have a angular 2 application. Where I am using kendo grid to to bind the data to display in the table cells. In the template cell all is fine but wherever we have an apostrophe s in the names there it breaks up, it shows like this

The temple for the kendo grid component i am providing below, i am looking for the code to improve the view that shows ' instead of &#39. I am not able to find where I should add the code to existing code to make it work because the dataItem is holding the names and it is coming from template binding. can i add an auxiliary global JavaScript function that can be used to manipulate each data item during display.

two-dimensional-grid.html - 
     <template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex"  >
                    <span *ngIf="column !== 'Percentage'">  
                    <span  style="color:#3b73af;cursor:pointer">    
                      <span [class.twoDimGrid]="column === header">                      
                       <span (click)="rowItemClick(dataItem, column)">                 
                    {{dataItem[column]}}      
                       </span>
                    </span>
                    </span>
                    </span>


two-dimensional-grid.ts
 ngOnInit() {
        this.columns = [];
        this.gridTitle = this.twoDimensionalGridInfo.Name;
        this.baseJql = this.twoDimensionalGridInfo.jql;
        this.type = this.twoDimensionalGridInfo.type;
        this.summary = this.twoDimensionalGridInfo.summary;
        if (this.summary) {
            this.fields = this.summary.split('|');
            this.y = this.fields[0];
            this.x = this.fields[1];
        }
        let dataItem = this.gridData[0];
        if (dataItem) {
            var keys = Object.keys(dataItem);
            this.header = keys[0]
        }
        for (let field in dataItem) {
            this.columns.push(field);
        }


        this.total = this.gridData.reduce((sums, obj) => Object.keys(obj).reduce((s, k) => {
            k === this.header || k === 'Percentage' || (s[k] = (s[k] || 0) + +obj[k]);
            return s;
        }, sums), {});
        this.total[this.header] = "Total";
        this.total["Percentage"] = "";
    }

user8819437 user8819437 · Accepted Answer · 2017-10-24T15:17:54

i foud the answer , in the template binding I used instead of {{dataItem[column] }} . The html code was enecoded in my database, so for decoding again its another method of solving, but i found this way too it worked for me.

Kendo grid Template is not working with html encoded symbol ( ' ), it shows the names with apostrophe like sam's as sam &#39s

1 Answers