Copy all Rows in Grid to ClipBoard

[NAVEEN RAAJU]

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

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

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, "\t", true); 

    (grid.clipboardModule as any).copyContent += "\n"; 

 

    for (let j = 0; j < grid.getRows().length; j++) { 

      (grid.clipboardModule as any).copyContent += "\n"; 

      var cells = (grid as any).getRows()[j].querySelectorAll(".e-rowcell"); 

      (grid.clipboardModule as any).getCopyData(cells, false, "\t", 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.ts

Refer 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/#beforecopy

Please get back to us if you need further assistance.

Regards,
Praveenkumar G 

[NAVEEN RAAJU]

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]

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]

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]

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