So we recently moved from Angular 7 to Angular 8 and updated our Ignite Angular packages accordingly. We are currently on version 8.3 of Angular and version 8.2.2 of Ignite UI for Angular (we also moved to a complete Linux environment as well, not sure if this is relevant to the issues I am having).
So most of the issues seem to be confined to the RowEditable feature. So, I have a three level Heirarchical Grid, the top level Grid when using the RowEditable property is not respecting the Theming Styling I've done for the Banner Overlay. I've explicitly set the Banner Theme for that and the theming appears to be working for the two lower level RowEditable enabled grids, it is just the top level grid is not respecting the set theme and it appearing as the default white background with Pink buttons.
Note: it seems to be an issue with having only one item in the grid, or upon first load of the grid. If I have multiple items in the grid, it won't respect it either until I open up a child grid, then it takes. It won't take at all if I only have one object in the grid. Is there perhaps a way to force a grid refresh of some variety that would force it to pick up the Theming?
One of the other issues I've noticed, is the banner now seems to appear above and below the row, whereas it always used to appear only below the row. Is there a way I can return it such that the row editable overlay will always appear below the row like it was in version 7? Unfortunately, this change seems to cause a problem with the overlay appearing in some instances.
For Example:
1) Open a Top level Data Object that has at least one child with children of its own.
2) Double Click into the first child listed in the child grid: the Row Editable Overlay should appear above the row selected to edit.
3) Close the Row Edit Overlay.
4) Open that child's child grid - three levels of grids should be open.
5) Double Click the same Child of the main grid that now has its child grid open, this should still be the first item in the first child grid - the Row Editable Overlay will now appear below the row.
6) Close the Child Grid of the Row you are editting.
7) Double Click the same row again, first child row, the Row Editable overlay will now not appear.
The above only occurs in the child grid. This same behavior does not seem to occur in the top level grid, and seems only to occur on the first item of the first child grid.
If you could let me know, I appreciate it.
Thanks,
-Randall
Hi Randall,
Thanks for posting in our community forums! I’d ask you for more detailed information about the styles you’re trying to apply in order to reproduce your problem as good as possible. It will certainly help me if you could send me an isolated sample of your issue. In this way it is going to be sure that I’m investigating the exact problem you are facing.
Best regards, Petko Bozhinov, Infragistics, Inc.
Sorry for the delay in getting back to you, the initial styling issues on the top level Grid Row Edit I got around by overriding the classes with a custom mixin (this appears to be an environmental issue as opposed to a code issue, it is something weird with our linux dev environment and browser version), however, the other two issues with the top level row bug and the inconsistency in which the Row Editor overlay appears (ie either above or below and with no way ton control it), led us to just shut off the functionality at this time.
Unless you can tell me a way in which I can consistently make it appear below a row, our users don't really want it as they just found it annoying.
Thanks.
There’s no straightforward solution to your request, ever since by design, the overlay behaves in such way. I managed to customize the position of the banner by binding to the onRowEditEnter event and after that calling the open method of rowEditingOverlay property, which invoked with custom positionStrategy argument will change the position and the overall behavior of the overlay.
Here’s my explanations dressed up in code:
public ngAfterViewInit(): void { if (this.hierarchicalGrid.rowEditingOverlay === undefined) { return; } this.hierarchicalGrid.onRowEditEnter.subscribe( (res) => { this.hierarchicalGrid.rowEditingOverlay.open({ positionStrategy: new ConnectedPositioningStrategy({ target: this.hierarchicalGrid.getRowByKey(res.rowID).nativeElement }) }); }, (err) => { // do something on error } ); }
Please, bear in mind that such a solution that overrides the default behavior of our products, is not supported and if used, may lead to unexpected issues in the future.
Another thing that you have to have in mind is that the upper solution would work for the parent grid only. If you want to make its children subordinate to that same custom behavior, you might change the grid selectors to something more general, including even the child grids.
Best, Petko Bozhinov, Infragistics, Inc.