CODEWITHSUNDEEP
angularjsng-grid
HS1
HS1

Reputation: 658

Update ng-grid UI after data arrived from server

I am using ng-grid in my angularjs.

When I load data for the first time (when the controller is loading) the data arrives OK. But, when I try to refresh the data after a button is clicked the data doesn't changes in UI, but I saw in debug mode that the data in the scope changes.

Do I forget something?

My HTML:

<div ng-controller="PurchaseOrderController">

    <div class="gridStyle"  ng-grid="gridOptions"></div>
    <input name="" type="button" value="search" class="search_button" ng-click="SearchOrders();"></div>

Controller:

        $scope.SearchOrders = function () {

        if (!$scope.DateFrom) {
            $scope.p1= "a";
        }
        if (!$scope.DateTo) {
            $scope.p2= "b";
        }

        $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);




    }//END OF SEARCH ORDERS
       $scope.filterOptions = {
        filterText: "",
        useExternalFilter: true
    };
    $scope.totalServerItems = 0;
    $scope.pagingOptions = {
        pageSizes: [5, 10, 20],
        pageSize: 10,
        currentPage: 5
    };

    $scope.setPagingData = function (data, page, pageSize) {
        var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
        $scope.OrderData = pagedData;
        $scope.totalServerItems = data.length;
        if (!$scope.$$phase) {
            $scope.$apply();
        }
        $scope.$apply();
    };
    //END OF SERVER SIDE


    $scope.getPagedDataAsync = function (pageSize, page, searchText) {
        setTimeout(function () {
            OrderService.SearchOrders($scope.p1.Val, $scope.p2,
                $scope.SelectedOrder, $scope.SelectedPlant.Val, $scope.DateFrom, $scope.p3, $scope.p4).success(
                function (data) {
                    $scope.setPagingData(data, page, pageSize);
                });

            //$scope.setPagingData(data, page, pageSize); NEED TO BE RETURNED TO HTTP GET
        }, 100); //SET TIMEOUT
    };//END OF FUNCTION GET PAGED DATA

Upvotes: 0

Views: 6639

Answers (1)

Streetfights
Streetfights

Reputation: 103

$scope.gridOptions = {
      data : 'OrderData',
           ...
}

This watches that scope variable and updates the data accordingly.

Upvotes: 3

Related Questions