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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

ejGrid paging with Angularjs AJAX and webAPI

Thread ID:

Created:

Updated:

Platform:

Replies:

125380 Aug 11,2016 02:04 PM UTC Aug 17,2016 12:45 PM UTC JavaScript 4
loading
Tags: ejGrid
Jemmy Lu
Asked On August 11, 2016 02:04 PM UTC

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.

Ragavee U S [Syncfusion]
Replied On 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. 


Jemmy Lu
Replied On 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!


Jemmy Lu
Replied On 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!

Ragavee U S [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;