[ravindra.vairagiParticipant]

Hi JQXTeam

i am facing the same issue while scrolling empty rows are inserted(rownumber = 21 to 35), Grid loads data after scroll to rownumber 36.

I am working with Angular jqxgrid with typescript.

OnScroll rendergridrows function called and loads the record but at some point of scroll it is not called.

I am getting data from server side Database and using Dynamic LINQ queries to return the 20 records every time.

My Code is as below –

HTML –

<jqxGrid #customersGrid [width]="'100%'" [height]="450" [source]="dataAdapter" [columns]="columns" [virtualmode]="true" [rendergridrows]="rendergridrows" (onRowselect)="rowSelect($event)" [filterable]="true" (onFilter)="filterCustomers()" [autoshowfiltericon]="true" [updatefilterconditions]="updatefilterconditions" [sortable]="true" (onSort)="sortCustomers($event)" [altrows]="true" [selectionmode]="'singlerow'"></jqxGrid>

component.ts code –

import { jqxGridComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxgrid';
import {
  CustomerServiceProxy,
  CustomerListDto,
  EntityDtoOfInt64,
  FilterRule
} from 'shared/service-proxies/service-proxies';
@Component({
  templateUrl: './customers.component.html',
  styleUrls: ['./customers.component.less'],
  animations: [appModuleAnimation()]
})
export class CustomersComponent extends AppComponentBase implements OnInit {
 @ViewChild('customersGrid') customersGrid: jqxGridComponent;

 customers: Array<CustomerListDto> = [];
  isGridDataPrepared = false;
  rendergridrows: any;
  source: any;
  dataAdapter: any;
  
  columns: any[] = [
    {
      pinned: true,
      exportable: false,
      sortable: false,
      menu: false,
      text: '',
      columntype: 'number',
      cellclassname: 'jqx-widget-header',
      cellsrenderer: this.numberRenderer,
      width: '4%'
    },
    {
      text: this.l('CustomerNumber'),
      datafield: 'customerNumber',
      cellsalign: 'center',
      width: '10%'
    },
    {
      text: this.l('CustomerName'),
      datafield: 'lastNameFirstCo'
    },
    {
      text: this.l('CustomerAddress'),
      datafield: 'address'
    },
    {
      text: this.l('CustomerAddress2'),
      datafield: 'address2'
    },
    {
      text: this.l('CustomerCity'),
      datafield: 'city'
    },
    {
      text: this.l('CustomerState'),
      datafield: 'state',
      cellsalign: 'center',
      width: '8%'
    },
    {
      text: this.l('CustomerZip'),
      datafield: 'zip',
      cellsalign: 'center',
      width: '10%'
    },
    {
      text: this.l('Active'),
      datafield: 'isActive',
      cellsalign: 'center',
      filtertype: 'checkedlist',
      filteritems: [{ value: true, label: 'YES' }, { value: false, label: 'NO' }],
      cellsrenderer: this.boolRenderer,
      width: '8%'
    }
  ];
  
  filters: {
    sorting: string;
    params: { startindex: number; endindex: number };
  } = {
      sorting: 'lastNameFirstCo asc',
      params: { startindex: 0, endindex: this.pageSize }
    };
	
	constructor(
    injector: Injector,
    private customerService: CustomerServiceProxy
  ) {
    super(injector);
  }

  
  ngOnInit(): void {
    this.obj = new FilterRule();
    this.initGrid();
    this.getCustomers();
  }
  
  initGrid() {
    this.customers = [];
    this.source = {
      datatype: 'json',
      datafields: [
        { name: '', type: 'number' },
        { name: 'customerNumber', type: 'string' },
        { name: 'lastNameFirstCo', type: 'string' },
        { name: 'address', type: 'string' },
        { name: 'address2', type: 'string' },
        { name: 'city', type: 'string' },
        { name: 'state', type: 'string' },
        { name: 'zip', type: 'number' },
        { name: 'isActive', type: 'boolean' }
      ],
      localdata: {},
      sortcolumn: 'lastNameFirstCo',
      sortdirection: 'asc',
      totalrecords: 10000000
    };
    this.dataAdapter = new jqx.dataAdapter(this.source);
  }
  
  
  getCustomers(from, isFromInit: boolean = false) {
    this.customerService
      .getCustomers(
        '',
        this.obj.condition,
        this.obj.field,
        this.obj.id,
        this.obj.input,
        this.obj.operator,
        this.obj.rules,
        this.obj.type,
        this.obj.value,
        this.filters.sorting,
        this.pageSize,
        this.filters.params.startindex
      )
      .debounceTime(500)
      .subscribe(result => {
        if (result.totalCount >= 0) {
          this.customers = result.items;
          // this.customers.slice(0, this.filters.params.startindex);
          // this.customers = this.customers.concat(result.items);
          this.source.totalrecords = result.totalCount;
          // this.customersGrid.updatebounddata('sort');
        } else {
          this.customers = [];
          this.source.totalrecords = 0;
        }

        
        if (isFromInit) {
          let lastIndex = this.pageSize;
           // load virtual data.
          this.rendergridrows = (params: any): any[] => {
           this.filters.params = params;

            this.customers = _.takeWhile(
              this.customers,
              customer => customer.id
            );
           
            return this.customers;
           };

          
          this.isGridDataPrepared = true;
          }
      });
  }
  
 }

Note – * I used PageSize = 20
* Showing 15 records in grid
* Issue is empty rows added while scrolling from rownumber 21 to 35 after that it is working fine.

[Author]

Posts