jQuery UI Widgets Forums Grid Grid: Virtual scrolling empty space

This topic contains 3 replies, has 4 voices, and was last updated by  Hristo 2 years, 1 month ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Grid: Virtual scrolling empty space #64932

    Deepak Singh Pundir
    Participant

    Hi JQX Team,

    I am implementing virtual scrolling in my project.
    I have seen some empty spaces after some scrolling (lets say startIndex=6 and endIndex=25). Some rows are not displayed even if grid has data to show.
    This issue is happening till startIndex=17 and endIndex=36 (where number of missing rows increases) but once scrolling reaches till startIndex=19 and endIndex=38, it again start working well.

    I made column height, row height and height of grid same as in demo page to have the same pagesize as in demo page.

    I checked the demo code of virtual scrolling where it is working perfectly.

    But when i modified the demo code like below:
    var generatedata = function (startindex, endindex) {
    var data = [];
    for (var i = startindex; i < endindex; i++) {
    var row = {};
    var productindex = Math.floor(Math.random() * productNames.length);

    data.push(row);
    }
    return data;
    }

    From:
    var generatedata = function (startindex, endindex) {
    var data = {};
    for (var i = startindex; i < endindex; i++) {
    var row = {};

    data[i] = row;
    }
    return data;
    }
    I got the same issue in the demo as well which is same as i am using in my project.

    Please check the issue and suggest.

    Regards,
    Deepak Pundir

    Grid: Virtual scrolling empty space #64950

    Dimitar
    Participant

    Hello Deepak Pundir,

    Thank you for your feedback. We will investigate the reported behaviour. However, we suggest you use the working approach (setting data as a JSON object, not an array).

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Grid: Virtual scrolling empty space #98848

    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.

    Grid: Virtual scrolling empty space #98890

    Hristo
    Participant

    Hello ravindra.vairagi,

    It looks like the returned data in the “rendergridrows” are not correct.
    About the mentioned issue relevant to the JavaScript example you could resolve it as you use data = {} and collect the data in the for loop as data[i] = row;.
    We do not have enough data for your example to reproduce it.
    I would like to suggest you check your data, do you collect data in an object (not in an array), you could try to resolve it in that way.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.