allowReordering and enableVirtualization compatability

Question

Hi!As per my project requirements, I have to enable allowReordering property on the treeGrid while using virtual scroll. But it seems those properties don't work together.When allowReordering is set to true and enableVirtualization is set to true, treegrid doesn't load and I get the following error:I set allowReordering ​to true by default and set enableVirtualization​ to true or false dynamically, depending on whether there are any frozen columns.Here is my treeGrid config and a function that enables virtualization:this.treeGridObj = new TreeGrid({    treeColumnIndex: 1,    enableVirtualization: false,    enableInfiniteScrolling: false,    height: 900,    allowResizing: true,    allowSelection: true,    allowKeyboard: true,    allowRowDragAndDrop: true,    allowReordering: true,    allowSorting: true,    showColumnChooser: true,    enableAdaptiveUI: true,    selectionSettings: this.selectionSettings,    copyHierarchyMode: 'Child',    contextMenuClick: ($event: MenuEventArgs) => this.menuClicked($event),    editSettings: this.editSettings,    filterSettings: this.filterSettings,    columnDrop: ($event: ColumnDragEventArgs) => this.columnDrop($event),    columnDrag: ($event: ColumnDragEventArgs) => this.columnDrag($event),    columnDragStart: ($event: ColumnDragEventArgs) => this.columnDragStart($event),    resizeStop: ($event: ColumnDragEventArgs) => this.columnResize($event),    actionComplete: ($event: any) => this.actionComplete($event),    actionBegin: ($event: any) => this.actionBegin($event),    rowDrop: ($event: any) => this.rowDrop($event)})this.treeGridObj.appendTo('#TreeGrid')if (this.metaData.common.frozen > 0) {    this.treeGridObj.frozenColumns = this.metaData.common.frozen    this.treeGridObj.enableInfiniteScrolling = true} else {    this.treeGridObj.enableVirtualization = true}Can you help me to figure out this problem, please?

Farveen Sulthana Thameeztheen Basha · Answer

Hi Yushkova, 

Query#:- When allowReordering is set to true and enableVirtualization is set to true, treegrid doesn't load and I get the following error: (Cannot read properties of undefined(reading parentNode)) 
 
We have checked your reported problem by preparing sample using your code example but we are unable to replicate at our end. Refer to the sample Link:- 
https://stackblitz.com/edit/angular-j1jtzp?file=app.component.html 

We need some more additional details to find the cause of the issue. Share us the following details. 


Share Video Demo to replicate the issue.
Share exact replication procedure of the issue.
If possible replicate it in the above sample and revert us back.
TreeGrid Package version details.

Note:- Since we doesn’t have rowDragandDrop support for VirtualScroll, we suggest to remove Draganddrop property while using Virtual scroll. 

Regards, 
Farveen sulthana T

Yushkova Yuliya · Answer

Hello, Thank you for your reply!I created and example, please check:https://stackblitz.com/edit/angular-j1jtzp-dyo1hq?file=app.component.ts As soon as you uncomment 'frozenColumns' property, an error message will appear in the console:Are there any cases when 'frozenColumns' is incompatible with some other treeGrid properties? The version of treeGrid package that I'm using is "@syncfusion/ej2-angular-treegrid": "^19.4.48",

Farveen Sulthana Thameeztheen Basha · Answer

Hi Yushkova, 

We are able to replicate the problem at our end. Further analyzing, you have rendered the TreeGrid component in TS page. Corresponding module related to Frozen column property has not been Injected. So the reported problem occurs. So we suggest to import and Inject corresponding modules based on the features as like given below 

Refer to the below code:- 




App.Component.ts:- 
 
import { 
    VirtualScroll, 
    InfiniteScroll, 
    Reorder, 
    Column, 
    Page, 
    Resize, 
    TreeGrid, 
    Freeze, 
    Sort, 
    } 
    from '@syncfusion/ej2-treegrid'; 
TreeGrid.Inject( 
  VirtualScroll, 
  InfiniteScroll, 
  Page, 
  Reorder, 
  Resize, 
  Freeze, 
  Sort 
); 
@Component({ 
  selector: 'app-root', 
  templateUrl: 'app.component.html', 
  encapsulation: ViewEncapsulation.None, 
  providers: [ 
    VirtualScrollService, 
    InfiniteScrollService, 
    FreezeService, 
    ReorderService, 
    SelectionService, 
  ], 
}) 
export class AppComponent { 
  public vData: Object[] = []; 
 
  @ViewChild('treegrid') 
  public treegrid: TreeGridComponent; 
  public pageSettings: Object; 
  public treeGridObj: TreeGrid = new TreeGrid(); 
  public ngOnInit(): void { 
    if (virtualData.length === 0) { 
      dataSource(); 
    } 
    this.vData = virtualData; 
    this.pageSettings = { pageSize: 30 }; 
 
    this.treeGridObj = new TreeGrid({ 
      dataSource: this.vData, 
      childMapping: 'Crew', 
      treeColumnIndex: 1, 
      pageSettings: { pageSize: 30 }, 
      enableVirtualization: false, 
      enableInfiniteScrolling: false, 
      height: 900, 
      frozenColumns: 1, 
      .   .    . 
   }); 
    this.treeGridObj.appendTo('#TreeGrid'); 
  } 
 
Modified sample link:- https://stackblitz.com/edit/angular-j1jtzp-pwevsr?file=app.component.ts 
 
Please get back to us if you need any further assistance. 

Regards, 
Farveen sulthana T