We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

valueAccessor can not render html

Hi :
             In the   previous  version(EJ2.min.js) ,the column property "valueAccessor " can render string to html , but in the newest version, it didn't work, how can i solve this problem ? 

var grid1 = new ej.grids.Grid({
    dataSource: customerData,
    Offline: true
    columns: [
                { field: 'cid'headerText: '會員編號'textAlign: 'center'width: 200type: 'string' },
                { field: 'name'width: 80headerText: '姓名'type: 'string' },
                { field: 'gender'headerText: '性別'textAlign: 'left'width: 100format: 'string' },
                { field: 'email'headerText: '電子郵件'textAlign: 'left'width: 120format: 'string' },
                { field: 'age'headerText: '聯絡地址'textAlign: 'left'width: 100format: 'string' },
                { field: 'tags'headerText: '標籤'textAlign: 'left'width: 160format: 'string',valueAccessor: tagsFormatter},
                { field: 'guid'headerText: '跨域識別碼'textAlign: 'left'width: 120format: 'string'},
    rowHeight: 20,
    //enableVirtualization: true,
    //enableColumnVirtualization: true,
    height: 750,
    allowPaging: true,
    pageSettings: { pageSize: 8 },
    allowSorting: true,
    //queryCellInfo: customiseCell
function tagsFormatter(fielddatacolumn){
    var tmp_Str = data.tags;
    var tmp_Str2='';
    var rtn_Str='';
    var arr = tmp_Str.split(",");  
    for(var i=0;i<arr.length;i++){
        tmp_Str2='<span class="tagStyles tag-info  m-r-5 m-t-5">'+arr[i]+'</span>';
    return rtn_Str;

Attachment: Desktop_ea46a4df.zip

5 Replies

TS Thiyagu Subramani Syncfusion Team January 17, 2020 10:17 AM UTC

Hi Adrian, 
Greetings from Syncfusion forum. 

We have validated your requirement at our end. Previously, Html tags are converted from string to html . But now value will be updated what type of text will be entered in the grid because there is no form of conversion performed in grid.  

Please refer the below release notes for more information. 

If you need html conversion in specific column you can achieve by setting disableHtmlEncode as false in column level. Please refer to the below code and sample link. 

    var grid = new ej.grids.Grid({ 
        columns: [ 
            { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' }, 
            { field: 'CustomerName', headerText: 'Customer Name', width: 150, disableHtmlEncode:false
 valueAccessor: valueAccess }, 
. . . . . 

function valueAccess(field, data, column) { 
    return '<span>CustomerName</span>' 

Please get back to us, if you need any further assistance. 

Thiyagu S. 

AD adrian January 19, 2020 12:27 AM UTC

Thanks ,you help me a lot .

BS Balaji Sekar Syncfusion Team January 20, 2020 07:34 AM UTC

Hi Adrian, 
We glad that your issue has been fixed.  
Please get back to us if you require further other assistance from us. 
Balaji Sekar. 

VP Vipul Patodi July 14, 2022 11:00 AM UTC

Your example is actually showing the 'CustomerName' as string rather its actual value.
So this shared example is not working.

VB Vinitha Balasubramanian Syncfusion Team July 18, 2022 12:16 PM UTC

Hi Customer,

Thanks for your update.

We have analyzed your query, your want to show the actual value of the column while using valueAccessor property. We can achieved your requirement by modifying our provided sample using data and field in valueAccessor function.

Kindly refer the below code and sample for your references.


function valueAccess(fielddatacolumn) {

  var createdData '<span>' + data[field] + data['OrderID'] + '</span>';

  return createdData;


Sample link : https://stackblitz.com/edit/ptyea9-27hv6z?file=index.js

Documentation link : https://ej2.syncfusion.com/documentation/grid/columns/columns/#valueaccessor

Please get back to us, if you need any further assistance.


Vinitha Balasubramanian

Live Chat Icon For mobile
Up arrow icon