Display formatted HTML in Grid field

William Morgenweck

Asked On May 14, 2019 01:14 AM UTC

I'm having trouble with displaying formatted HTML in the Data Grid. The SQL query returns some basic HTML such as and . When it is displayed the 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, Rosebrock AP, 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, Rosebrock AP, Bronson RT, Socci ND, Hannon GJ, Jacks T, Varmus H but the name still has the

Reply | Reply with quote

Pavithra Subramaniyam [Syncfusion]

Replied On May 14, 2019 07:23 AM UTC

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]

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

import Vue from "vue";

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

Vue.use(GridPlugin);

export default {

name: "App",

data() {

return {

data: [

{ Authors: "Hodges E, Rosebrock AP" },

{ Authors: " Chen FK" },

{ Authors: "McFadden DG" }

]

};

}

};

</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.

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

Regards,

Pavithra S.

Reply | Reply with quote

William Morgenweck

Replied On May 14, 2019 01:28 PM UTC

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, '<\', '<')

SET @json = replace(@json, '<', '<')

SET @json = replace(@json, '>', '>')

It it works fine.

Reply | Reply with quote

Pavithra Subramaniyam [Syncfusion]

Replied On May 15, 2019 05:43 AM UTC

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.

Reply | Reply with quote

William Morgenweck

Replied On May 15, 2019 05:55 PM UTC

It seems that if I add color to the Grid when I export it Excel reads it a non-encoded text. Such as , Greenberg AE, Gordon CM, Purcell DW. Journal Name

Is there a way to get around this?

Reply | Reply with quote

Pavithra Subramaniyam [Syncfusion]

Replied On May 16, 2019 06:28 AM UTC

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 == "McFadden DG") {

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.

Reply | Reply with quote

William Morgenweck

Replied On May 16, 2019 11:07 AM UTC

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, Wang D, Wu Y, Wang Z, Chen J, Powers J, Pinilla-Ibarz J, Yu Y, Zhang Y, Wu X, Zheng X, Weber J, Hancock WW, Seto E, Villagra A, Yu XZ, Sotomayor EM. Journal Name

Can this be accomplished?

Reply | Reply with quote

Pavithra Subramaniyam [Syncfusion]

Replied On May 17, 2019 11:07 AM UTC

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.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
144593	May 14,2019 01:14 AM UTC	May 17,2019 11:07 AM UTC	Vue	7

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US