Copy all Rows in Grid to ClipBoard

Question

We are in process of migrating all Jquery DataTables in our J2EE application to Syncfusion EJ2 Grid. The Datatables has a Copy Functionality that copies all the rows in Datatable to clipboard.   Please check the below link for reference.https://datatables.net/extensions/buttons/examples/html5/copyi18n.htmlCan you please let me know if there is anything similar in Data Grid where clicking on Copy will copy all rows of grid with Headers to Clipboard ?

Praveenkumar Gajendiran · Accepted Answer

Hi Naveen,Greetings from Syncfusion support.We checked your query and provided information. Based on that we achieved your requirement using copy() method and beforeCopy() event of Grid.Please refer the below code example and sample for more information.Code Example: 




let grid: Grid = new Grid({ 
  dataSource: data, 
  beforeCopy: function(args) { 
    var headerName = []; 
    for (let i = 0; i < grid.columns.length; i++) { 
      headerName.push(grid.columns[i].headerText); 
    } 
    (grid.clipboardModule as any).copyContent = ""; 
    (grid.clipboardModule as any).getCopyData(headerName, false, "	", true); 
    (grid.clipboardModule as any).copyContent += "
"; 
 
    for (let j = 0; j < grid.getRows().length; j++) { 
      (grid.clipboardModule as any).copyContent += "
"; 
      var cells = (grid as any).getRows()[j].querySelectorAll(".e-rowcell"); 
      (grid.clipboardModule as any).getCopyData(cells, false, "	", true); 
    } 
    args.data = (grid.clipboardModule as any).copyContent; 
  }, 
 
  columns: [ 
    { 
      field: "OrderID", 
      headerText: "Order ID", 
      width: 120, 
      textAlign: "Right" 
    }, 
    { field: "CustomerName", headerText: "Customer Name", width: 150 }, 
    { 
      field: "OrderDate", 
      headerText: "Order Date", 
      width: 130, 
      format: "yMd", 
      textAlign: "Right" 
    }, 
    { field: "Freight", width: 120, format: "C2", textAlign: "Right" }, 
    { 
      field: "ShippedDate", 
      headerText: "Shipped Date", 
      width: 140, 
      format: "yMd", 
      textAlign: "Right" 
    }, 
    { field: "ShipCountry", headerText: "Ship Country", width: 150 } 
  ] 
}); 
grid.appendTo("#Grid"); 
 
var copyBtn = new Button(); 
copyBtn.appendTo("#copy"); 
 
document.getElementById("copy").addEventListener("click", function() { 
  grid.copy(); 
}); 
Sample: https://stackblitz.com/edit/quoay4-m4drwb?file=index.tsRefer the below document for copy method and beforeCopy event of Grid.Documentation: https://ej2.syncfusion.com/documentation/api/grid/#copy                              https://ej2.syncfusion.com/documentation/api/grid/#beforecopyPlease get back to us if you need further assistance.Regards,Praveenkumar G

NAVEEN RAAJU · Answer

Thanks so much for the quick response. We are running a J2EE web application with jsp pages . Can you please provide the sample in a javascript file  instead of ts file?

Ajith Govarthan · Answer

Hi NAVEEN, 
 
Sorry for the inconveniences. 
 
Based on your query we have prepared our previous update sample with JavaScript framework. For convenience we have attached the sample so please refer the sample for your reference. 
 
Sample Link: https://stackblitz.com/edit/heypvy-z5g2h3?file=index.js 
 
UG-Links: 
https://ej2.syncfusion.com/javascript/documentation/api/grid/#beforecopy 
 
https://ej2.syncfusion.com/javascript/documentation/api/grid/#copy 
 
regards, 
Ajith G.

NAVEEN RAAJU · Answer

Thanks a lot . Just one more thing, when Grid has multiple pages, the copy functionality only copies the rows in the current page to clipboard. Is it possible to copy all the records in all the pages in grid to clipboard when we click on copy button ?

Praveenkumar Gajendiran · Answer

Hi Naveen ,We would like to inform you that we can only copy the row data which are in the current view page(i.e., we can only copy which row cells are in DOM).Please get back to us if you need further assistance.Regards,Praveenkumar G