[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.

[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

[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]

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);
    });
  }

[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]

This doesnt appear to be true. I managed to get this working via

      let rowData = null;
      this.jqxGrid.rendergridrows((obj) => {
        rowData = obj.data;
        return obj.data;
      });
      this.jqxGrid.onSort.subscribe((event) => {
        const col = event.args.sortinformation.sortcolumn;
        const descending = event.args.sortinformation.sortdirection.descending === true;
        rowData.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 may have changed in the last 3 years. But this appears to be working for me.

[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]

any update on this? I’m after the same thing.

I’m working on an inifinte scroll, which I have working. In the rendergridrows event, if the endindex is greater than the total data length I have – 100, then I grab more data from the server.

I havent found a scroll event, and this is the only way I’ve discovered to hook this up.

At this point, I could use deferred scrolling, as the user can only scroll to known data, when they reach the end (or near it), I block the UI and get more data. at no point can the scroll past the known dataset.

[revenParticipant]

managed to get it to work with
[panels]=”[{ min: 150, size: ‘70%’, collapsible:false}, { min: paneSize, size:paneSize, collapsed:true }]”
paneSize I set in code via

ngOnInit(){
    this.calcPaneSize();
  }

  paneSize: number;
  calcPaneSize():void {
    let width = this.container.nativeElement.clientWidth - 300;
    if(isNaN(width) || width < 650) width = 650;
    else if(width > 1000) width = 1000;
    this.paneSize = width;
  }
  @HostListener('window:resize', ['$event'])
  onResize(event) {
      this.calcPaneSize();
  }

just incase anyone has a similar issue.

[Author]

Posts