pagination using cloud firestore in ASP.NET Core
6 Replies
Hi Ahmed,
Sorry for the delay getting back to you.
We have analyzed your query and we could see that you like to perform the paging action at server side. While Performing paging it will send the skip and take query to the API. when using the UrlAdaptor, you need to return the data as JSON from the controller action and the JSON object must contain a property as result with dataSource as its value and one more property count with the dataSource total records count as its value.
To handle the Grid actions in the server side using URL Adaptor we have class named DataOperations. It will process grid actions such as Paging, Sorting, Searching, and Filtering. Since you are using the custom API for your requirement you can handle the server side actions as demonstrated below.
|
public ActionResult UrlDatasource([FromBody]DataManagerRequest dm)
// in the dm variable you can get the skip and take values sent from client side
{
// You need to perform the paging in your api and return the data as result and count below
. . .
return dm.RequiresCounts ? Json(new { result = DataSource, count = count }) : Json(DataSource);
}
|
Client side request in the network tab:
Before preparing sample for your query, could you please share the below details, which will be helpful for us to validate further about your requirement.
- Share the complete Grid code and server side code example
- Steps or documentation that you have used to create the fire store API
- If possible, please share the simple fire store API sample to integrate the Grid server side actions in the sample
Regards,
Manivel
Hi Ahmed,
The UrlAdaptor works on On-Demand, that helps us to improve the performance for large data application. Using this you can supply the records for current page only(10 records).While paging grid will request an AJAX POST for data to the server with the parameters of Skip and Take. You can use Dataoperations and DataManagerRequest or using your own logic you can process grid actions such as Paging, Sorting, Searching, and Filtering for the server-side actions and need to return the response as Object of result and count format. Please find the below code example screenshots for more information.
|
<div class="row">
<ejs-grid id="job_listing_grid" toolbar="@(new List<string>() {"Search" })" allowPaging="true" allowSorting="true" allowFiltering="true">
<e-data-manager url="/Home/UrlDataSource" adaptor="UrlAdaptor"></e-data-manager>
<e-grid-filterSettings type="Menu"></e-grid-filterSettings>
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column>
<e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
<e-grid-column field="Freight" width="150"></e-grid-column>
<e-grid-column field="IsClose" width="120" displayAsCheckBox="true" textAlign="Left"></e-grid-column>
</e-grid-columns>
</ejs-grid>
</div> |
For initial rendering and paging:
Grid will request the server with the corresponding skip and take values contains the information for number of records need to be returned from the server.
While performing sorting:
Grid will request the server with sorting columns information along with the paging details.
While performing searching:
Grid will request the server with searching information information along with the paging details.
While performing Filtering:
Grid will request the server with filtering information along with the paging details.
If you are using the API calls to perform Grid action from the server, we suggest you to use 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. On setting the data source in this format, the ‘dataStateChange’ event will be triggered with corresponding query for every Grid action performed like Paging, Sorting and Filtering..etc. Using this you can send the queries in your required format to your API, process and return the result and then assign the returned result to the Grid’s dataSource property as an object of result and count properties. Please find the below code example, screenshots for more information.
|
@{
ViewData["Title"] = "Home Page";
}
<div class="row">
<ejs-grid id="job_listing_grid" toolbar="@(new List<string>() {"Search" })" allowPaging="true" dataStateChange="dataStateChange" created="created" allowSorting="true" allowFiltering="true">
<e-grid-filterSettings type="Menu"></e-grid-filterSettings>
<e-grid-columns>
. . .
</e-grid-columns>
</ejs-grid>
</div>
<script>
var grid;
function getData(gridquery) {
. . .
// based on the grid query we have form the url and get the result you can generate query based on your service
var ajax = new ej.base.Ajax(
. . . );
ajax.send();
ajax.onSuccess = data => {
if (grid.element !== undefined) {
var final = JSON.parse(data);
// finally return the value as result(JSON Object) and count(total count) pair
grid.dataSource = { result: final.value, count: final.count };
}
};
}
function dataStateChange(state) {
// get grid queries from the Grid action
getData(state); // trigger for every grid action (page, sort, ect.,)
}
function created() {
grid = this;
var state = { skip: 0, take: 10 };
getData(state); // for initial grid settings
}
</script> |
For initial rendering and paging:
While performing sorting:
While performing filtering:
While performing searching:
Regards,
Manivel
SIGN IN To post a reply.
