Ng-grid: Start and End Items for a Grid

    With my recent experience using ng-grid, I came up with two dynamic variables that would display based on the location of where they were in relationship to a particular page. I wasn't sure how to find a specific example on this. Since most might wrap this up with pagination concept it's difficult to find something on this for Ng-grid.. Not that I need an example but I like to think of them as separate, or as metadata.

Dependency
     I could have made the dependency on a ajax  return call but I had multiple ways for the Grid data to be insert, so rather than set it at that point I just hooked in the dom. If you wanted to go the other route just change the self.domAccessProvider call  to whatever you name your data object in the grid . As for the start number this is easier to handle, so there is no dependencies.

Solution
  $scope.endItem = function () {
        var self = this;
        //Last page...
        if (self.maxPages() == self.pagingOptions.currentPage) {
            return self.totalServerItems;
        }
        var Item = ((self.pagingOptions.pageSize === "All") ? 150 : self.pagingOptions.pageSize);
        if ((self.domAccessProvider.grid.data.length > Item) || (Item === 150))
            return (self.domAccessProvider.grid.data.length);
        else
            return (Item * self.pagingOptions.currentPage);
    };
    $scope.startItem = function () {
        var self = this;
        var Item = ((self.pagingOptions.pageSize === "All") ? 150 : self.pagingOptions.pageSize);
        var current = self.pagingOptions.currentPage;
        return ((current - 1) * Item) + ((current === 1) ? 1 : 0);
    };
If you look at Ng-grid's Footer template, all you need to do is call endItem and startItem in your controller.

Notes
    "All" is little of a hack that I used to allow for text values in Ng-grid to handle since the pagingOptions.pageSizes is more appropriately setup to handle integers. Insight I probably should make the "All" number a function but the scope of these two functions is already very small otherwise I would.

Resources
I have none, this was all me baby ;) 

Popular posts from this blog

UI-Bootstrap Collapsible Sticky Footer

Installing Windows on Acer chromebook 15 cb3-532

Aspetcore: NLog with Postgresql