Display formatted HTML in Grid field

[William Morgenweck]

I'm having trouble with displaying formatted HTML in the Data Grid. The SQL query returns some basic HTML such as <b> and <I>.  When it is displayed the <b> shows rather than bolding the word.  I also need to change the color of some of the words. I'm using

                      <e-column

                      field="Authors"

                      headerText="Authors"

                      width="100"

                      :disableHtmlEncode="false"

                    ></e-column>

but the results are 

McFadden DG, Politi K, Bhutkar A, Chen FK, Song X, Pirun M, Santiago PM, Kim-Kiselak C, Platt JT, Lee E, Hodges E, <b>Rosebrock AP</b>, Bronson RT, Socci ND, Hannon GJ, Jacks T, Varmus H

If I manually add some formatting in the    :valueAccessor="publicationChangeAccess" then I can get 

Authors: McFadden DG, Politi K, Bhutkar A, Chen FK, Song X, Pirun M, Santiago PM, Kim-Kiselak C, Platt JT, Lee E, Hodges E, <b>Rosebrock AP</b>, Bronson RT, Socci ND, Hannon GJ, Jacks T, Varmus H but the name still has the <b>

[Pavithra Subramaniyam]

Hi William, 

 

Thanks for contacting Syncfusion support. 

 

We have tried to reproduce the issue with provided information but it is unsuccessful at our end. We have prepared a simple sample for your reference. Please refer to the below code example, documentation link and sample link for more information. 

 

[App.vue] 

<template> 

  <div id="app"> 

    <ejs-grid id="Grid" :dataSource="data" ref="grid"> 

      <e-columns> 

        <e-column field="Authors" headerText="Authors" width="100" :disableHtmlEncode="false"></e-column> 

      </e-columns> 

    </ejs-grid> 

  </div> 

</template> 

 

<script> 

import Vue from "vue"; 

import { GridPlugin } from "@syncfusion/ej2-vue-grids"; 

Vue.use(GridPlugin); 

export default { 

  name: "App", 

  data() { 

    return { 

      data: [ 

        { Authors: "Hodges E, <b>Rosebrock AP</b>" }, 

        { Authors: "<i> Chen FK</i>" }, 

        { Authors: "<font color='red'>McFadden DG</font>" } 

      ] 

    }; 

  } 

}; 

</script> 

 

 

Documentation: https://ej2.syncfusion.com/vue/documentation/api/grid/column/#disablehtmlencode 

 

Sample               : https://codesandbox.io/s/k27lxrzw13  

 

Could you  please provide the below details that will be helpful for us to provide a better solution as early as possible. 

 

1. Share the Syncfusion package version.
2. Share the full Grid code sample.
3. Please reproduce the issue in the above sample if possible.

 

Regards, 

Pavithra S. 

 

[William Morgenweck]

Your sample worded as expected.  Apparently it is a problem with how my database server renders the < and >.  I am using code that combines data in several rows into a comma separated string and it was using it's own encoding

I added 

SET @json = replace(@json, '&lt;\', '<')

SET @json = replace(@json, '&lt;', '<')

SET @json = replace(@json, '&gt;', '>')

It it works fine. 

[Pavithra Subramaniyam]

Hi William,  

Thanks for your update. 

We are happy to hear that the provided sample works. 

Please contact us if you need any further assistance. As always, we will be happy to assist you.  

Regards,  

Pavithra S. 

[William Morgenweck]

It seems that if I add color to the Grid when I export it Excel reads it a non-encoded text.  Such as , <font color='#2c3e50'>Greenberg AE</font>, Gordon CM, Purcell DW. Journal Name

Is there a way to get around this?

[Pavithra Subramaniyam]

Hi William, 

We suggest you to use the “excelQueryCellInfo” event of Grid, to customize the cell during excel exporting. Please refer the documentation link below, 

Documentation :  

https://ej2.syncfusion.com/vue/documentation/grid/excel-exporting/?no-cache=1#conditional-cell-formatting 

https://ej2.syncfusion.com/vue/documentation/api/grid/#excelquerycellinfo 

In the “excelQueryCellInfo” you can customize the exported excel file. The color of the exported data can also be changed by using the below code, 

 

excelQueryCellInfo: function(args) { 

      if (args.value == "<font color='red'>McFadden DG</font>") { 

        args.style = { fontColor: "#ff704d" }; 

      } 

    } 

 

In the above code and below sample, we have bind the “excelQueryCellInfo” of Grid and checked for condition based on value and updated the color for the font. 

Sample : https://codesandbox.io/s/jjtcn 

 

Please get back to us if you need further assistance. 

Regards, 

Pavithra S. 

[William Morgenweck]

I don't think I can do that. That will change the cell color of the font for the entire cell.  I could have different names with different colors in a cell.  The color represents the Department that the person is assigned. so I currently have:

 

 Woods DM, Woan KV, Cheng F, Sodré AL, <font color='#D2B4DE'>Wang D</font>, Wu Y, Wang Z, <font color='#138d75'>Chen J</font>, Powers J, Pinilla-Ibarz J, Yu Y, <font color='#d4ac0d'>Zhang Y</font>, Wu X, <font color='#D2B4DE'>Zheng X</font>, Weber J, Hancock WW, <font color='#D2B4DE'>Seto E</font>, <font color='#b9770e '>Villagra A</font>, Yu XZ, <font color='#b9770e '>Sotomayor EM</font>. Journal Name

Can this be accomplished?

[Pavithra Subramaniyam]

Hi William, 

We are sorry for the inconvenience caused. 

In our Excel export library we don’t have support to apply different formats for a cell in Excel file, to display the cell value letters in a particular cell with different formatting. As, to display the cell value letters in different formatting, we need Rich text support. Currently, EJ2 Excel Export library does not have support for Rich Text and so it’s not feasible with EJ2 Excel Exporting. 

 

Regards, 

Pavithra S.