ag-grid | Get only exactly changed cell data
Question
Im currently working on cell editing and save data using Ag-grid js library. i figure out showing data. and get data on edit. I have custom cell id, that is include db table column and row ids. im planning to send it to server with value after finish edit. I Used MySQL database to store data. the custom cell id look like this "1,4,1,12,47" .
the data is return whole row data set after finish edit. I just need only changed cell data object.
example pen: https://codepen.io/vidux/pen/vYgKXvp
thank you.
1 answers
solution1
1 ACCPTED 2021-03-28 06:10:17
I am not sure if there are any other way to do this but, here is alternate solution you can use column name because the column name matches with event.data so using that column name get required data like this event.data[cols] where cols is event.column.colDef.headerName .
Demo Code :
// specify the columns const columnDefs = [ { field: "model.value", headerName: "Model" }, { field: "make.value", headerName: "Make" }, { field: "price.value", headerName: "Price" }, ]; const autoGroupColumnDef = { } // let the grid know which columns and what data to use const gridOptions = { columnDefs: columnDefs, defaultColDef: { flex: 1, minWidth: 110, editable: true, resizable: true, }, onCellValueChanged: onCellValueChanged, }; function onCellValueChanged(event) { console.clear() console.log('data after changes is: ', event.data); var cols = event.column.colDef.headerName.toLowerCase() console.log('data column name--', event.column.colDef.headerName.toLowerCase()); console.log('data after changes is: ', event.data[cols]); } // setup the grid after the page has finished loading document.addEventListener('DOMContentLoaded', function() { // lookup the container we want the Grid to use const eGridDiv = document.querySelector('#myGrid'); // create the grid passing in the div to use together with the columns & data we want to use new agGrid.Grid(eGridDiv, gridOptions); let jsonObj = `[ { "make":{"value": "Toyota", "cell_id":"22,331,1"}, "model": {"value": "Hilux", "cell_id":"22,331,2"}, "price": {"value": 80899, "cell_id":"22,331,3"} }, { "make":{"value": "MBW", "cell_id":"22,332,1"}, "model": {"value": "I8", "cell_id":"22,332,2"}, "price": {"value": 300899, "cell_id":"22,332,3"} } ]`; gridOptions.api.setRowData(JSON.parse(jsonObj)); gridOptions.api.sizeColumnsToFit(); });
<html> <head> <script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script> <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css"> <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-alpine.css"> </head> <body> <div id="myGrid" style="height: 80vh;width:100%" class="ag-theme-alpine"></div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.