Implementing server side pagination without DataManager

[Sandeep G]

I am trying to implement data grid with server side pagination. How to update url query params on change in pagination, filter, sorting and make ajax call

With the below code I am getting error.

<ejs-grid

                  id="outlets-grid"

                  ref="outletGridRef"

                  :dataSource="

                    customersListRes.CustomerMaster && customersListRes.CustomerMaster.length > 0

                      ? customersListRes.CustomerMaster

                      : []

                  "

                  :pageSettings="pageSettings"

                  :allowPaging="true"

                  v-on:actionBegin="gridActionBegin($event)"

                  v-on:actionComplete="gridActionComplete($event)"

                  :dataStateChange="dataStateChange"

                >

                  <e-columns>

                    <e-column

                      field="AprovalStatus"

                      :headerText="$t('common.status')"

                      textAlign="Right"

                      width="90"

                    >e-column>

                    <e-column field="CustomerStatus" :headerText="$t('common.isactive')" width="120">e-column>

                    <e-column

                      field="CustomerCode"

                      :headerText="$t('outlet.outletcode')"

                      textAlign="Right"

                      format="C2"

                      width="90"

                    >e-column>

                    <e-column field="CustomerName" :headerText="$t('outlet.outletname')" textAlign="Right">e-column>

                    <e-column

                      field="OutletHierarchyName"

                      :headerText="$t('outlet.hierarchy')"

                      textAlign="Right"

                    >e-column>

                    <e-column

                      field="CategoryDescription1"

                      :headerText="updatedColumns('CategoryDescription1')"

                      textAlign="Right"

                    >e-column>

                    <e-column

                      field="CategoryDescription2"

                      :headerText="updatedColumns('CategoryDescription2')"

                      textAlign="Right"

                    >e-column>

                    <e-column

                      field="CustomerPrincipleCode"

                      :headerText="$t('outlet.customerprinciplecode')"

                      textAlign="Right"

                    >e-column>

                    <e-column

                      field="CustomerPrincipleCode"

                      :headerText="$t('outlet.contactperson')"

                      textAlign="Right"

                    >e-column>

                    <e-column

                      field="$t('common.contacts')"

                      :headerText="$t('common.contacts')"

                      textAlign="Right"

                    >e-column>

                  e-columns>

                ejs-grid>

[Praveenkumar Gajendiran]

Hi Sandeep, 

Thanks for contacting Syncfusion support. 

We checked your query at our end. In that we could see that you want to use the API calls to perform Grid action from the server, for this we suggest you to custom binding approach to bind data in the Grid. With this you can bind data from an API call by providing your own custom queries(as required by your API) and handle all the Grid actions(Sort, Page, Filter, etc. ) with it. The Grid’s custom binding approach is explained below, 

For using custom binding, you need to bind the response data(Grid data) returned from your API as an object of result(JSON data source) and count(Total data count) properties and set it to the Grid’s dataSource property.  

{ 

      result: [{..}, {..}, {..}, ...], //JSON data source 

      count: Total data count  

 } 

The ‘dataStateChange’ event will be triggered with corresponding query for every Grid action performed like Paging, Sorting and Filtering.., Based on this you can send the queries in your required format to your API, execute this query in server side and return the result as an object of result and count properties. 

 

The ‘dataSourceChanged’ event will be triggered while performing CRUD action in Grid. 

More details on custom binding can be checked in the below help documentation link, 

Custom binding documentation: https://ej2.syncfusion.com/vue/documentation/grid/data-binding/#custom-binding 

Online demo sample: https://ej2.syncfusion.com/vue/demos/#/material/grid/custom-binding.html 

 

We have prepared a simple sample based on this for your reference. 

  

Sample: https://codesandbox.io/s/customdatabinding-forked-59gms?file=/src/App.vue 

API links: https://ej2.syncfusion.com/vue/documentation/api/grid/#datastatechange  

                  https://ej2.syncfusion.com/vue/documentation/api/grid/#datasourcechanged 

                  https://ej2.syncfusion.com/vue/documentation/api/grid/#datasource 

Note:  The ‘dataStateChange’ event will not be triggered on Grid initial render. So for this case you need to return the data in the above mentioned format on initialization and assign it to the Grid’s dataSource property. 

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

Regards, 

Praveenkumar G 

[Jayasimha Chandra]

Hello, Syncfusion team

I am using angular-syncfusion22.1.34 now.

then, I have any issues.

Pagination doesn't work when change by API data.
Please solve this issue very fast.
I will wait your response.
Best regards

[Pavithra Subramaniyam]

Hi Jayasimha Chandra,

We have checked the custom binding behavior in our side, but it is still working fine. Please refer to the below demo link for more information.

https://ej2.syncfusion.com/angular/demos/#/material/grid/async-pipe

To validate further please share more details which will be easier to provide a better solution.

1. Share the full Grid code example
2. Ensure the “dataStateChange” event is triggered while pagination
3. Ensure the new set of records are sent from the service to the Grid properly
4. Is there any script error?
5. Share an issue reproducible sample if possible.