Problem with use enableInfiniteScrolling combined with rowSpan

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 { ComponentOnInitViewChild } from '@angular/core';
import { QueryCellInfoEventArgs } from '@syncfusion/ej2-angular-grids';
import { columnSpanDataColumnSpanDataType } 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 gridany;
  public dataObject[];
  public heightstring | number;
  public widthstring | number;
  public gridLinesstring;
  public textWrapboolean;
  public previousDataany = null;
  public stRowIndexany = null;
  public previousCDataany = null;
  public stRowIndexcany = null;
  public previousFDataany = null;
  public stRowIndexfany = null;

  public testData = [
    { _id: 1group: 'AAA'name: 'doan'span_idx: 5 },
    { _id: 2group: 'AAA'name: 'le'span_idx: 0 },
    { _id: 3group: 'AAA'name: 'le'span_idx: 0 },
    { _id: 4group: 'AAA'name: 'trang'span_idx: 0 },
    { _id: 5group: 'AAA'name: 'binh'span_idx: 0 },

    { _id: 6group: 'BBB'name: 'doan'span_idx: 5 },
    { _id: 7group: 'BBB'name: 'le'span_idx: 0 },
    { _id: 8group: 'BBB'name: 'le'span_idx: 0 },
    { _id: 9group: 'BBB'name: 'trang'span_idx: 0 },
    { _id: 10group: 'BBB'name: 'binh'span_idx: 0 },

    { _id: 11group: 'CCC'name: 'doan'span_idx: 5 },
    { _id: 12group: 'CCC'name: 'le'span_idx: 0 },
    { _id: 13group: 'CCC'name: 'le'span_idx: 0 },
    { _id: 14group: 'CCC'name: 'trang'span_idx: 0 },
    { _id: 15group: 'CCC'name: 'binh'span_idx: 0 },

    { _id: 16group: 'DDD'name: 'doan'span_idx: 5 },
    { _id: 17group: 'DDD'name: 'le'span_idx: 0 },
    { _id: 18group: 'DDD'name: 'le'span_idx: 0 },
    { _id: 19group: 'DDD'name: 'trang'span_idx: 0 },
    { _id: 20group: 'DDD'name: 'binh'span_idx: 0 },

    { _id: 21group: 'EEE'name: 'doan'span_idx: 5 },
    { _id: 22group: 'EEE'name: 'le'span_idx: 0 },
    { _id: 23group: 'EEE'name: 'le'span_idx: 0 },
    { _id: 24group: 'EEE'name: 'trang'span_idx: 0 },
    { _id: 25group: 'EEE'name: 'binh'span_idx: 0 },
    { _id: 1group: 'AAA'name: 'doan'span_idx: 5 },
    { _id: 2group: 'AAA'name: 'le'span_idx: 0 },
    { _id: 3group: 'AAA'name: 'le'span_idx: 0 },
    { _id: 4group: 'AAA'name: 'trang'span_idx: 0 },
    { _id: 5group: 'AAA'name: 'binh'span_idx: 0 },

    { _id: 6group: 'BBB'name: 'doan'span_idx: 5 },
    { _id: 7group: 'BBB'name: 'le'span_idx: 0 },
    { _id: 8group: 'BBB'name: 'le'span_idx: 0 },
    { _id: 9group: 'BBB'name: 'trang'span_idx: 0 },
    { _id: 10group: 'BBB'name: 'binh'span_idx: 0 },

    { _id: 11group: 'CCC'name: 'doan'span_idx: 5 },
    { _id: 12group: 'CCC'name: 'le'span_idx: 0 },
    { _id: 13group: 'CCC'name: 'le'span_idx: 0 },
    { _id: 14group: 'CCC'name: 'trang'span_idx: 0 },
    { _id: 15group: 'CCC'name: 'binh'span_idx: 0 },

    { _id: 16group: 'DDD'name: 'doan'span_idx: 5 },
    { _id: 17group: 'DDD'name: 'le'span_idx: 0 },
    { _id: 18group: 'DDD'name: 'le'span_idx: 0 },
    { _id: 19group: 'DDD'name: 'trang'span_idx: 0 },
    { _id: 20group: 'DDD'name: 'binh'span_idx: 0 },

    { _id: 21group: 'EEE'name: 'doan'span_idx: 5 },
    { _id: 22group: 'EEE'name: 'le'span_idx: 0 },
    { _id: 23group: 'EEE'name: 'le'span_idx: 0 },
    { _id: 24group: 'EEE'name: 'trang'span_idx: 0 },
    { _id: 25group: 'EEE'name: 'binh'span_idx: 0 },
  ];

  setRowSpan(columnanyargsanystartIndexanyisLastany) {
    let endIndex = parseInt(args.cell.getAttribute('index'), 10);
    let targetCell = [].slice
      .call(
        (this as any).grid.getRows()[startIndex].querySelectorAll('.e-rowcell')
      )
      .filter(
        (cellany=>
          parseInt(cell.getAttribute('aria-colindex'), 10) ===
          parseInt(args.cell.getAttribute('aria-colindex'))
      );
    targetCell[0].setAttribute(
      'rowSpan',
      endIndex + (isLast ? 1 : 0) - startIndex
    );
  }

  public queryCellInfoEventEmitType<QueryCellInfoEventArgs> = (
    argsQueryCellInfoEventArgs
  ) => {
    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;
  }
}


2 Replies

RS Rajapandiyan Settu Syncfusion Team March 24, 2023 01:56 PM UTC

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



DO Doan March 27, 2023 07:02 AM UTC

Thank you so much!


Loader.
Up arrow icon