I am trying to add a Visual Indicator to any cell that is edited but hasn't had the corresponding change saved to our database. I'm using the onCellEdit event to apply a custom 'edited-border' class that is changing the cell border to a 2px black or white dashed border depending on theme.
To do this dynamically, I am doing something like below which is tied to the onCellEdit event on my row-islands and heirarchical-grid html elements:
editDone(event){
if(event.newValue !== event.oldValue){
var cell = event.owner.getCellByKey(event.rowID, event.owner.columns[event.cellID.columnID].field);
cell.nativeElement.classList.add('edited-border');
}
The above code works just fine, until I start expanding rows to view child grids. So for example if I were to have two entries in a Heirarchical grid, if I were to edit any field on the bottom entry, the style would apply. If I were to then open up the child grid of the top entry, the style would then disappear. As far as I can tell, it looks like the grid is changing the bottom row's style to match the odd row styling which removes any existing classes I have applied. When I close the opened child grid, the 'edited-border' style will actually come back, so it looks like it is at least holding the original classes somehow.
How would I go about applying the edited-border class when a rowExpansion occurs? I thought about maybe holding onto every Cell I edit and trying to reapply, the problem I have is I can't figure out what event to use. It doesn't look like there is an onRowExpansion event I can use.
We are using Ignite Angular v8.2.2.
Any insight would be appreciated,
Thanks,
-Randall
Hi Randall,
As far as I understand, you want to apply a custom style to the cells, which are edited, but not yet persisted to the database. That’s already implemented for our hierarchical grid, it’s called Batch editing.
Be advised, that there’s a class, namely igx-grid__td—edited, which is responsible for styling the edited and not yet commited cell. You may override its styling to suit your requirements in the best way possible.
Feel free to contact me, if any further questions regarding our products appear.
Best regards, Petko Bozhinov, Infragistics, Inc.
As far as I can tell, that appears to only work when rowEditable is being used, and only when the row itself has not been committed. Once the "Done" button is hit on the rowEditable overlay, the igx-grid__td—edited class disappears on my application, which is not what I want, it needs to persist until a user explicitly hits the Save All button on our application without having to use the rowEditable functionality.
I am confused by the Batch Editing Demo, though, as it appears to be persisting the igx-grid__td--edit class after a commit on rowEditable, how is that occurring? That does not appear to be occurring on the 8.2.2 version of Ignite-Angular that I have.
Hello Randall,
I would kindly suggest you to make sure to have got acquainted with the topics on our Batch editing features, check either the Hierarchical Grid’s one, or the Data Grid’s and review the samples on the topic. To enable the feature, one has to import all providers and add rowEditable to the grid’s opening tag. The way it works is by submitting a value to a transactions array, which keeps an eye on how has a row with a certain ID changed, what’s the new data and what type does the transaction have. After the Commit button gets clicked, the array, holding all the transaction is being persisted to the data source.
If you want me to help you with a custom scenario where the feature is being used in a different way than what’s suggested in our topics, I would kindly ask you to send me a sample of your application, or to edit and send me one of the Stackblitz samples provided in our topics. Otherwise it’s too hard for me to determine what for a problem you have, to reproduce it and to give you a solution.
Also, please mind that you are free to implement any custom behavior on our products, or customize our features to best suit your requirements. But in this way, you risk that your code affects another part of your application, which uses our components. That’s why I’d not suggest you to go too far in modifying the product. Instead, stick to our features as close as possible to ensure a higher maintainability.
If you still want your custom solution though, please send me a working sample of your application with all the issues you are wishing me to help you with.
Best regards, Petko
Here is a rough stackblitz of what I am trying to accomplish: stackblitz.com/.../angular-2pczxt
Please excuse the roughness of it, I am not sure why the icons are not loading.
Now, I've stripped this down to the basic styling issue that I am having. I appreciate you pointing out the batch editing features, however, that is not really what I am looking for. All I am trying to do is get my custom edit style to persist.
To reproduce the problem:
1) Open up Object 1's child grid.
2) Edit Any field on Subobject2 - a dashed line should appear when done.
3) Open up Subobject 1's child grid - the dashed line on Subobject2's edited field should now disappear.
I need that dashed box to not disappear when the child grid above its row is opened. My guess on to why this is happening is that when that child grid is opened, the row's index changes and the Grid goes to apply the Even row styling which doesn't carry over the custom 'Edited-border' style. What is interesting, is when that child grid is closed, the 'Edited-border' style returns, so some persistence is occurring.
Is there a way to keep the 'Edited-border' styling when a child grid is opened above it? You mentioned the igx-grid__td—edited, however, as you can see, that class is nowhere to be seen in this case, so I can't use it.
If you could let me know, I would appreciate it.
Thanks.
The reason your style is not correctly applying to the cell is because the grid renders a specific amount of records and on scroll, or on row expand (when talking about a hierarchical or a tree grid), the row indices are changing. That’s why applying the style to the native element itself won’t work. I’d suggest to conditionally template the cells in your grids, or if you use igniteui-angular version 8.2.4 (or above), check out the newly released functionality for conditionally styling cells.
If you need any further assistance with the implementation, feel free to contact me.
Regards, Petko