Excel like copy paste feature for adding data into grid using react and grid library

2
votes

I am creating a kind of excel online application using react in frontend, Java in backend and Postgres database.I am using a library called ag-grid (community edition).

Now one of the feature i need is to copy and paste data in to rows just as we do in excel.

The grid is going to be linked with the Postgres, all the data in the table in the DB is displayed into the grid and any change made into the grid will be reflected to the DB and vice-versa.

The specific need is, i need copy and paste feature, i need to paste the data which is, say copied from other excel in to my application. I should be able to create blank rows and i should be able to paste the data into those rows, if the blanks rows are less then it rows should get automatically added(as in excel) as soon as data (say multiple rows data) is pasted into a one or more rows.And when i choose to save the my application then data of grid should be saved to DB.

  1. Is it possible to create this feature using ag-grid community ?
  2. Is there any other library which is recommended for this purpose ?

If there is any resource or documentation available for this feature then please point me.

2
reactjsgridag-gridreact-data-grid

2 Answers

1
votes

Just in case if anyone stumbles upon this problem, I've found a solution from some another website. It uses processDataFromClipboard event of Ag Grid for a custom solution.

https://plnkr.co/edit/lM3OtCQxpJdapHQt?preview

0
votes

The ag-grid community edition does not support CRUD operations with a server side model - the enterprise edition does:

https://www.ag-grid.com/javascript-grid-server-side-model-crud/

If you insist on using ag-grid community you will need to handle the editing/grid changes yourself, which should not be too hard. A good starting point would be the cell editing page:

https://www.ag-grid.com/javascript-grid-cell-editing/

In particular, you will need to listen to the cellValueChanged or rowValueChenged event:

https://www.ag-grid.com/javascript-grid-cell-editing/#event-cell-value-changed

The event params will provide you with the following properties:

  • newCalue
  • oldValue
  • column
  • colDef

which you can use to generate the update call.