Problem with use enableInfiniteScrolling combined with rowSpan

[Doan]

I'm combining enableInfiniteScrolling and rowSpan. but I have problem when scroll to lazy load data, grid show wrong data rowspan. What should we do in this case?

my code

<div class="control-section">

  <ejs-grid

    #grid

    [dataSource]="testData"

    [height]="height"

    [width]="width"

    [gridLines]="gridLines"

    [allowSelection]="false"

    [allowTextWrap]="textWrap"

    (queryCellInfo)="queryCellInfoEvent($event)"

    enableInfiniteScrolling='true'

  >

    <e-columns>

      <e-column

        field="_id"

        headerText="Employee ID"

        width="150"

        textAlign="Right"

        isPrimaryKey="{true}"

      ></e-column>

      <e-column field="group" headerText="Group" width="120"></e-column>

      <e-column field="name" headerText="Employee Name" width="200"></e-column>

    </e-columns>

  </ejs-grid>

</div>

 

import { Component, OnInit, ViewChild } from '@angular/core';

import { QueryCellInfoEventArgs } from '@syncfusion/ej2-angular-grids';

import { columnSpanData, ColumnSpanDataType } from './data';

import { EmitType } from '@syncfusion/ej2-base';

import { isNullOrUndefined } from '@syncfusion/ej2-base';

@Component({

  selector: 'app-root',

  templateUrl: 'app.component.html',

})

export class AppComponent {

  @ViewChild('grid')

  public grid: any;

  public data: Object[];

  public height: string | number;

  public width: string | number;

  public gridLines: string;

  public textWrap: boolean;

  public previousData: any = null;

  public stRowIndex: any = null;

  public previousCData: any = null;

  public stRowIndexc: any = null;

  public previousFData: any = null;

  public stRowIndexf: any = null;

  public testData = [

    { _id: 1, group: 'AAA', name: 'doan', span_idx: 5 },

    { _id: 2, group: 'AAA', name: 'le', span_idx: 0 },

    { _id: 3, group: 'AAA', name: 'le', span_idx: 0 },

    { _id: 4, group: 'AAA', name: 'trang', span_idx: 0 },

    { _id: 5, group: 'AAA', name: 'binh', span_idx: 0 },

    { _id: 6, group: 'BBB', name: 'doan', span_idx: 5 },

    { _id: 7, group: 'BBB', name: 'le', span_idx: 0 },

    { _id: 8, group: 'BBB', name: 'le', span_idx: 0 },

    { _id: 9, group: 'BBB', name: 'trang', span_idx: 0 },

    { _id: 10, group: 'BBB', name: 'binh', span_idx: 0 },

    { _id: 11, group: 'CCC', name: 'doan', span_idx: 5 },

    { _id: 12, group: 'CCC', name: 'le', span_idx: 0 },

    { _id: 13, group: 'CCC', name: 'le', span_idx: 0 },

    { _id: 14, group: 'CCC', name: 'trang', span_idx: 0 },

    { _id: 15, group: 'CCC', name: 'binh', span_idx: 0 },

    { _id: 16, group: 'DDD', name: 'doan', span_idx: 5 },

    { _id: 17, group: 'DDD', name: 'le', span_idx: 0 },

    { _id: 18, group: 'DDD', name: 'le', span_idx: 0 },

    { _id: 19, group: 'DDD', name: 'trang', span_idx: 0 },

    { _id: 20, group: 'DDD', name: 'binh', span_idx: 0 },

    { _id: 21, group: 'EEE', name: 'doan', span_idx: 5 },

    { _id: 22, group: 'EEE', name: 'le', span_idx: 0 },

    { _id: 23, group: 'EEE', name: 'le', span_idx: 0 },

    { _id: 24, group: 'EEE', name: 'trang', span_idx: 0 },

    { _id: 25, group: 'EEE', name: 'binh', span_idx: 0 },

    { _id: 1, group: 'AAA', name: 'doan', span_idx: 5 },

    { _id: 2, group: 'AAA', name: 'le', span_idx: 0 },

    { _id: 3, group: 'AAA', name: 'le', span_idx: 0 },

    { _id: 4, group: 'AAA', name: 'trang', span_idx: 0 },

    { _id: 5, group: 'AAA', name: 'binh', span_idx: 0 },

    { _id: 6, group: 'BBB', name: 'doan', span_idx: 5 },

    { _id: 7, group: 'BBB', name: 'le', span_idx: 0 },

    { _id: 8, group: 'BBB', name: 'le', span_idx: 0 },

    { _id: 9, group: 'BBB', name: 'trang', span_idx: 0 },

    { _id: 10, group: 'BBB', name: 'binh', span_idx: 0 },

    { _id: 11, group: 'CCC', name: 'doan', span_idx: 5 },

    { _id: 12, group: 'CCC', name: 'le', span_idx: 0 },

    { _id: 13, group: 'CCC', name: 'le', span_idx: 0 },

    { _id: 14, group: 'CCC', name: 'trang', span_idx: 0 },

    { _id: 15, group: 'CCC', name: 'binh', span_idx: 0 },

    { _id: 16, group: 'DDD', name: 'doan', span_idx: 5 },

    { _id: 17, group: 'DDD', name: 'le', span_idx: 0 },

    { _id: 18, group: 'DDD', name: 'le', span_idx: 0 },

    { _id: 19, group: 'DDD', name: 'trang', span_idx: 0 },

    { _id: 20, group: 'DDD', name: 'binh', span_idx: 0 },

    { _id: 21, group: 'EEE', name: 'doan', span_idx: 5 },

    { _id: 22, group: 'EEE', name: 'le', span_idx: 0 },

    { _id: 23, group: 'EEE', name: 'le', span_idx: 0 },

    { _id: 24, group: 'EEE', name: 'trang', span_idx: 0 },

    { _id: 25, group: 'EEE', name: 'binh', span_idx: 0 },

  ];

  setRowSpan(column: any, args: any, startIndex: any, isLast: any) {

    let endIndex = parseInt(args.cell.getAttribute('index'), 10);

    let targetCell = [].slice

      .call(

        (this as any).grid.getRows()[startIndex].querySelectorAll('.e-rowcell')

      )

      .filter(

        (cell: any) =>

          parseInt(cell.getAttribute('aria-colindex'), 10) ===

          parseInt(args.cell.getAttribute('aria-colindex'))

      );

    targetCell[0].setAttribute(

      'rowSpan',

      endIndex + (isLast ? 1 : 0) - startIndex

    );

  }

  public queryCellInfoEvent: EmitType<QueryCellInfoEventArgs> = (

    args: QueryCellInfoEventArgs

  ) => {

    if (args.data['span_idx'] > 0) {

      if (args.column.field === '_id') {

        args.rowSpan = args.data['span_idx'];

      }

      if (args.column.field === 'group') {

        args.rowSpan = args.data['span_idx'];

      }

    }

  };

  ngOnInit(): void {

    this.data = columnSpanData;

    this.gridLines = 'Both';

    this.height = '300px';

    this.width = 'auto';

    this.textWrap = true;

  }

}

[Rajapandiyan Settu]

Hi Doan,

Thanks for contacting Syncfusion support.

In EJ2 Grid, the Infinite scrolling and Virtualization features do not support row/column spanning. It is one of the limitations of the Infinite scrolling feature.

Regards,

Rajapandiyan S

[Doan]

Thank you so much!