Paging Does Not Work when pageCount is set in e-grid-pagesettings

I have a data grid with paging enabled.

I have set the page settings in my view with

  <e-grid-pagesettings pageCount="5" pageSizes="true"></e-grid-pagesettings>

The UI for the page exists and with more than 5 items in my grid it says that there are 2 pages, however, there are more than 5 items on the page.

Here is my view

<div class="content">
    <h3>Event Models</h3>
    <ejs-grid id="FlatGrid" toolbar="@(new List<string>() { "Add", "Edit", "Delete"})" actionFailure="onActionFailure"  actionComplete="actionComplete" allowPaging="true" >
        <e-data-manager url="@Url.Action("GetMetrics", "EventModels")" insertUrl="@Url.Action("Create", "EventModels")" updateUrl="@Url.Action("Update", "EventModels")" removeUrl="@Url.Action("Delete", "EventModels")" adaptor="UrlAdaptor"></e-data-manager>
        <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog" template="#dialogtemplate" showDeleteConfirmDialog="true"></e-grid-editSettings>
        <e-grid-pagesettings pageCount="5" pageSizes="true"></e-grid-pagesettings>
        <e-grid-columns>
            <e-grid-column field="name" headerText="Model Name" width="120"></e-grid-column>
            <e-grid-column field="projectName" headerText="Project" width="150"></e-grid-column>
            <e-grid-column field="fields" headerText="Fields" width="120"></e-grid-column>
        </e-grid-columns>
    </ejs-grid>
</div>

6 Replies 1 reply marked as answer

PG Praveenkumar Gajendiran Syncfusion Team February 12, 2021 08:59 AM UTC

Hi Nick,

Thanks for contacting Syncfusion support. 

Query: “The UI for the page exists and with more than 5 items in my grid it says that there are 2 pages, however, there are more than 5 items on the page.”

Based on your query and provided information, we suspect that your requirement is to display 5 records per page in the Grid. For this we suggest you to use pageSettings.pageSize property of Grid to achieve your requirement.

pageSettings.pageSize- Defines the number of records to be displayed per page.

pageSettings.pageCount- Defines the number of pages to be displayed in the pager container.

Please refer the below code snippet and API document for more information, 
Code snippet: 
<e-grid-pagesettings pageCount="4" pageSize="5"></e-grid-pagesettings> 

API Link:  https://ej2.syncfusion.com/javascript/documentation/api/grid/pageSettingsModel/#pagesize
                  https://ej2.syncfusion.com/javascript/documentation/api/grid/#pagesettings

If this is not meet your requirement , could you please explain/elaborate with more details about your requirement.   

Regards,
Praveenkumar G 



NP Nick Proud February 18, 2021 04:17 PM UTC

Nope. Still not working when configured as you described. There are 7 items on my page despite specifying pagecount=5 and pagesize=3



PG Praveenkumar Gajendiran Syncfusion Team February 19, 2021 11:06 AM UTC

Hi Nick,

Thanks for your update.

Based on your query, we have prepared a Grid sample with pageSettings feature, but we were unable to reproduce the reported problem/scenario at our end as the Grid with pagination was working properly. For your convenience we have attached the sample and screenshot so please refer the below sample for more information,

Sample: https://www.syncfusion.com/downloads/support/forum/162502/ze/sample_core1735871036.zip

Documentation Link:
https://ej2.syncfusion.com/aspnetcore/documentation/grid/paging/

Screenshot: 

 
 


So please share us the below information that will be helpful to validate further on this,  
1)                 Complete Grid rendering code. 
2)                 Syncfusion package version used. 
3)                 If possible share us a simple sample to replicate the problem or try reproducing it in the above provided sample. 

Regards,
Praveenkumar G 



NP Nick Proud February 20, 2021 08:27 PM UTC

I already provided my view code but here it is again. Note that I am using a UrlAdapter, which fetches data no problem, just won't allow paging. I suspect that if I don't use a URL adapter, the paging will work fine
<div class="content">
    <h3>Event Models</h3>
    <ejs-grid id="FlatGrid" allowPaging="true" toolbar="@(new List<string>() { "Add", "Edit", "Delete"})" actionFailure="onActionFailure"  actionComplete="actionComplete" >
        <e-data-manager url="@Url.Action("GetMetrics", "EventModels")" insertUrl="@Url.Action("Create", "EventModels")" updateUrl="@Url.Action("Update", "EventModels")" removeUrl="@Url.Action("Delete", "EventModels")" adaptor="UrlAdapter"></e-data-manager>
        <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog" template="#dialogtemplate" showDeleteConfirmDialog="true"></e-grid-editSettings>
        <e-grid-pagesettings pageCount="5" pageSize="3" ></e-grid-pagesettings>
        <e-grid-columns>
            <e-grid-column field="name" headerText="Model Name" width="120"></e-grid-column>
            <e-grid-column field="projectName" headerText="Project" width="150"></e-grid-column>
            <e-grid-column field="fields" headerText="Fields" width="120"></e-grid-column>
            <e-grid-column field="salt" headerText="Salt" width="120" visible="false"></e-grid-column>
        </e-grid-columns>
    </ejs-grid>
</div>

I am on 18.4.0.43

Marked as answer

NP Nick Proud February 20, 2021 08:41 PM UTC

Never mind I found the issue. When I'm using a data adapter I have to handle the paging server-side. Thanks for your help.

Issue was explained here: https://www.syncfusion.com/kb/4300/server-side-api-for-datamanager-operations


PG Praveenkumar Gajendiran Syncfusion Team February 22, 2021 06:25 AM UTC

Hi Nick, 
Thanks for the update. We are glad to hear that your query is resolved.

Please get back to us if you need any further assistance. 

Regards, 
Praveenkumar G. 


Loader.
Up arrow icon