Change grid cell value based on property

[Braydon Davis]

Hi,

I'm trying to display an icon in a grid based on the value of the 'IsProjectAdmin' property for the row data . I currently have this code:

            $employeeList = new ej.grids.Grid({

                allowSorting: true,

                height: 300,

                columns: [

                    { field: 'ListName', headerText: 'Name' },

                    {

                        headerText: 'Is Admin',

                        textAlign:'center',

                        width: 300,

                        formatter: function (column, user) {

                            if (user.IsProjectAdmin) {

                                return "<i class='green check icon'></i>";

                            }

                            return "";

                        }

                    }

                ]

            });

This works except for one thing: It displays the returned HTML from the formatter as text, rather than actually rendering it as HTML. This results in the following:

This is the intended result:

How could I get the formatter to actually render the result as HTML, or is there another way to do this?

[Rajapandiyan Settu]

Hi Braydon, 

 

Greetings from syncfusion support. 

 

Query : How could I get the formatter to actually render the result as HTML, or is there another way to do this? 

 

In EJ2 Grid, if the returned html element as string in the formatter, then grid cell shows the html element as string. This is the default behavior of the grid. 

 

If you need to show the html element instead of string, you have to set the column API disableHtmlEncode as false which converts html string into html element. Please refer the  below code example and sample for more information. 

 

 

{ field: 'CustomerID', formatter: formatter, disableHtmlEncode: false, width: 150 } 

 

 

Sample : https://stackblitz.com/edit/2dvepu-yizaxz?file=index.js 

 

UG : https://ej2.syncfusion.com/documentation/grid/cell/#displaying-the-html-content 

 

Please get back to us if you need further assistance on this. 

 

Regards, 

Rajapandiyan S