If I understand this tutorial correctly, these examples are updating data in a disconnected state. Are there any examples of updating AG Grid data in a POST real-world scenario, IE: where we're updating a datasource via an API endpoint? Thanks.
Transactions are for managing rows, not columns. To manage columns, either set new Column Definitions, or apply Column State. Both of these have examples in the docs (see the Columns section).
My price cells don't fllash when the prices were changed. The use of enableCellChangeFlash in the AgGridReact component has been deprecated and I tried to move it into the column definition as instructed by the hint also didn't flash the cells.
Hi! Thanks for your videos! I'm trying to use the update of the content by the change of state "rowData" but seems to not work for me. I try also to use transaction but no way to update the record My update is one or more fields of one record, my way is replacement of all record whit one updated and aftere that i call setRowData, i try to view in console rowData and the data have been replaced but not in the table .. Otherwise if a set "setRowData ([])" the refresh are triggered and the table cleared! Where is my mistake?
You might have to ask this question on Stackoverflow, tagged with ag-grid and a supporting example in plunker or stackblitz because without seeing the code people won't be able to spot a mistake. It is worth carefully reviewing your code against the mechanisms in this video to check you have included all steps before raising on stackoverflow stackoverflow.com/questions/tagged/ag-grid
@@agGrid Thank you for the reply. I can see that data has changed, but just not reflecting on UI. I have used immutableData={true}. May I know if there is a way to update a row data without refreshing or flickering the row, when immutableData is true and cellRenderers are used?
Hi, I'm calling getSelectedNode, getting the node's data, and calling applyTransaction({ remove: selectedData}). The row is removed as expected, however, it is NOT removed from the rowData state. Therefore when I add a new row, the aforementioned 'deleted' row reappears. I would expect the applyTransaction to update the state's rowData as well. Is this not the case?
No - what you have in your applications state belongs to your application, not the grid. The grid takes a copy of the rows and updates it's internal copy. If you want your application to hold the data, and the grid to reflect what's in the applications state, then don't use a transaction to remove the row, instead remove the row from the applications state and let the grid update to reflect what's in the state.
Hello, I have a question regarding the data of a table. I have created a table where the user enters data. What is the best way on your oppinion to get the whole data of the table into an array of objects? I am also using Redux. My thoughts are should I iterate over all nodes and add them to an array that i dispatch later or can this all be done with the Redux integration in a better way? What do you recommend. I would appreciate very much a tutorial with the Redux integration. I am reading the documentation, but I am not sure which way is better. Thank you very much in advance
We have some examples in the docs www.ag-grid.com/react-data-grid/redux-integration-pt1/ and www.ag-grid.com/react-data-grid/redux-integration-pt2/ Also some blog content: blog.ag-grid.com/adding-removing-rows-columns-ag-grid-with-react-redux-toolkit/ blog.ag-grid.com/persisting-ag-grid-state-with-react-redux/ blog.ag-grid.com/building-a-react-datagrid-with-redux-and-ag-grid/ blog.ag-grid.com/react-redux-trading-platform/ These are all 'examples' rather than the 'recommended way' because the recommended way should really be set by your team coding standards and what works best in the context of your application.
Maybe, depends on the context where it's used I guess, but i was focusing on showing how to use AG Grid, not on on to use useCallback, so I am not to worried!!
When I update the data using setRowData, no matter if I update a record or insert another new one: the grid simply does not update. However, checking with console.log shows that the data is updated. The grid, however, does not react. Every other component updates when the associated state changes, but not the ag-grid. Even after a refresh of the page, the grid does not reflect the data that is in the state.
I didn't update the state correctly. This is e.g. how to update an object array: const d = [...rowData] Now manipulate the copy (d is no longer a reference as it would be if it were done with d=rowData.) Then: setRowData(d); The ui will be updated.
Excellent and clear tutorial. Separately, I note clear speech.
Thank you so much for the positive feedback, it's my first time trying to do these types of videos.
If I understand this tutorial correctly, these examples are updating data in a disconnected state.
Are there any examples of updating AG Grid data in a POST real-world scenario, IE: where we're updating a datasource via an API endpoint?
Thanks.
Thank you for this quick tutorial. I'm using server side rendering. applyTransaction does not remove a column for me, how can I do that
Transactions are for managing rows, not columns. To manage columns, either set new Column Definitions, or apply Column State. Both of these have examples in the docs (see the Columns section).
hi... how to use this ag grid to edit data pulled from a server?
You can edit the data like an Excel Spreadsheet. See the editing section of our docs. www.ag-grid.com/angular-data-grid/cell-editing/
My price cells don't fllash when the prices were changed. The use of enableCellChangeFlash in the AgGridReact component has been deprecated and I tried to move it into the column definition as instructed by the hint also didn't flash the cells.
Hi! Thanks for your videos!
I'm trying to use the update of the content by the change of state "rowData" but seems to not work for me. I try also to use transaction but no way to update the record
My update is one or more fields of one record, my way is replacement of all record whit one updated and aftere that i call setRowData, i try to view in console rowData and the data have been replaced but not in the table ..
Otherwise if a set "setRowData ([])" the refresh are triggered and the table cleared!
Where is my mistake?
You might have to ask this question on Stackoverflow, tagged with ag-grid and a supporting example in plunker or stackblitz because without seeing the code people won't be able to spot a mistake. It is worth carefully reviewing your code against the mechanisms in this video to check you have included all steps before raising on stackoverflow stackoverflow.com/questions/tagged/ag-grid
I want to update, remove and add rows using transactions on specific row positions, how can this be achieved?
Thanks for great videos, just wondering about type safety in ag-grid. Is there any type safety in it? like Typescript
Yes, check docs.
Our next release, which we plan to put out next week, will have all our React documentation examples available with TypeScript.
And our next release is now OUT !!! All the React Examples now have TypeScript as an option.
Why does my cell renderer don't re-render on updating the rowData?
The grid will only re-render the cell if the data has changed. If the data has not changed, it won't re-render.
@@agGrid Thank you for the reply. I can see that data has changed, but just not reflecting on UI. I have used immutableData={true}. May I know if there is a way to update a row data without refreshing or flickering the row, when immutableData is true and cellRenderers are used?
Hi, I'm calling getSelectedNode, getting the node's data, and calling applyTransaction({ remove: selectedData}). The row is removed as expected, however, it is NOT removed from the rowData state. Therefore when I add a new row, the aforementioned 'deleted' row reappears. I would expect the applyTransaction to update the state's rowData as well. Is this not the case?
No - what you have in your applications state belongs to your application, not the grid. The grid takes a copy of the rows and updates it's internal copy. If you want your application to hold the data, and the grid to reflect what's in the applications state, then don't use a transaction to remove the row, instead remove the row from the applications state and let the grid update to reflect what's in the state.
Hi, how to update data without rendering whole gird? data coming from server?
I would like to learn it also
The grid only renders where data changes, so this should be happening by itself.
Make sure you are providing Row ID's so the grid can match rows.
Hello,
I have a question regarding the data of a table. I have created a table where the user enters data. What is the best way on your oppinion to get the whole data of the table into an array of objects?
I am also using Redux. My thoughts are should I iterate over all nodes and add them to an array that i dispatch later or can this all be done with the Redux integration in a better way?
What do you recommend. I would appreciate very much a tutorial with the Redux integration.
I am reading the documentation, but I am not sure which way is better.
Thank you very much in advance
We have some examples in the docs www.ag-grid.com/react-data-grid/redux-integration-pt1/ and www.ag-grid.com/react-data-grid/redux-integration-pt2/
Also some blog content:
blog.ag-grid.com/adding-removing-rows-columns-ag-grid-with-react-redux-toolkit/
blog.ag-grid.com/persisting-ag-grid-state-with-react-redux/
blog.ag-grid.com/building-a-react-datagrid-with-redux-and-ag-grid/
blog.ag-grid.com/react-redux-trading-platform/
These are all 'examples' rather than the 'recommended way' because the recommended way should really be set by your team coding standards and what works best in the context of your application.
If you want the data out of the grid, then you can use the API method forEachNode() and put into an array.
thank you very much for the information. I will try it out 🙂
can you please share , how Pinning and Unpinning Rows on top/bottom in data grid ( Rowselection - multiple checkbox selected ) can be applied ?
Our of the box, we don't have option to pin selected rows. The rows in the pinned sections are from a different dataset.
Thanks for the video, but isn't useCallback useless without dependencies?
Maybe, depends on the context where it's used I guess, but i was focusing on showing how to use AG Grid, not on on to use useCallback, so I am not to worried!!
Hi, Can you please let me know how to render the calendar in ag-grid and get that value (selected date)
What will be the time complexity of updating rows through transactions of grid api?
The high frequency examples in the documentation might help ag-grid.com/react-data-grid/data-update-high-frequency/
When I update the data using setRowData, no matter if I update a record or insert another new one:
the grid simply does not update. However, checking with console.log shows that the data is updated.
The grid, however, does not react.
Every other component updates when the associated state changes, but not the ag-grid.
Even after a refresh of the page, the grid does not reflect the data that is in the state.
I didn't update the state correctly.
This is e.g. how to update an object array:
const d = [...rowData]
Now manipulate the copy (d is no longer a reference as it would be if it were done with d=rowData.)
Then:
setRowData(d);
The ui will be updated.
thanks man
How we can update files in the ag grid?