Grid Paging

[Vasilije Dolic]

Hi,

I have a problem with grid refreshing (getting data from back end) when number of items per page in grid are changed from smallest to largest number of items.
Example (possible numbers of items per page are 5, 10, 15):
     Select 5 items per page and select the second page.
     Change to 15 items per page.
     number of rows is till 5 and it wont change until you change number of items per page again.

My Code:

<ejs-grid #grid [dataSource]='gridData' allowPaging='true' [pageSettings]='pageSettings'>

<e-columns>

<e-column field='id' headerText='ID' width=90></e-column>

<e-column field='serialNumber' headerText='Serial number' width=120></e-column>

</e-columns>

</ejs-grid>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

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

import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';

import { PageService, GridComponent } from '@syncfusion/ej2-ng-grids';

@Component({

selector: 'app-root',

templateUrl: 'app.component.html',

providers: [PageService]

})

export class AppComponent implements OnInit {

public pageSizes: number[] = [5, 10, 15];

public gridData: DataManager;

public pageSettings: Object;

@ViewChild('grid')

grid: GridComponent;

public ngOnInit(): void {

this.pageSettings = { pageCount: 10, pageSize: this.pageSizes[0], pageSizes: this.pageSizes};

this.gridData = new DataManager({

url: 'http://localhost:56901/api/Meters',

adaptor: new WebApiAdaptor

});

}

}

[Pavithra Subramaniyam]

Hi Vasilije, 

We have checked your query and we suspect that the cause of the issue may be records is not returned according to the updated pageSizes .  We have prepared a simple sample for your reference based on your query. Please refer to the code example and sample link. 

[component.ts] 

@Component({ 

    selector: 'my-app', 

    template: `<ejs-grid #grid [dataSource]='data' allowPaging=true [pageSettings]='pageSettings'> 

                    .     .     . 

                </ejs-grid>` 

}) 

export class AppComponent implements OnInit { 

    public data: DataManager; 

    public pageSettings: Object; 

    public pageSizes: number[] = [5, 10, 15]; 

    @ViewChild('grid') 

    public grid: GridComponent; 

    ngOnInit(): void { 

        this.pageSettings = { pageCount: 10, pageSize: this.pageSizes[0], pageSizes: this.pageSizes }; 

        this.data = new DataManager({ 

            url: 'http://localhost:54290/api/Values', 

            adaptor: new WebApiAdaptor 

        }); 

    } 

} 

[Homecontroller.cs] 

NorthwindDataContext db = new NorthwindDataContext(); 

        public object Get() 

        { 

            var queryString = System.Web.HttpContext.Current.Request.QueryString; 

            int skip = Convert.ToInt32(queryString["$skip"]); 

            int take = Convert.ToInt32(queryString["$top"]); 

            var data = db.Orders.ToList(); 

            return new { Items = data.Skip(skip).Take(take), Count = data.Count() }; 

        } 

Sample: https://github.com/Pavithra15/ej2-ng-grids-webapiadaptor 

If you are still face the issue could you please share more details on your issue or could you please reproduce the issue in the above sample  that will be helpful for us to provide a better solution as early as possible. 

Regards, 

Pavithra S. 

[Vasilije Dolic]

Hi,

Your example didn't solve the problem, but I have found out that the problem shows up only when grid pagination is set to the number that is higher than number of records in database returned from controller. (In my example I had 11 records and pagination is set to 15)

Regards,
Vasilije Dolic

[Pavithra Subramaniyam]

Hi Vasilije, 

We have checked your query and we have confirmed ‘while changing page size greater than total records grid did not refresh’ as a defect and logged the report for the same. The fix will be available in our patch release which will be rolled out by April second week, 2018. 

Regards, 

Pavithra S.