Infinite Scroll angularjs-ux-datagrid example

by Wes Jones

HTML

<script src="https://rawgithub.com/webux/ux-angularjs-datagrid/master/build/latest/angular-ux-datagrid.js"></script>
<script src="https://rawgit.com/webux/ux-angularjs-datagrid/master/build/latest/addons/ux-datagrid-infiniteScroll.js"></script>
<script src="https://rawgit.com/webux/ux-angularjs-datagrid/master/build/latest/addons/ux-datagrid-scrollBar.js"></script>
<script src="https://rawgit.com/webux/ux-angularjs-datagrid/master/build/latest/addons/ux-datagrid-scrollBounce.js"></script>
<div data-ng-controller="simpleArray" data-ux-datagrid="items" class="datagrid" data-addons="infiniteScroll, scrollBar, scrollBounce" data-options="{infiniteScroll:{limit:1000}}">
    <script type="template/html" data-template-name="default" data-template-item="item">
        <div class="row"><span>{{item.id}}</span></div>
    </script>
</div>

CSS

html, body {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.datagrid {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    overflow: auto;
    border:1px solid #000000;
}

.datagrid-content {
    height: auto;
}

.datagrid-row > * {
    -webkit-transition: opacity 0.5s ease-out;
    -moz-transition: opacity 0.5s ease-out;
    -ms-transition: opacity 0.5s ease-out;
    -o-transition: opacity 0.5s ease-out;
    transition: opacity 0.5s ease-out;
}

.uncompiled > * {
    visibility: hidden;
    opacity: 0;
}

.compiled > * {
    opacity: 1;
}

.datagrid-chunk {
    opacity: 0;
    -webkit-transition: opacity 0.5s ease-out;
    -moz-transition: opacity 0.5s ease-out;
    -ms-transition: opacity 0.5s ease-out;
    -o-transition: opacity 0.5s ease-out;
    transition: opacity 0.5s ease-out;
}

.datagrid-chunk-ready {
    opacity: 1;
}

/*The rows above are standard use of the grid, now below we can style the loading row (the row that shows when doing infinite scroll, and other rows in the grid */
.loadingRow {
    background: url(../images/row-loader.gif) no-repeat center #FFFFFF !important;
}
.row {
    background-color:#efefef;
    height: 20px;
    line-height: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.row:nth-child(odd) {
    background-color:#dfdfdf;
}

JavaScript

window.simpleArray = function ($scope, $timeout) {
    var grid;
    $scope.items = [];
    
    $scope.addRecords = function(count) {
        var i = 0;
        while (i < count) {
            $scope.items.push({id: i});
            i += 1;
        }
    }
    // wait for a scroll to bottom event. Then update the data.
    // we can do it async like an ajax call or not.
    $scope.$on(ux.datagrid.events.ON_SCROLL_TO_BOTTOM, function () {
        // the limit in the html is set at 1000 records. SO after 1000 it will think it is done and no longer add more or show the loading row.
        if ($scope.items.length < grid.options.infiniteScroll.limit) {
             // we are doing a timeout here to simulate time that an ajax call may need to get the paginated data.
            $timeout(function () {
                $scope.addRecords(100);
            }, 100);
        }
    });
    // get an instance of the grid when it starts
    $scope.$on(ux.datagrid.events.ON_STARTUP_COMPLETE, function (event, inst) {
        grid = inst;
    });
    
    $scope.addRecords(100);
};

angular.module('app', ['ng', 'ux']);
angular.bootstrap(document, ['app']);