Multiline text

[valerio valdes]

Hi,

we are facing an issue using Data Grid component showing multiline cell values.

We have a data source where some values are multilines and when we use Data Grid component, text is flattened (all "/n" characters are ignored).

This is because in html "/n" means nothing. 

There is a way for automatically substitute "/n" with <br/>?

In other words, is expected an OOB functionality for automatically managing the multiline text in display data grid?

[Ajith Govarthan]

Hi Valerio, 

Thanks for contacting Syncfusion support. 

Query: We have a data source where some values are multilines and when we use Data Grid component, text is flattened (all "/n" characters are ignored).This is because in html "/n" means nothing.  

There is a way for automatically substitute "/n" with <br/>?In other words, is expected an OOB functionality for automatically managing the multiline text in display data grid? 

 

Based on your query, we suspect that you want to execute the html tags which are present in the dataSource to apply multiline text view in the Grid component. So, we suggest you use the disableHtmlEncode column property as false to execute the html tags instead of showing them as tag elements in the rows. For your convenience we have attached the documentation so please refer them for your reference. 

Code Example: 

App.vue 

<template> 

    <div id="app"> 

        <ejs-grid :dataSource="data" height='315'> 

          <e-columns> 

            <e-column field='OrderID' headerText='<span> Order ID </span>' :disableHtmlEncode='true' textAlign='Right' width=140></e-column> 

            <e-column field='CustomerID' headerText='<span> Customer ID </span>' :disableHtmlEncode='false' width=120></e-column>  //set false to execute the tags 

            <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=80></e-column> 

            <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' type='date' width=120> </e-column> 

         </e-columns> 

        </ejs-grid> 

    </div> 

</template> 

<script> 

import Vue from "vue"; 

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

import { data } from './datasource.js'; 

Vue.use(GridPlugin); 

export default { 

  data() { 

    return { 

      data: data 

    }; 

  } 

} 

</script> 

UG-Link: https://ej2.syncfusion.com/vue/documentation/grid/cell/#displaying-html-content 

Note: you can also use the textWrap feature to show the complete data in multi lines, when you enable the textWrap then the whole cell content will be show in the column and the data is split based on the column’s width. Please refer the below documentation for your reference. 

UG-Link: https://ej2.syncfusion.com/vue/documentation/grid/cell/#auto-wrap 

Please get back to us if you need further assistance. 

Regards, 

Ajith G. 

[valerio valdes]

No, i was saying that if my data have a multiline text inside (a "\n" character) is ignored. I want that out of the box "\n" is replaced with <br/>.

is possible?

[Balaji Sekar]

Hi Valerio, 

Yes, based on your query we have replaced the \n character to <br/> tag in the multiline text using queryCellInfo event. In this event we have found \n character in the grid cell and replace to <br/> tag.  

Please refer the below code example and sample for more information. 

[App.Vue] 

queryCellInfo: function (args) { 

      if (args.column.field === "Name") { 

        if (args.data["Name"].indexOf("\n")) { 

          args.data["Name"] = args.data["Name"].replace("<br />", "\n"); 

        } 

      } 

    }, 

Sample link: https://codesandbox.io/s/vue-template-forked-vc4f6?file=/src/App.vue 

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

Regards, 

Balaji Sekar 

[valerio valdes]

ok thanks for reply. this works for me

[Rajapandi Ravi]

Hi Valerio, 

Thanks for the update. 

We are happy to hear that your issue has been resolved. 

Please get back to us if you need further assistance. 

Regards, 

Rajapandi R