angular-ui/ui-grid

Ui Grid infinite scroll - infiniteScroll.dataRemovedTop() scrolls to top and then calls getDataUp() again

Open

#5.379 aberto em 5 de mai. de 2016

Ver no GitHub
 (0 comments) (0 reactions) (0 assignees)JavaScript (2.496 forks)batch import
help wanted

Métricas do repositório

Stars
 (5.395 stars)
Métricas de merge de PR
 (Nenhuma PRs mesclada em 30d)

Description

Hi,

We are using Ui-grid infinite scroll API and our code goes like this

var checkDataLength = (discardDirection, totalLength) => {

            $scope.grid.gridApi.infiniteScroll.saveScrollPercentage();

            if (discardDirection === 'up') {
                //var offSet = (requestParams.PageIndex - 1) * requestParams.PageSize
                var offset = $scope.data.length - $scope.grid.gridOptions.paginationPageSize;
                $scope.data = $scope.data.slice(offset);
                $scope.grid.gridOptions.data = $scope.data;
                $scope.firstPage++;
                $timeout(function () {
                    // wait for grid to ingest data changes
                    $scope.grid.gridApi.infiniteScroll.dataRemovedTop($scope.firstPage > 1, $scope.lastPage < $scope.totalPages);
                });
            } else {

                $scope.data = $scope.data.slice(0, $scope.grid.gridOptions.paginationPageSize);
                $scope.grid.gridOptions.data = $scope.data;
                $scope.lastPage--;
                $timeout(function () {
                    // wait for grid to ingest data changes
                    //$scope.grid.gridApi.infiniteScroll.saveScrollPercentage();
                    $scope.grid.gridApi.infiniteScroll.dataRemovedBottom($scope.firstPage > 1, $scope.lastPage < $scope.totalPages);
                });
            }
            //}
        };

        var getDataDown = () => {
            var promise = $q.defer();
            var onAjaxSuccess = (result): void => {
                console.log(result.data)
                var newData = result.data;
                $scope.grid.gridApi.infiniteScroll.saveScrollPercentage();
                $scope.data = $scope.data.concat(newData);
                $scope.grid.gridOptions.data = $scope.data;
                $scope.grid.gridApi.infiniteScroll.dataLoaded($scope.firstPage > 0, $scope.lastPage < $scope.totalPages).then(() => { checkDataLength('up', $scope.data[0].TOTAL_RECORD_COUNT); }).then(() => {
                    promise.resolve();
                });
            }
            $scope.lastPage++;

            requestParams.PageIndex = $scope.lastPage;
            $http.post($scope.grid.serviceUrl, requestParams).then(onAjaxSuccess);
            return promise.promise;
        };

        var getDataUp = () => {
            var promise = $q.defer();
            var onAjaxSuccess = (result): void => {

                var newData = result.data;
                $scope.grid.gridApi.infiniteScroll.saveScrollPercentage();

                $scope.data = newData.concat($scope.data);
                $scope.grid.gridOptions.data = $scope.data;
                $scope.grid.gridApi.infiniteScroll.dataLoaded($scope.firstPage > 0, $scope.lastPage < $scope.totalPages).then(() => { checkDataLength('down', $scope.data[0].TOTAL_RECORD_COUNT); }).then(function () {
                    promise.resolve();
                });
                $scope.grid.gridOptions.data = $scope.data;
            }

            $scope.firstPage--;
            requestParams.PageIndex = $scope.firstPage;
            $http.post($scope.grid.serviceUrl, requestParams).then(onAjaxSuccess);
            return promise.promise;
        }

The problem is when the grid is scroll down and next data set is loaded, the function infiniteScroll.dataRemovedTop causes the cursor to adjust on top again which inturn fires the getDataUp event and the previous page loads again.

However if I remove that function then scroll does not go up(a little should go up) and then manually i need to scroll up to load next page.

need urgent help for this bug

Guia do colaborador