How to use virtualmode with Server-Side paging

[jqwidgetuserParticipant]

1. The app.component.html defines the jqxGrid with virtualmode attribute set to true:

<jqxGrid #myGrid 
  [source]="dataAdapter" 
  [columns]="columns"
  [autoheight]="true" 
  [pageable]="true"
  [virtualmode]="true"
  [rendergridrows]="rendergridrows">
</jqxGrid>

2. The app.component.ts imports the HttpService and uses its generateData method to get the Products json data:

import { Component, ViewChild, ElementRef, AfterViewInit, OnInit }  from '@angular/core';
import { HttpService } from './http.service';
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;  

  source: any =
  {
    datatype: 'array',
    localdata: {},
    totalrecords: 1000000
  }

  columns: any[] =
  [
    { text: 'Id', datafield: 'id', width: 50 },
    { text: 'First Name', datafield: 'firstname', width: 120 },
    { text: 'Last Name', datafield: 'lastname', width: 120 },
    { text: 'Product', datafield: 'productname', width: 180 },
    { text: 'Quantity', datafield: 'quantity', width: 100, cellsalign: 'right' },
    { text: 'Unit Price', datafield: 'price', width: 100, cellsalign: 'right', cellsformat: 'c2' }
  ];

  dataAdapter: any = new jqx.dataAdapter(this.source);

  constructor(private http: HttpService) { }

  rendergridrows = (params: any): any[] => {
    let data = this.http.generateData(params.startindex, params.endindex);
    return data;
  }
}

3. The http.service.ts script returns the json data stored in data variable:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/internal/Observable';

@Injectable({
  providedIn: 'root'
})
export class HttpService {

  constructor(private http: HttpClient) { }

  generateData(startindex: number, endindex: number): any {
    let data = [
      {"id": 1, "firstname": "1 Regina", "lastname": "Bein", "productname": "Cappuccino", "price": 1, "quantity": 11},
      {"id": 2, "firstname": "2 Peter", "lastname": "Wilson", "productname": "Doubleshot", "price": 2, "quantity": 12},
      {"id": 3, "firstname": "3 Sven", "lastname": "Vileid", "productname": "Espresso", "price": 3, "quantity": 13},
      {"id": 4, "firstname": "4 Nancy", "lastname": "Winkler", "productname": "Cramel", "price": 4, "quantity": 14},
      {"id": 5, "firstname": "5 Regina", "lastname": "Winkler", "productname": "Caffe", "price": 5, "quantity": 15},
      {"id": 6, "firstname": "6 Petra2", "lastname": "Bein", "productname": "Tea", "price": 6, "quantity": 16},
      {"id": 7, "firstname": "7 Regina", "lastname": "Peterson", "productname": "Latte", "price": 7, "quantity": 17},
      {"id": 8, "firstname": "8 Beate", "lastname": "Fuller", "productname": "Espresso", "price": 8, "quantity": 18},
      {"id": 9, "firstname": "9 Shelley", "lastname": "Ohno", "productname": "Truffle", "price": 9, "quantity": 19},
      {"id": 10, "firstname": "10 Petra", "lastname": "Murphy", "productname": "Saavedra", "price": 101, "quantity": 20}
  ]
    return data;
  }

}

Now, instead of storing the json in data value I would like to make a http request to http server. To mimic it, I replace the generate method with:

  generateData(startindex: number, endindex: number): Observable<any> {
    return this.http.get('./assets/product.json');
  }

with the product.json file used to store the json data and it looks like:

[
    {"id": 1, "firstname": "1 Regina", "lastname": "Bein", "productname": "Cappuccino", "price": 1, "quantity": 11},
    {"id": 1, "firstname": "2 Peter", "lastname": "Wilson", "productname": "Doubleshot", "price": 2, "quantity": 12},
    {"id": 1, "firstname": "3 Sven", "lastname": "Vileid", "productname": "Espresso", "price": 3, "quantity": 13},
    {"id": 1, "firstname": "4 Nancy", "lastname": "Winkler", "productname": "Cramel", "price": 4, "quantity": 14},
    {"id": 1, "firstname": "5 Regina", "lastname": "Winkler", "productname": "Caffe", "price": 5, "quantity": 15},
    {"id": 1, "firstname": "6 Petra2", "lastname": "Bein", "productname": "Tea", "price": 6, "quantity": 16},
    {"id": 1, "firstname": "7 Regina", "lastname": "Peterson", "productname": "Latte", "price": 7, "quantity": 17},
    {"id": 1, "firstname": "8 Beate", "lastname": "Fuller", "productname": "Espresso", "price": 8, "quantity": 18},
    {"id": 1, "firstname": "9 Shelley", "lastname": "Ohno", "productname": "Truffle", "price": 9, "quantity": 19},
    {"id": 1, "firstname": "10 Petra", "lastname": "Murphy", "productname": "Saavedra", "price": 101, "quantity": 20}
]

Now instead of the regular json data the generateData method returns the Observable object. But it looks like, the rendergridrows method doesn’t know what to do with the Observable object returned by the generateData method and grid shows no data.
How to make the virtualmode and rendergridrows work with the http requests needed to query data from the remote server?

[HristoParticipant]

Hello jqwidgetuser,

If you change the source you need to use a new DataAdapter.
I would like to suggest you one tutorial for Server-Side paging.
Please, take a look at this tutorial:
https://www.jqwidgets.com/angular-components-documentation/documentation/angular-serverside/angular-serverside-paging.htm?search=

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[jqwidgetuserParticipant]

Thank you for the info!
According to this Angular Server-Side Paging tutorial, instead of using the source.localdata attribute the source.url attribute of the dataAdapter should be used. The dataAdapter will be sending the http-requests to the server directly.
How do we access the data received by the dataAdapter from http server? Is there a way to monitor when the data was received (it can take some time for the data to be prepred by the server and to be returned back)?

[HristoParticipant]

Hello jqwidgetuser,

The jqxDataAdapter provides useful callbacks, for example, the downloadComplete callback will be useful.
More details about it you could find in the API Documentation page:
https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdataadapter/jquery-data-adapter.htm?search=dataadapter
If you want to add extra parameters to the HTTP request then the formatData callback will be useful.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts