valueAccessor can not render html

[adrian]

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 ? 

ej.grids.Grid.Inject(ej.grids.Page, ej.grids.Sort, ej.grids.Filter,ej.grids.Resize);

var grid1 = new ej.grids.Grid({

    dataSource: customerData,

    Offline: true, 

    columns: [

                { field: 'cid', headerText: '會員編號', textAlign: 'center', width: 200, type: 'string' },

                { field: 'name', width: 80, headerText: '姓名', type: 'string' },

               

                { field: 'gender', headerText: '性別', textAlign: 'left', width: 100, format: 'string' },

                { field: 'email', headerText: '電子郵件', textAlign: 'left', width: 120, format: 'string' },

                { field: 'age', headerText: '聯絡地址', textAlign: 'left', width: 100, format: 'string' },

                { field: 'tags', headerText: '標籤', textAlign: 'left', width: 160, format: 'string',valueAccessor: tagsFormatter},

                { field: 'guid', headerText: '跨域識別碼', textAlign: 'left', width: 120, format: 'string'},

                

    ],

    rowHeight: 20,

    //enableVirtualization: true,

    //enableColumnVirtualization: true,

    height: 750,

    allowPaging: true,

    pageSettings: { pageSize: 8 },

    allowSorting: true,

    allowTextWrap:true,

    textWrapSettings:{wrapMode:'Content'},

    //queryCellInfo: customiseCell

});

function tagsFormatter(field, data, column){

    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>';

        

        rtn_Str=tmp_Str2+rtn_Str;

    }

    

    return rtn_Str;

}

Attachment: Desktop_ea46a4df.zip

[Thiyagu Subramani]

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. 

Link :  https://ej2.syncfusion.com/documentation/release-notes/17.3.26/#grid 

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 }, 

. . . . . 

        ] 

    }); 

    grid.appendTo('#Grid'); 

function valueAccess(field, data, column) { 

    return '<span>CustomerName</span>' 

} 

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

Help documentation link : https://ej2.syncfusion.com/angular/documentation/api/grid/column/?_ga=2.169710308.41787345.1579221629-93686665.1576498953#disablehtmlencode 

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

Regards, 

  

Thiyagu S. 

[adrian]

Thanks ,you help me a lot .

[Balaji Sekar]

Hi Adrian, 

  

We glad that your issue has been fixed.  

  

Please get back to us if you require further other assistance from us. 

  

Regards, 

Balaji Sekar. 

[Vipul Patodi]

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

[Vinitha Balasubramanian]

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.

[index.js]

function valueAccess(field, data, column) {

  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.

Regards,

Vinitha Balasubramanian