jQuery UI Widgets › Forums › Grid › Grid: Virtual scrolling empty space
Tagged: array, data, data source, grid, jqxGrid ;, scrolling, source, virtual mode, virtual scrolling, virtualmode
This topic contains 3 replies, has 4 voices, and was last updated by Hristo 6 years, 12 months ago.
-
Author
-
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 PundirHello 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,
DimitarjQWidgets team
http://www.jqwidgets.com/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.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 usedata = {}
and collect the data in the for loop asdata[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 HristovjQWidgets team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.