IgniteUI / igniteui-angular

Ignite UI for Angular is a complete library of Angular-native, Material-based Angular UI components with the fastest grids and charts, Pivot Grid, Dock Manager, Hierarchical Grid, and more.
https://www.infragistics.com/products/ignite-ui-angular
Other
572 stars 161 forks source link

How to start add row? #9429

Closed Eralmidia closed 3 years ago

Eralmidia commented 3 years ago

Question

I'm trying to use the new add row functionality of the igx grid, but I can't the method to simply start the adding.

I see that the igx row component has a begin add row, but that would require the grid to actually have a row? Then there is the CRUD service, which also has a begin add row method, but this, for some reason seems to require a cell. How do I simply start the process of adding a new row? Note: we want to trigger this programtically, not using built in buttons in the grid, like the igx-grid-editing-actions.

ChronosSF commented 3 years ago

@Eralmidia , the add row UI is always dependent on another row so that we don't have a second implementation for TreeGrid where it allows adding children for the said row as well. What the empty template button does and what will work for your case is an undocumented method inherited by all grids that should be called like this:

this.grid.beginAddRowByIndex(null, -1, false);

What it actually does internally is to create a default record with a generated PK and start edit mode for it using:

this.crudService.enterEditMode(cell, event);

Where cell is just the first editable cell.

You should either use the undocumented method or create a wrapper around enterEditMode that does something similar. However, please, don't close the issue as we should make this easier. I'll transform it to a feature request tomorrow so that we can create better API for this.

Eralmidia commented 3 years ago

@ChronosSF Yes, before the add row functionality came along, we have been doing the same. Adding a blank row and setting that in edit mode. It's just that that brings along a bit of cleanup requirements. We use a state management library for the application state, which streams the records to the grid through an observable. So typically that means adding a new entity to the state, which then adds a new row in the grid. And if the user cancels the adding, we need to remove it in the store etc. Add row is nice, since we can simply let the grid handle the input data of the new row until its ready to be committed to the store.

Having this reviewed, and hopefully a section about it the the docs, would be very good. For now, I'll check out the undocumented beginAddRowByIndex method. Thanks.