Angular / jqxGrid / Paging / pagerrenderer – TypeError: this.my_jqxGrid is undef

[Franck SerotParticipant]

Hi,
I try to custom the pager of a jqxGrid but I have the following error :
TypeError: this.my_jqxGrid is undefined

App.component.html

<jqxGrid #my_jqxGrid
    [source]="dataAdapter"
    [columns]="columns" 
    [width]="'100%'"
 
    [pagerrenderer]="pagerrenderer"
    [pagerheight]="34"
    [pagesize]="10"
    [pagesizeoptions]="['5', '10', '20']"
    [pagermode]="'default'"
    [pagerbuttonscount]="5"
    [pageable]="true"
    (onPagechanged)="pagechanged($event)"
    (onPagesizechanged)="pagesizechanged($event)"
    >
</jqxGrid>

App.component.ts

import { Component, ViewChild} from '@angular/core';

import * as $ from 'jquery';

import { jqxGridComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxgrid';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  @ViewChild('my_jqxGrid') my_jqxGrid: jqxGridComponent;

  command: any = [ { 'name': 'Franck'}];

  source: any = {
      localdata: this.command,
      datafields: [
        { name: 'name', type: 'string' },
      ],
      id: 'id',
      datatype: 'json',

      pagenum: 0,
      pagesize: 10,
      pager: (pagenum: any, pagesize: any, oldpagenum: any): void => {
          // callback called when a page or page size is changed.
      }
  };
  dataAdapter: any = new jqx.dataAdapter(this.source);
  columns: any[] = [
      { text: 'Name', datafield: 'name'},
  ];

  pagerrenderer(): string {
      const element = $('<div style="margin-top: 5px; width: 100%; height: 100%;"></div>');
      // The following line raises the errror : TypeError: this.my_jqxGrid is undefined
      const paginginfo = this.my_jqxGrid.getpaginginformation();
      for (let i = 0; i < paginginfo.pagescount; i++) {
          const anchor = $('<a style="padding: 5px;" href="#' + i + '">' + i + '</a>');
          anchor.appendTo(element);
          anchor.click(function (event) {
              const pagenum = parseInt($(event.target).text(), 10);
              this.my_jqxGrid.gotopage(pagenum);
          });
      }
      return element;
  }

  pagechanged(event: any): void  {
      const paginginfo = this.my_jqxGrid.getpaginginformation();
      console.log(paginginfo);
  }
  pagesizechanged(event: any): void  {
      const paginginfo = this.my_jqxGrid.getpaginginformation();
      console.log(paginginfo);
  }
}

Thank you for your advises.
Best regards
Franck

[Ivo ZhulevParticipant]

Hi Franck Serot,

Instead of pagerrenderer(): string {...} use: pagerrenderer = (): string => {...}.

Regards,
Ivo

[Author]

Posts