Multi-cell Edit in Grid

[SkylerLutz]

Question

Hi -- I'd like to give my users the ability to select multiple cells, enter a new value once, and have it update all selected cells with the new value. Is this natively possible? Can you provide an example? Thank you!

• igniteui-angular version: 12.1.5
• browser: Chrome 91.0.4472.114

[hanastasov]

@SkylerLutz, this can happen pretty fine on app level. The grid exposes API to get all selected cells, and API to update each cell. See https://stackblitz.com/edit/github-c7yj1n-wgxbvb?file=src/app/grid/grid-cellSelection-sample/grid-cellSelection.component.ts

  <igx-grid (cellEditDone)="handleCellEdit($event)" ...>

  public handleCellEdit(event: IGridEditEventArgs): void {
    const selectedCells = this.grid.selectedCells;
    selectedCells.forEach((cell) => {
      cell.update(event.newValue);
    });
  }

You can choose to implement this code in cellEdit, or cellEditDone, or cellEditExit event. You can refer to our documentation at https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/editing#event-cancelation to see difference between those events. Basically, they are emitted consequently through the edit process. cellEditDone is emitted after the cell update completed successfully and seems fine to implement your scenario, and cellEditExit being the last event, indicating exiting the edit UI). cellEdit is suitable for validating the user input and cancel the update if validation fails.

[SkylerLutz]

Thanks @hanastasov -- is it possible to combine the first edit in a single transaction (i.e. this.grid.transactions) with the rest of the updates to the selected cells?

[hanastasov]

Thanks @hanastasov -- is it possible to combine the first edit in a single transaction (i.e. this.grid.transactions) with the rest of the updates to the selected cells?

Setting batchEditing to true to enable transactions is enough to batch all cell updates in the this.grid.transactions collection. Notice that each cell update will be a separate item in this transactions collection. Here you can find more info about transactions in the grid: https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/batch-editing

[SkylerLutz]

That worked-- thank you!

[SkylerLutz]

@kdinev @hanastasov Reopening -- for context, all was working fine, until recently when I added Remote Paging with Batch Editing to my grid. Now, when I select cells on the first page of data, this.grid.selectedCells is correctly populated with the selected cells, but when I scroll down my grid and select different cells on the next page, this.grid.selectedCells is an empty array. Any ideas? Thanks in advance

PS, this is in @infragistics/[email protected]

[hanastasov]

@SkylerLutz thanks for reporting this, looking into it now and will get back to you.

[SkylerLutz]

Hi @hanastasov , following up -- any luck reproducing the issue on your end?

Edit: I also opened C-00221763 support ticket

[hanastasov]

@SkylerLutz I ended up on another bug while trying to reproduce it, Now I am back on it and will have news for you today!

[hanastasov]

@SkylerLutz I reproduced it and logged it as new issue and added as TODO in current sprint. https://github.com/IgniteUI/igniteui-angular/issues/10807

[hanastasov]

ge, this.grid.selectedCells is an empty array. Any ideas? Thanks in advance

Hi @SkylerLutz ,

Make sure you properly set the pagingMode property on the grid to GridPagingMode.Remote

This way the collection of grid.selectedCells will return the expected results.

[SkylerLutz]

@hanastasov thanks for that -- just getting back to this. I updated to 12.3.10, and set pagingMode to Remote, but I still experience the same issue where selectedCells is empty when I scroll down and select cells. Can we please re-open this issue?

PS: I should add that my grid is set up for infinite scrolling -- we may have different definitions of "paging" :)

[hanastasov]

@SkylerLutz - I just verified and saw that the fix has been merged into 13.1.x and 13.0.x branches. It is possible it was was missed or not resolved properly when merging branches. Is it ok for you to upgrade to 12.3.11 on Monday?

[SkylerLutz]

@hanastasov Sure thing -- will upgrade to 12.3.11 on Monday and check back in with you here -- thanks!

[SkylerLutz]

Good morning @hanastasov -- I updated to 12.3.11, and set pagingMode to Remote, but I still experience the same issue where selectedCells is empty when I scroll down and select cells.

[hanastasov]

@SkylerLutz sorry for inconvenience! Me and @Volen99 are hands on it and will update you asap!

[hanastasov]

@SkylerLutz - it seems I really missed the point where you mentioned what you mean by paging. It is a different story with the virtual scrolling. Selection service calculates how many records have been scrolled, while another part in our code does not.

It results in comparing different indexes when verifying if a cell is selected. We know what the fix is and we are working on it. I will update you later. My apologies for taking this long to resolve your issue.

[hanastasov]

@SkylerLutz, until we release a patch with the fix, you can use the following work around:

   // const selectedCells = grid.selectedCells; instead use the folllowing:
   const selectedCells =  grid.dataRows().map((row) => {
     return row.cells.filter((cell) => {
       let selectionNode = cell.selectionNode;
       selectionNode.row = cell.row?.index + grid.dataRowList.first.index;
       return grid.selectionService.selected(selectionNode) === true;
   });
  }).reduce((a, b) => a.concat(b), []);

[hanastasov]

New issue I logged is https://github.com/IgniteUI/igniteui-angular/issues/10982, which will address the remote virtualization scenario, that you are using.

[SkylerLutz]

@hanastasov I am getting reports that this is only working intermittently. I have reproduced the issue and it appears that selectedCells is not always populated with the cells that are offscreen. Sometimes it is, sometimes it isn't.

Steps to reproduce:

1. create a table that has more rows that can fit on screen, with a couple columns
2. select a cell in a column in the top row (single right click)
3. scroll all the way to the bottom of the grid
4. hold shift, and select the bottom cell in the same column (thus also selecting all cells in between the top and bottom cells)
5. press enter to edit, type a new value, and press edit to save it.
6. grid.selectedCells.forEach(cell => cell.update(newValue)) works intermittently. Sometimes the selected intermediate cells that are offscreen are updated, sometimes they are not. It seems random -- I haven't noticed a pattern.

This is on version "@infragistics/igniteui-angular": "^12.3.21".

Can you please reopen and investigate this issue? Thanks in advance

[SkylerLutz]

@hanastasov @Volen99 I was able to confirm that this issue also exists in @infragistics/igniteui-angular 16.1.13

[hanastasov]

HI @SkylerLutz ,

Thank you for getting back to us reporting this. We quickly scanned through the history of the issue, a brief overview is:

• current issue https://github.com/IgniteUI/igniteui-angular/issues/10140 is about how to update multiple cells at once, an application level code is provided to do this
• then a new issue was logged https://github.com/IgniteUI/igniteui-angular/issues/10807, which was about this.grid.selectedCells returning empty or not all cells when in remote paging scenario, which was also resolved
• then a new issues was logged https://github.com/IgniteUI/igniteui-angular/issues/10982 about the same issue with Remote Virtualization scenario.

Now the report is the fix is doing its job only intermittently. I have reopened current issue, and we will have a detailed look on this starting this sprint. We will check the latest reported version (16.1.13, thanks for that) and go through both https://github.com/IgniteUI/igniteui-angular/issues/10807 and https://github.com/IgniteUI/igniteui-angular/issues/10982

I am adding the issue as part of the sprint, please expect update by the end of the sprint (this Friday).

[SkylerLutz]

@hanastasov following up, thanks

[ddincheva]

Hello @SkylerLutz I have further investigated the mentioned issues and unfortunately, when you are working with the grid in remote scenarios so the grid doesn't have the whole data source there are certain limitations: we can not provide you with the row and cell objects that are outside the current view. Also, keep in mind for remote data scenarios, it is very important to set a primary key for the grid to work properly. For the described scenarios I managed to find a workaround. Here you can take a look at the implementation.., all the additional logic is in updateSelectedCells() method if you have any additional questions do not hesitate to write back

[SkylerLutz]

@ddincheva It works but the performance is very slow, it took over 20 seconds to update 120 cells. Is there any way to improve the performance? Ideally this operation should complete in the order of milliseconds

FYI my current use case is not a remote data scenario. All data is held in memory simultaneously. Also the primary key is set to my data id, which is a string

[SkylerLutz]

@hanastasov @kdinev following up. The workaround provided by @ddincheva is too slow.

[hanastasov]

I understand the solution might be slow when regarding hundreds of cells/rows/columns. @ddincheva will revise the solution, though bear in mind it might be the only one out there. To make sure we do not miss any chance for improvement, the work around code will be revised but also the internal implementation of this public APIs. We will keep you posted.

[SkylerLutz]

Thank you, I am standing by awaiting your update. Even with two dozen cells selected it takes a couple seconds, which seems a bit ridiculous tbh. Microsoft excel for example this operation happens instantly.

[ddincheva]

Hello @SkylerLutz, I tried to improve and optimize the solution I provided for you as much as possible here you can see the updated code. Please take a look at it and test it to see if you notice a good increase in performance. Please keep us posted