We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. jQuery
  4. ejGrid paging with Angularjs AJAX and webAPI

ejGrid paging with Angularjs AJAX and webAPI

Hi,I'm using ejGrid with angularjs and I have a MVC webAPI returns JSON like:
{
    Data:[{Id:1},{Id:2},Id:3},Id:4},Id:5}],
    Count:100
}

my question is it possible to archieve the pager shows the info like : 1 of 20 pages (100 items)
and when I click on the page ,send an AJAX request to the webAPI,
I read the document says totalRecordsCount is readonly,and also for sorting,load parts of data depends on page number instead of load all data once.
thanks.

6 Replies
RU Ragavee U S Syncfusion Team August 12, 2016 07:35 AM UTC

Hi Jemmy, 

We have created a grid sample with angularjs and WebAPI which can be downloaded from the below location. 


In the above sample, we have bound data source to the grid with the help of the webAPI adaptor. By using webAPI adaptor, the grid data will be fetched page by page using an inbuilt AJAX call. Please refer to the below documentation for more information. 



Regards, 
Ragavee U S. 


JL Jemmy Lu August 16, 2016 08:01 AM UTC

Thanks for replying!I would like to ask if the datamanager is able to combine with the promise?
Now i'm using angular factory like:
app.factory("OrderService", ["$http", "$q", function ($http, $q) {
    return {
        GetList: function (params) {
            var deferred = $q.defer();
            $http.post("/WebApi/Order/List", params)
            .success(deferred.resolve)
            .error(function (data, status, headers, config) {
                deferred.reject({ Data: data, Status: status });
            });
            return deferred.promise;
        },
    };
}]);

and in controller:

app.controller("OrderCtrl", ["$scope", "OrderService", function ($scope, OrderService) {
    $scope.filter = {};
    //Some filter fileds bind with input elements,include paging setting,sorting setting....

    OrderService.GetList($scope.filter).then(function (response) {
        $scope.data = response;        
       
    }, function (response) {
        //Errors here..
    });
}]);
and after some read I found there's a ej-pager directive and it seems not supports twoway binding?or I can combine it with the grid ?
Thanks for reading this!


JL Jemmy Lu August 17, 2016 04:19 AM UTC

After some trying I have resolved my question and I don't know if this is the current way to change the way pager shows :

function pagerClick(args)
{
    $scope.pager.currentPage = args.currentPage;
     $scope.pager.refreshPager();
    //AJAX request
     $scope.getOrders();
}

Thanks!

RU Ragavee U S Syncfusion Team August 17, 2016 12:45 PM UTC

Hi Jemmy, 

Thanks for your update. 

We suspect that you are using an external pager such that you would like to refresh the pager based on the data fetched and bound to grid. In such cases, the code example that you have used is correct. 

Whereas, if you would like to use the inbuilt pager that we have in our grid control, then we suggest you to get the update/refresh pager everytime within the actionComplete event of the grid. Please refer to the below code example. 

$scope.getOrders = function () { 
                return OrderService.GetList($scope.filter).then(function (response) { 
                    $scope.data = response.Items; 
                    count = response.Count; //get record count 
                }, function (response) { 
                    //Errors here.. 
                }); 
            }; 
            $scope.onComplete = function (args) { 
                if ((args.requestType == "refresh" || args.requestType == "paging")) { 
                    var pager = this.getPager().ejPager("instance");                     
                    if (args.requestType == "paging") $scope.filter = { top: 9, skip: args.startIndex, currentpage: args.currentPage };                                       
                    if(this.initialRender || args.requestType == "paging") $scope.getOrders(); 
                    setTimeout(function () {                         
                        pager.model.totalRecordsCount = count;//set the pager total records count 
                        pager.model.currentPage = $scope.filter.currentpage; 
                        //set additional settings for pager 
                        pager.refreshPager(); 
                    },0) 
                } 
            } 

The above code will be executed during initial data fetching and upon performing paging operation. The corresponding page data will be fetched and the grid pager will be updated accordingly. We have modified the previously updated sample with the above solution, which can be downloaded from the below location. 


Regards, 
Ragavee U S. 


MG Manoj Gadupudi October 23, 2019 09:56 AM UTC

Hi

I am using JavaScript Essential 1 Grid for angularjs project. I am binding grid from external api request, How can I set TotalNoOfRecords on client side once I get response from external API
Another point is, pager click to call external api to work as server side paging.

Your quick help is much appreciated.

DR Dinesh Rajendiran Syncfusion Team October 24, 2019 02:17 PM UTC

Hi Manoj, 
  
Thanks for contacting syncfusion support. 
  
Query: Need to bind grid using WebApi adaptor and achieve server side paging 
  
We have validated your query. By using the WebApiAdaptor we have bounded the data to the grid. In the WebApi adaptor the paging is made on the server side. From the server side we can send the  records and records count  to the client side . Please refer code snippet below. 
  
public PageResult<Orders> Get(ODataQueryOptions opts) 
        { 
            if (order.Count == 0) 
                BindDataSource(); 
            IEnumerable<Orders> dataSource = order; 
            var emp = order.AsQueryable(); 
            var count = emp.Count(); 
            if (opts.OrderBy != null) 
                emp = opts.OrderBy.ApplyTo(emp);  //perform sort 
            if (opts.Filter != null) 
                emp = opts.Filter.ApplyTo(emp, new ODataQuerySettings()).Cast<Orders>();  //perform filter 
            if (opts.InlineCount != null) 
                count = emp.ToList().Count; 
            if (opts.Skip != null) 
                emp = opts.Skip.ApplyTo(emp, new ODataQuerySettings());  //perform skip 
            if (opts.Top != null) 
                emp = opts.Top.ApplyTo(emp, new ODataQuerySettings());  //perform take 
  
  
            return new PageResult<Orders>(emp, null, count); 
  
        } 
  
  
div> 
    ………………………………… 
    
<div ej-grid id="Grid" e-width="500px" e-datasource="data" e-create="gridCreate" e-columns="col" e-allowpaging="true" e-pagesettings="pageset"> 
  
    ……………………………… 
</div> 
<script> 
     
    var operator = ""; 
    angular.module("GridCtrl", ["ejangular"]) 
        .controller("bodyCtrl", function ($scope) { 
            $scope.data = ej.DataManager({ 
                    url: "/api/Orders", 
                    adaptor: new ej.WebApiAdaptor() 
                }); 
        
            $scope.pageset = { pageSize: 3 }; 
        }) 
</script> 
  
  
  
We have shared an sample for your convenience along with WebApi documentation, please refer below links. 
  
  
  
If you need further assistance, please get back to us. 
  
Regards, 
Dinesh Rajendiran 


Loader.
Up arrow icon