DOMNodeInserted Events in Angular

DOMNodeInserted Events in Angular

Posted by: jinder.sidhu on 9 October 2023, 9:29 pm EST

• 

  jinder.sidhu

  • Post Options:
  • Link
    Copy

  Posted 9 October 2023, 9:29 pm EST

  I am seeing a bunch of “[Deprecation] Listener added for a synchronous ‘DOMNodeInserted’ DOM Mutation Event. This event type is deprecated (https://w3c.github.io/uievents/#legacy-event-types) and work is underway to remove it from this browser. Usage of this event listener will cause performance issues today, and represents a risk of future incompatibility. Consider using MutationObserver instead.” messages when I use Wijmo column group templates inside “wj-flex-grid-column-group”.

  Can you confirm whether this is an issue that is being addressed? I’m concerned after the delay in the Angular 16 release that browser warnings may not be being tracked/addressed in a timely manner.

• 

  jinder.sidhu

  • Post Options:
  • Link
    Copy

  Posted 10 October 2023, 3:48 am EST - Updated 10 October 2023, 3:57 am EST

  To add further to this - I think this is the cause of horrible horizontal scroll performance. I’ve re-written and benchmarked our cell rendering components, and batched their updates with requestFrameAnimation. Vertical scroll performance seems fine.

  The source of this slow down appears to be caused by “wijmo.angular2.directivebase” event handlers for “DOMNodeInserted”.

• 

  anirudh.verma

  

  • Post Options:
  • Link
    Copy

  Posted 10 October 2023, 7:33 pm EST

  Hi,

  This is a known issue to our Dev team and they are actively working on this issue.

  Meanwhile, as a workaround, you may use the columnGroups property of FlexGrid to create column groups.

  Please refer to this DEMO sample for reference: https://www.grapecity.com/wijmo/demos/Grid/Columns/ColumnGroups/angular

  Also, please share a small sample replicating the issue in horizontal performance so that we can confirm if DOMNodeInserted that issue.

  Regards
  
  Anirudh

• 

  jinder.sidhu

  • Post Options:
  • Link
    Copy

  Posted 10 October 2023, 8:09 pm EST

  Unfortunately that workaround will not work for us as we need interactivity in the templated HTML for the column groups. We have a platinum support package - does it make sense for us to raise a ticket? Do you have timelines for a hotfix?

  Thanks

• 

  jinder.sidhu

  • Post Options:
  • Link
    Copy

  Posted 10 October 2023, 9:34 pm EST

  After further investigation I’ve also uncovered another issue - when the grid is in multiple selection mode (WijmoSelectionMode.ListBox) clicking the column group header results in all rows being selected. This occurs with or without using a column header template.

• 

  anirudh.verma

  

  • Post Options:
  • Link
    Copy

  Posted 11 October 2023, 5:05 pm EST

  Hi Jinder,

  The fix for the issue is currently under the QA phase and is expected to be available in the upcoming release version 5.20232-MAJOR. The tentative ETA for the same is by November end. However, in case of any unexpected delays, I will update you about the same.

  Regarding the issue “when the grid is in multiple selection mode (WijmoSelectionMode.ListBox) clicking the column group header results in all rows being selected”. I am not able to replicate the issue on my end. Could you please share a small working sample replicating the issue along with the steps needed to replicate the issue on my end?

  Please refer to this sample for reference: https://jscodemine.grapecity.com/share/-upNkOkWrEWt6OA9DqJaTA

  Thank you for your understanding.

  Regards
  
  Anirudh

• 

  jinder.sidhu

  • Post Options:
  • Link
    Copy

  Posted 1 November 2023, 3:40 am EST

  I was just about to start looking at your sample reference to see if i can re-create the issue. However it doesn’t work - there is some licensing error in the console.

• 

  anirudh.verma

  

  • Post Options:
  • Link
    Copy

  Posted 1 November 2023, 11:05 pm EST

  Hi Jinder,

  Sorry for the inconvenience caused. I have updated the sample. Please try again and let me know if you face any further issues.

  You may try the same from this link also: https://jscodemine.grapecity.com/share/-upNkOkWrEWt6OA9DqJaTA

  Regards
  
  Anirudh

• 

  jinder.sidhu

  • Post Options:
  • Link
    Copy

  Posted 1 November 2023, 11:12 pm EST

  The sample works now, but when I fork it I get an error - no files are shown and index.html isn’t found.

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 2 November 2023, 5:19 pm EST

  Hi Jinder,

  It seems there might be some issues with JSCodemine samples, we’ll try to resolve this as soon as possible. Meanwhile, you can use the following stackblitz sample for your reference - https://stackblitz.com/edit/angular-5g4gmc?file=src%2Fapp%2Fapp.component.ts

  Regards

• 

  ryan

  • Post Options:
  • Link
    Copy

  Posted 16 November 2023, 4:50 am EST

  Hello,

  I use grid.pasting.addHandler((grid: wjcGrid.FlexGrid, event: wjcGrid.CellRangeEventArgs)
  
  and the event.range._row2 to determine the number of rows being pasted. This function also appears to be impacted the deprecation. Perhaps this is an extra test scenario for you.

  Is there any additional info on the release timeline?

• 

  anirudh.verma

  

  • Post Options:
  • Link
    Copy

  Posted 19 November 2023, 7:43 pm EST

  Hi Ryan,

  Thank you for the additional scenario. However, I am not able to observe any impact on performance when pasting event is handled. In case, if there is a specific case in which this causes performance issues then please let me know so that I can forward the same to the DEV team.
  
  Also, you may use the bottomRow property of CellRange object to get the lower row instead of accessing _row2.

  Please refer to this sample for reference: https://stackblitz.com/edit/angular-ivy-w9r4jm

  Regarding the timeline of the release (5.20232-MAJOR), it is expected to come by the first week of December. In case of unexpected delays, I will let you know.

  Thank you for your understanding.

  Regards