<br> tags when doing grid.copy() causing line breaks in Excel

[Adam Toone]

Hi,

We have <br> tags in some columns in our grid data and when we do a grid.copy(true) ie. with headers and then paste into Excel the data is wrapped on to the next line at the point the <br> tags occur.

This also occurs when pasting in to notepad - the <br> tags are translated into line breaks.

Is there a way of stopping these line breaks occuring? Maybe stripping them out of the data as it is copied?

Unfortunaetly I cannot provide a sample as the implementation is very complicated!

I look forward to your thoughts.

Adam

[Rajapandiyan Settu]

Hi Adam, 

 

Thanks for contacting Syncfusion support. 

 

Query: We have <br> tags in some columns in our grid data and when we do a grid.copy(true) ie. with headers and then paste into Excel the data is wrapped on to the next line at the point the <br> tags occur. 

 

We are tried to reproduce the reported behavior, but it was unsuccessful at our end. The Grid copies the </br> tag as string value and pasted like below screenshot. 

 

Screenshot: 

 

We have prepared a sample for your reference. You can get it from the below link, 

 

Sample: https://stackblitz.com/edit/akwz5z-kqpfao?file=index.js 

 

We need more information to reproduce the reported behavior at our end. So, please share the below details which will be helpful for us. 

 

1. Share the complete Grid code you have used?
2. Share the Grid packages version.
3. How could you shown the </br> tags in Grid? Share the code details and example dataSource.
4. Share the video demo and screenshot of the issue.
5. If possible try to make the issue in the given sample.

 

Regards, 

Rajapandiyan S 

[Adam Toone]

Hi,

Thanks for the reply. I have recreated it using your example as we are using a template to display the content of one column on multiple lines.

So in your example I added to the html 

  <script id="template_ShipName" type="text/x-template">

    <div>${ShipName}</div>

    </script>

and then in the js changed the ShipName field to:

    { field: "ShipName", width: 120, template: '#template_ShipName' },

Then when you select and copy with header it pastes as:

Order ID Customer Name ShipName Ship City

10248 VINET Vins et alcools

Chevalier Reims

Hopefully that will help us find a solution.

I look forward to your response.

adam

[Rajapandiyan Settu]

Hi Adam, 

 

Thanks for your update. 

 

We can reproduce the reported behavior at our end. By default the Grid copy the innerText of the cell and this is the behavior of Grid. 

 

However, you can customize the copied data by invoking beforeCopy event of Grid. We suggest you to use the following code example in the beforeCopy event to achieve your requirement. 

 

beforeCopy: https://ej2.syncfusion.com/javascript/documentation/api/grid/#beforecopy 

getVisibleColumns(): https://ej2.syncfusion.com/javascript/documentation/api/grid/#getvisiblecolumns 

 

[index.js] 

 

var grid = new ej.grids.Grid({ 

  ---- 

  beforeCopy: beforeCopy 

}); 

grid.appendTo("#Grid"); 

 

 

function beforeCopy(args) { 

// customize the copied data 

  var colLength = grid.getVisibleColumns().length; 

  var customizedData = ""; 

  var x = args.data.split("\t"); 

  for (var i = 0; i < x.length; i++) { 

    if (i > 0 && i % (colLength - 1) == 0) { 

      customizedData += "\t" + x[i]; 

    } else { 

      var y = x[i].split("\n"); 

      var dats = ""; 

      if (y.length > 1) { 

        for (var j = 0; j < y.length; j++) { 

          if (j == 0) { 

            dats += y[j]; 

          } else { 

            dats = dats + "<br>" + y[j]; 

          } 

        } 

      } else { 

        dats = y[0]; 

      } 

      if (i == 0) { 

        customizedData = customizedData + dats; 

      } else { 

        customizedData = customizedData + "\t" + dats; 

      } 

    } 

  } 

  args.data = customizedData; 

} 

 

 

Sample: https://stackblitz.com/edit/akwz5z-xmz5fu?file=index.js 

 

Please get back to us if you need further assistance with this. 

 

Regards, 

Rajapandiyan S