Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
520
IgGrid Angaulr2 remote paging approac
posted

Has anyone managed to get remote paging working with an angular2 example?

I'm setting the gridOptions in the component constructor

export class RowComponent  {
    private gridOptions: IgGrid;
    private pageIndexChanging: any;
    private id: string = "grid";
    private pageSize: number = 500;


 rows: any[];
 
 constructor() {

 this.gridOptions = {
            dataSource: this.rows || [],
            width: "100%",
            height: "600px",
            autoGenerateColumns: false,
            columns: [
                { key: "RowId", headerText: RowId" },
  .........

 }

Then later on setting the datasource when the service I subscribe to returns.


this.Service.getRows().subscribe(rows => this.gridOptions.dataSource = rows);

This is working fine.

I plan to use the pageIndexChanging event to refresh the datasource when the user pages.


How can I programmaticlaly set the TotalRowCount to enable paging?

When I try to add responseDataKey and recordCountKey I get an angaulr error on the igGrid saying it can't diff [object object]

Parents
No Data
Reply
  • 3995
    Verified Answer
    Offline posted

    Hello,

    This is an awesome approach.

    The inconsistency you are facing is related to the fact that the paging requires object as a data source, where you have to provide a records and total count properties, but angular requires array.

    To avoid that error one we have to bind the igniteui angular grid to array. And to specify the row count you have to use the data source method totalRecordsCount.

    Note that totalRecordsCount is specified before the pager is renderd and applying the new data source from the response is through the grid options.

    I'm attaching a sample, which you can run with npm install and npm start.

    If you have more questions on this please let me know.

    angular2.0.0_remote_paging.zip
Children