Add row at top of grid

[Eralmidia]

Question

I'm replacing an old jquery ignite grid with a new igx one. In the old one, we added a new row at the top of the grid like this:

In the new grid, I'm starting the adding of a new row with the following code:

var row = this.grid.getRowByIndex(0);
row.beginAddRow();

This however seems to add a new row below the first row, which look odd:

How do I add a new row at the top of the grid?

• igniteui-angular version: 10.2

[ChronosSF]

This is not supported currently. I am changing the issue to a feature-request.

[ChronosSF]

By the way we'll likely expose a public API function that will not require a row context. When one is not given it will add a row on top or can be used to start adding for an empty grid.

related: #9429

[ChronosSF]

@Eralmidia , as you know rows are added at the bottom after the adding UI closes. Having an API that spawns the UI on top won't change this behavior. I am wondering if you are expecting that the row is added where the UI spawns for this scenario.

I am a bit reluctant to add a row at index 0 in the grid's data source because when this row is pushed server-side and the data is refreshed (barring any sorting applied) it will go to the bottom in the vast majority of use-cases.

[ChronosSF]

c.c. @skrustev

[Eralmidia]

@ChronosSF I think this was created in relation to #9429 when trying to use the undocumented beginaddrow. This requires a row index, but because of the virtualization you can't just choose any index I belive. But I noticed that #9429 is currently marked as in development. Does that mean that we will soon get a more documented metod to start adding a row through code? Will this method then automatically scroll to the last row in order to start the row adding? If it's standardized in some way inside the grid soon I belive we might just disregard this feature-request.

[ChronosSF]

Yeah, beginAddRowByIndex was never meant to be public. The public API was attached to the RowComponent and required its context. We'll create a public function in grid-base (so it is inherited by all grid flavors) that would allow for spawning the UI at an arbitrary index. I was just wondering if this could create the expectation that the row would remain there after editing completes.

[Eralmidia]

@ChronosSF I'm not sure I follow. What do you mean by "remain there after editing completes"? Do you mean the adding row itself? I wouldn't expect that to remain once the add is completed.

[ChronosSF]

Yes, because we push it at the end like what would happen in the backend in the vast majority of cases. The index will only control the UI for adding, not where the row appears after adding it. It'll still be pushed to the end of the current data.

[Eralmidia]

@ChronosSF Yeah, in most cases I dont think its an issue that the "add row" appears at the bottom, or that the new row is added at the bottom. One use case where it might be an issue would be something like a file explorer, where you have a tree grid consisting of folders, and the you need to add a new folder inside one of the folders. At that point, it matters where the add row occurs and where the added row (folder) ends up being inserted.

[Eralmidia]

By the way we'll likely expose a public API function that will not require a row context. When one is not given it will add a row on top or can be used to start adding for an empty grid.

related: #9429

@ChronosSF Do you have an ETA for the cleanup in the add row functionality? We now have several feature branches which are complete but only waits for a proper way to start the row adding from code, and we're kinda struggling to find a method to use after upgrading to Angular/Igx 12.

[ChronosSF]

@Eralmidia , the clean up that solves the event issues is done and is getting released on Monday with the next patch for 12.1 . The public method to start a row arbitrarily somewhere in the data view is causing some issues but we should be ready with in a week or two hopefully.

[Eralmidia]

@ChronosSF Good, thanks. Looking forward to an easy and clear way of doing this. At this point we were starting experimenting with adding in a igx-grid-editing-actions component and hiding its visibility just to get easy access to adding 😛

[Eralmidia]

@ChronosSF Are we getting this in todays patch? 🤞 🙂

[ChronosSF]

Sorry, it'll be next week 😳. To make the API more readable, it was suggested to add the functionality in two different functions, one working by index and the other by rowID, so the PR is not approved yet.

You can follow it here: #10071