jQWidgets Forums

Forum Replies Created

Viewing 1 post (of 1 total)
  • Author
    Posts

  • ravindra.vairagi
    Participant

    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.

Viewing 1 post (of 1 total)