We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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.
Live Chat Icon For mobile
Up arrow icon