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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Display formatted HTML in Grid field

Thread ID:

Created:

Updated:

Platform:

Replies:

144593 May 14,2019 01:14 AM UTC May 17,2019 11:07 AM UTC Vue 7
loading
Tags: Data Grid
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 <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 [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] 
<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> 
 
 
 
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
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, '&lt;\', '<')

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

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

It it works fine. 

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. 


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 , <font color='#2c3e50'>Greenberg AE</font>, Gordon CM, Purcell DW. Journal Name

Is there a way to get around this?


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 :  

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. 
 
Please get back to us if you need further assistance. 

Regards, 
Pavithra S. 


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, <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 [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. 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon