CODEWITHSUNDEEP
reactjsag-grid
Alaa Alarfaj
Alaa Alarfaj

Reputation: 57

React.js: How to delete row from an ag grid?

I am using react and ag grid. i want to delete row from the grid.

here is the code

onButtonClick = e => {
  this.setState({
    visible: true
  });
  const selectedNodes = this.gridApi.getSelectedNodes();
  let deletedRow = selectedNodes;
  e.gridApi.updateRowData({ remove: [deletedRow] });
};

when i used this instead of e, i got : ag-Grid: could not find data item as object was not found

<button onClick={this.onButtonClick}>delete</button>;
<AgGridReact
  onGridReady={params => (this.gridApi = params.api)}
  rowSelection="multiple"
  columnDefs={this.state.columnDefs}
  rowData={this.state.rowData}
  defaultColDef={{
    editable: true
  }}
/>;

console.log(deletedRow)

Unable to display error. Open your browser's console to view

g-Grid: could not find data item as object was not found

Error: Object too large to inspect. Open your browser console to view. at Object. (preview-2e4d276ba818b5932108b.js:1) at JSON.stringify () at P.r.error (preview-2e4d276ba818b5932108b.js:1) at P (preview-2e4d276ba818b5932108b.js:1) at preview-2e4d276ba818b5932108b.js:1 at Array.map () at Q (preview-2e4d276ba818b5932108b.js:1) at console. [as log] (preview-2e4d276ba818b5932108b.js:1) at App._this.onButtonClick (index.js:44) at HTMLUnknownElement.callCallback (react-dom.development.js:336)

[RowNode] 0: RowNode childrenMapped: {} selectable: true objectId: 1 alreadyRendered: true highlighted: null selected: true mainEventService: EventService {allSyncListeners: Map(75), allAsyncListeners: Map(56), globalSyncListeners: Set(0), globalAsyncListeners: Set(1), asyncFunctionsQueue: Array(0), …} gridOptionsWrapper: GridOptionsWrapper {propertyEventService: EventService, domDataKey: "__AG_0.09475464623441865", layoutElements: Array(5), gridOptions: {…}, columnController: ColumnController, …} selectionController: SelectionController {eventService: EventService, rowModel: ClientSideRowModel, gridOptionsWrapper: GridOptionsWrapper, columnApi: ColumnApi, gridApi: GridApi, …} columnController: ColumnController {primaryHeaderRowCount: 1, secondaryHeaderRowCount: 0, secondaryColumnsPresent: false, gridHeaderRowCount: 1, displayedLeftColumns: Array(0), …} valueService: ValueService {initialised: true, gridOptionsWrapper: GridOptionsWrapper, expressionService: ExpressionService, columnController: ColumnController, eventService: EventService, …} rowModel: ClientSideRowModel {gridOptionsWrapper: GridOptionsWrapper, columnController: ColumnController, filterManager: FilterManager, $scope: undefined, selectionController: SelectionController, …} context: Context {beanWrappers: {…}, componentsMappedByName: {…}, destroyed: false, contextParams: {…}, logger: Logger} valueCache: ValueCache {cacheVersion: 2, gridOptionsWrapper: GridOptionsWrapper, active: false, neverExpires: false} columnApi: ColumnApi {columnController: ColumnController} gridApi: GridApi {detailGridInfoMap: {…}, immutableService: ImmutableService, csvCreator: CsvCreator, excelCreator: null, rowRenderer: RowRenderer, …} group: false master: false expanded: false canFlower: false parent: RowNode {childrenMapped: null, selectable: true, __objectId: 0, alreadyRendered: false, highlighted: null, …} level: 0 data: Date: "2020-03-13" Price1: 31.72 Price2: 33 Price3: 0.929 Price4: 0.907 Price5: 1.097 Price6: 1.147 Price7: 1.175 Price8: 1.122 Price9: 1.272 Price10: 0.977 Price11: 0.293 __proto: Object id: "0" childrenAfterFilter: undefined allChildrenCount: null firstChild: true lastChild: false childIndex: 0 uiLevel: 0 oldRowTop: undefined rowTop: 0 rowHeight: 28 rowHeightEstimated: false rowIndex: 0 eventService: EventService {allSyncListeners: Map(16), allAsyncListeners: Map(8), globalSyncListeners: Set(0), globalAsyncListeners: Set(0), asyncFunctionsQueue: Array(0), …} proto: Object length: 1 proto: Array(0)

Upvotes: 0

Views: 2697

Answers (3)

Alaa Alarfaj
Alaa Alarfaj

Reputation: 57

I solve the problem by replace

const selectedNodes = this.gridApi.getSelectedNodes();

with 

var selectedNodes = this.gridApi.getSelectedRows();

Upvotes: 2

1pulsif
1pulsif

Reputation: 499

Replace this.gridApi.updateRowData({ remove: [deletedRow] })

by

this.gridApi.updateRowData({ remove: [deletedRow.data] })

Upvotes: 0

1pulsif
1pulsif

Reputation: 499

you don't have to call e instead of you can call directly

this.gridApi.updateRowData({ remove: [deletedRow] })

Upvotes: 0

Related Questions