Grid with dynamic columns and server side paging/sorting/filtering

[SwapnilParticipant]

Hello,

I am trying to implement Angular grid component with Dynamic Columns and server side paging.
I tried all the examples available but still not able to make it work. I get error ERROR TypeError: Cannot read property ‘visiblerecords’ of null
I am planning to get the Columns and data fields dynamically from data, but for now, I added some dummy columns to test it works. Columns are dynamic and could be more than 50 columns.

below is my component.ts code

    DATA_FEED_REVIEW_URL = '/api/data-feeds';

    @ViewChild('datafeedReview', {static: true}) datafeedGrid: jqxGridComponent;
    showExceptions = true;
    totalExceptions;
    source: any = {
        url: <code>${this.DATA_FEED_REVIEW_URL}?showExceptions=${this.showExceptions}</code>,
        datatype: 'json',
        datafields: [
            {name: 'programId', type: 'number'},
            {name: 'programName', type: 'string'},
            {name: 'dataFeedId', type: 'number'},
            {name: 'dataFeedName', type: 'string'},
            {name: 'dataFeedTypeName', type: 'string'},
            {name: 'startDate', type: 'date'}
        ],
        root: 'data_feed_list',
        cache: false,
        beforeprocessing: (data) => {
          console.log('called before processing');
          this.source.totalrecords = data.total_count;
        },
        id: 'dataFeedId'
    };

    private getColumns(data: any): any {
      return [
          {text: 'Program Name', datafield: 'programName', align: 'left', cellsalign: 'left'},
          {text: 'Data Feed Name', datafield: 'dataFeedName', align: 'left', cellsalign: 'left'},
          {text: 'Data Feed Type', datafield: 'dataFeedTypeName', filtertype: 'list', align: 'left', cellsalign: 'left'},
          {text: 'Start Date', datafield: 'startDate', filtertype: 'date', align: 'center', cellsalign: 'center', cellsformat: 'd' },
          { text: 'End Date', datafield: 'endDate', filtertype: 'date', align: 'center', cellsalign: 'center', cellsformat: 'd'},
      ];
    }
    private getDataFields(data: any): any {
      return [
          {name: 'programId', type: 'number'},
          {name: 'programName', type: 'string'},
          {name: 'dataFeedId', type: 'number'},
          {name: 'dataFeedName', type: 'string'},
          {name: 'dataFeedTypeName', type: 'string'},
          {name: 'startDate', type: 'date'},
          {name: 'endDate', type: 'date'}
      ];
    }

    rendergridrows = (params: any): any => {
        return params.data;
    }

    onSort = (event: any): any => {
        this.datafeedGrid.updatebounddata('sort');
    }

    onFilter = (event: any): any => {
        this.datafeedGrid.updatebounddata('filter');
    }
    cellClick(event: any): void {
        if (event.args.columnindex === 1) {
            const rowData = this.datafeedGrid.getrowdata(event.args.rowindex);
        }
    }

    showExceptionOnlyRecords(val: boolean): void {
        this.source.url = <code>${this.DATA_FEED_REVIEW_URL}?showExceptions=${val}</code>;
        this.datafeedGrid.updatebounddata();
    }

    dataAdapter = new jqx.dataAdapter(this.source, {
        autoBind: true,
        loadComplete: (data) => {
            console.log('called  downloadComplete');
            const columns = this.getColumns(data);
            const rows = data.data_feed_list;
            const gridAdapter = new jqx.dataAdapter({
                datafields: this.getDataFields(data),
                id: 'dataFeedId'
            });
            this.datafeedGrid.hideloadelement();
            this.datafeedGrid.beginupdate();
            this.datafeedGrid.setOptions
            ({
                source: gridAdapter,
                columns: columns
            });
            this.datafeedGrid.endupdate();
            console.log('in downloadComplete');
        },
        // loadComplete: (data) => {
        //     console.log('called load complete');
        // },
        loadError: (xhr, status, error) => {
            console.log('called load error ');
        }
    });

html template :

<div class="col-md-11">
      <jqxGrid #datafeedReview (onCellclick)="cellClick($event)"
               [theme]="'nova'" [width]="'100%'" [pageable]="true" [pagesize]="20" 
               [pagesizeoptions]="[10, 20, 30, 40, 50]" [autoheight]="true" [sortable]="true"
               [altrows]="true"  [enabletooltips]="true"  [editable]="true" [virtualmode]="true" [rendergridrows]="rendergridrows"
               [selectionmode]="'multiplecellsadvanced'" (onCellclick)="cellClick($event)"
               (onSort)="onSort($event)" (onFilter)="onFilter($event)"></jqxGrid>
    </div>

I tried downloadCompelte as well as loadComplete method, but still no luck.

am I missing something here? Any help would be much appreciated.

Thanks,
Swapnil.

[SwapnilParticipant]

I played with the code little bit and now I can get the grid to display with columns but no data in the grid.
rendergridrows this function is not getting called.

Here is the updated code

    DATA_FEED_REVIEW_URL = '/api/data-feeds';

    @ViewChild('datafeedReview', {static: true}) datafeedGrid: jqxGridComponent;
    showExceptions = true;
    totalExceptions;
    rendergridrows = (params: any): any => {
        return params.data;
    }
    source: any = {
        url: <code>${this.DATA_FEED_REVIEW_URL}?showExceptions=${this.showExceptions}</code>,
        datatype: 'json',
        datafields: [
            {name: 'programId', type: 'number'},
            {name: 'programName', type: 'string'},
            {name: 'dataFeedId', type: 'number'},
            {name: 'dataFeedName', type: 'string'},
            {name: 'dataFeedTypeName', type: 'string'},
            {name: 'startDate', type: 'date'}
        ],
        root: 'data_feed_list',
        cache: false,
        beforeprocessing: (data) => {
          console.log('called before processing');
          this.source.totalrecords = data[2].total_count;
          this.source.datafields = this.getDataFields(data);
        },
        id: 'dataFeedId',
        virtualmode: true,
        rendergridrows: this.rendergridrows
    };

    private getColumns(data: any): any {
      return [
          {text: 'Program Name', datafield: 'programName', align: 'left', cellsalign: 'left'},
          {text: 'Data Feed Name', datafield: 'dataFeedName', align: 'left', cellsalign: 'left'},
          {text: 'Data Feed Type', datafield: 'dataFeedTypeName', filtertype: 'list', align: 'left', cellsalign: 'left'},
          {text: 'Start Date', datafield: 'startDate', filtertype: 'date', align: 'center', cellsalign: 'center', cellsformat: 'd' },
          { text: 'End Date', datafield: 'endDate', filtertype: 'date', align: 'center', cellsalign: 'center', cellsformat: 'd'},
      ];
    }
    private getDataFields(data: any): any {
      return [
          {name: 'programId', type: 'number'},
          {name: 'programName', type: 'string'},
          {name: 'dataFeedId', type: 'number'},
          {name: 'dataFeedName', type: 'string'},
          {name: 'dataFeedTypeName', type: 'string'},
          {name: 'startDate', type: 'date'},
          {name: 'endDate', type: 'date'}
      ];
    }

    onSort = (event: any): any => {
        this.datafeedGrid.updatebounddata('sort');
    }

    onFilter = (event: any): any => {
        this.datafeedGrid.updatebounddata('filter');
    }
    cellClick(event: any): void {
        if (event.args.columnindex === 1) {
            const rowData = this.datafeedGrid.getrowdata(event.args.rowindex);
        }
    }

    showExceptionOnlyRecords(val: boolean): void {
        this.source.url = <code>${this.DATA_FEED_REVIEW_URL}?showExceptions=${val}</code>;
        this.datafeedGrid.updatebounddata();
    }

    dataAdapter = new jqx.dataAdapter(this.source, {
        autoBind: true,
        loadComplete: (data) => {
            console.log('called  downloadComplete');
            const columns = this.getColumns(data);
            this.datafeedGrid.hideloadelement();
            this.datafeedGrid.beginupdate();
            this.datafeedGrid.setOptions
            ({
                columns: columns
            });
            this.datafeedGrid.endupdate();
            console.log('in downloadComplete');
        },
        // loadComplete: (data) => {
        //     console.log('called load complete');
        // },
        loadError: (xhr, status, error) => {
            console.log('called load error ');
        }
    });

and HTML template :

<div class="col-md-11">
      <jqxGrid #datafeedReview (onCellclick)="cellClick($event)"
               [theme]="'nova'" [width]="'100%'" [pageable]="true" [pagesize]="20" 
               [pagesizeoptions]="[10, 20, 30, 40, 50]" [autoheight]="true" [sortable]="true"
               [altrows]="true"  [enabletooltips]="true"  [editable]="true"
               [selectionmode]="'multiplecellsadvanced'" (onCellclick)="cellClick($event)"
               (onSort)="onSort($event)" (onFilter)="onFilter($event)"></jqxGrid>
    </div>

Please let me know if I am missing something.

[HristoParticipant]

Hello Swapnil,

I would like to mention a few things.
Using if the autoheight property with such amount of records on one page at once could cause a performance issue.
Especially, if you try to show 50 columns – this is a lot of elements in the DOM.
Also, about the Server-Side Paging I would like to suggest you look at this tutorial:
https://www.jqwidgets.com/angular-components-documentation/documentation/angular-serverside/angular-serverside-paging.htm?search=
I hope this will help.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[SwapnilParticipant]

Hello Histro,

I looked at the example but, it is only server side paging.

For me Server side paging and Dynamic columns both are working individually, but I am trying to implement Dynamic columns with Server side paging and that’s when I am facing issues.

Please let me know if you have example of this.

Thanks,
Swapnil.

[HristoParticipant]

Hello Swapnil,

I would like to suggest you look at this demo:
https://stackblitz.com/github/jqwidgets/angular/tree/master/grid/dynamiccolumns/
This demo is related to the Dynamic columns retrieved from the JSON file.
Unfortunately, we do not have such a demo that combines both.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[SwapnilParticipant]

hi Hristo,

Yes I thought so. Thanks for the suggestion.

I think these 2 functionalities won’t work together (I am not able to make it work).
I end up making a separate call to get columns info upfront in resolver and then doing Server side paging.

Thanks,
Swapnil.

[Author]

Posts