server side page "no data to display"

[revenParticipant]

I’m trying to get server side paging to work.

My code is

      this.jqxGrid.pageable(true);
      this.jqxGrid.virtualmode(true);
      this.jqxGrid.pagesizeoptions([250, 500, 1000, 2000, 5000]);
      let source = {
        datatype: 'json',
        datafields: this.dataFields,
        cache: false,
        url: url,
        totalrecords: totalRecords,
        formatData: (data) => {
          if (this.datalistType.uniqueIdentiferColumn)
            data[this.datalistType.uniqueIdentiferColumn] = this.lastRowIdentifier;
        },
        beforeSend: (jqXHR, settings) => {
          jqXHR.setRequestHeader('Authorization', 'Bearer ' + this.session.token);
        },
        downloadComplete: (edata, textStatus, jqXHR) => {
          this.lastRowIdentifier = jqXHR.getResponseHeader('x-last-record');
        },
        rendergridrows: function (obj) {
          return obj.data;
        },
        beforeprocessing: (data) => {
          source.totalrecords = this.datalistType.totalRecords;
        }
      };
      this.dataAdapter = new jqx.dataAdapter(source);

the pager is showing the correct number of pages, and I can cycle through the pages, however
1. The jqxgrid shows “No data to display”
2. The server is only called once to get the first page, a page change event isnt contacting the server for a new page

If I turn off virtualmode (I’m not 100% sure what this is exactly… documentation could do with flushing out), and exclude the rednergridrows function. The data is displayed, but its limited the the page size, and shows the count as the page size. ie I cant change pages as it only thinks theres one page worth of data.

Also a requirement by PM is for client side filtering/sorting on the current page. So when a user sorts, they are only sorting that page and not the complete dataset (I know its strange, but its a requirement from PM, so it has to be done). Worst case I call a sort on the server but ideally since the data is on the client, if I could keep the sort in the client it would be better.

[revenParticipant]

fixed the no data, I stupidly had renderdata in the source, and not in on the jqxgrid itself.

so now my code is

      this.jqxGrid.virtualmode(true);
      this.jqxGrid.pageable(true);
      this.jqxGrid.pagesizeoptions([3, 10, 50, 100, 250, 500, 1000, 2000, 5000]);
      let source = {
        datatype: 'json',
        datafields: this.dataFields,
        cache: false,
        url: url,
        totalrecords: totalRecords,
        formatData: (data) => {
          if (this.datalistType.scrollIdentifier && this.lastRowIdentifier)
            data[this.datalistType.scrollIdentifier] = this.lastRowIdentifier;
          data['rows'] = data.pagesize;
        },
        beforeSend: (jqXHR, settings) => {
          jqXHR.setRequestHeader('Authorization', 'Bearer ' + this.session.token);
          this.isLoadingData = true;
        },
        downloadComplete: (edata, textStatus, jqXHR) => {
          this.lastRowIdentifier = jqXHR.getResponseHeader('x-last-record');
          this.isLoadingData = false;
        },
        beforeprocessing: (data) => {
          source.totalrecords = this.datalistType.totalRecords;
        }
      };
      this.jqxGrid.rendergridrows((obj) => {
        return obj.data;
      });
      this.dataAdapter = new jqx.dataAdapter(source);

This also has made the server side paging work, and I can now page through that.

But for some reason the grid header row has visbility:none set.
I can turn this off in chrome debugger.. not sure what is turning this off though.

Once that is enabled, I’m still left without being able to sort the data. clicking the columns nothing happens, (sort is turned on in the <jqxGrid> element in the HTML).

Also can I turn off “Go to page” in the pager? Our backend doesnt support jumping to a specific page, it needs a special index to say where to start counting from, so all I can do is next/previous page. I know I can create a custom pager, but wonder if I could just turn off this one thing, and keep the next/previous, page count, show rows: [].

[revenParticipant]

closer. sorting works fine on the first page. but any other page, the data in the grid isnt sorted (well it is sorted in the sort function, but never updated on screen).

my dataadapter looks like this

let src: any =
      {
        localdata: this.gridData,
        datatype: 'array',
        datafields: this.dataFields,
        totalrecords: this.datalistType.totalRecords
      };
      this.dataAdapter = new jqx.dataAdapter(src);

in my sort function im sorting like

    const col = event.args.sortinformation.sortcolumn;
    const descending = event.args.sortinformation.sortdirection.descending === true;
    this.gridData.sort((a, b) => {
      if (a[col] > b[col])
        return descending ? -1 : 1;
      else if (a[col] < b[col])
        return descending ? 1 : -1;
      return 0;
    });

This works completely fine for the first page, if I navigate to another page, it doesnt work, if I navigate back to the first page, it works. So its not limited to the first page load, its limited to the actual first page…. no clue why.

[revenParticipant]

I also have a rendergridrows function like this

    this.jqxGrid.rendergridrows((obj: any) => {
      this.gridData = obj.data ? obj.data : [];
      return this.gridData;
    });

and I have loadPage function like

  loadPage(pageIndex: number = 0): void {
    let url = this.getUrl(pageIndex);
    this.http.get(url).subscribe((res) => {
      this.gridData = (res as any);
      let src: any =
      {
        localdata: this.gridData,
        datatype: 'array',
        datafields: this.dataFields,
        totalrecords: this.datalistType.totalRecords
      };
      this.grid.clearselection();
      this.grid.removesort();
      this.dataAdapter = new jqx.dataAdapter(src);
    });
  }

[HristoParticipant]

Hello reven,

On the first side, I would like to mention that with the “virtualmode” the data is loaded on demand.
Also, I would like to ask you are you sure that you want to display at the browser the jqxGrid with 1000, 2000 or 5000 records at the same time?
It is not humanreadable and this could cause a performance issue or you want to set the “totalrecords” of the jqxGrid.

About the headers of the columns could you check for “showheader” property and its value?
There is no built-in option to hide the pager.
As you mentioned already you could create a custom pager on the desired way.

Another question does the rendergridrows callback is invoked when you go to another page and especially your logic “this.gridData.sort”?
Is there any error message in the console?

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[revenParticipant]

1. yes our product requires up to 5000 records on a single page, I’ve tested the grid with an infinite scroll and many many thousands of records, I had no issues, but PM wanted it paged instead of infinite scroll. I havent seen any performance issues with 5000 records. Most people would use the default of 250, but we require up to 5000.

2. I’ll look into showheader, I can force this visible with css, so its not a huge deal, but I’m sure showheader(true) will fix it

3. I’ve removed the unnecessary items from the pager via CSS

4. The rendergridrows is called when the page is changed, but it is never called when the sort is done. It’s not called on the first page when the sort works, so I didnt think this was needed when the sort occurs? Ive tried setting a new dataadapter in the on sort method, but that resets the sort so you cant toggle ascending/descending since it is always ascending in the sort method is called after a new dataadapter is set.

[revenParticipant]

2. confirmed showheader(true) fixed that issue.

heres some console.log statements showing the methods being called, there are no errors in the console.

loading page: 0
input-datalist.component.ts:100 rendered grid rows!
input-datalist.component.ts:382 sorting: recipient, descending: false
input-datalist.component.ts:382 sorting: recipient, descending: true
input-datalist.component.ts:100 rendered grid rows!
input-datalist.component.ts:406 loading page: 1
input-datalist.component.ts:382 sorting: null, descending: false
input-datalist.component.ts:100 rendered grid rows!
input-datalist.component.ts:100 rendered grid rows!
input-datalist.component.ts:382 sorting: classification, descending: false
input-datalist.component.ts:382 sorting: classification, descending: true
input-datalist.component.ts:382 sorting: classification, descending: false
input-datalist.component.ts:382 sorting: classification, descending: true

[HristoParticipant]

Hello reven,

The rendergridrows is used with a virtual mode.
If you want to update the preview of the current page with sorting you could use the updatebounddata method with argument “sort”.
I would like to suggest you look at this demo:
https://www.jqwidgets.com/jquery-widgets-demo/demos/php/serverfiltering_paging_and_sorting.htm?light
It demonstrates the right approach of using filtering, paging and sorting features in virtualmode.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[revenParticipant]

thanks, updatedbounddata(‘sort’) was the key i was missing.

for anyone else who may run into this, heres my code

  onSort(event): void {
    if (this.jqxGrid.virtualmode() !== true)
      return;
    const col = event.args.sortinformation.sortcolumn;
    const descending = event.args.sortinformation.sortdirection.descending === true;
    if (!col)
      return;

    (this.gridDataFiltered ? this.gridDataFiltered : this.gridData).sort((a, b) => {
      if (a[col] > b[col])
        return descending ? -1 : 1;
      else if (a[col] < b[col])
        return descending ? 1 : -1;
      return 0;
    });
    this.jqxGrid.updatebounddata('sort');
  }

My page loads a datalist based on json from the server, and can load data from that json if supplied, or it can be loaded form a URL specified by that json, or it can be paged data specified by a url in that json. So thats why I have to check if its virtual or not as it may or may not be.

[Author]

Posts