how to create a nggrid custom footer

Question

I want to enable footers for ng-grid but I want to completely customize it and override what ng-grid does by default.

Basically, I just want a 'Load more...' link at at the bottom of the grid that will load more rows from the server according to what pagingOptions.pageSize is set to and append it to the bottom of the grid while dynamically expanding the viewport height so there is no scrollbar.

Is there a configuration hook for this, or where/how can I do this?

Thanks.

Answer 1

Although it is not listed in the API section of the ng-grid website, you can define a custom $scope.gridOptions.footerTemplate. Take a look a the source code and you will find (it is undefined, so it falls back to the default template as shown below):

 // the template for the column menu and filter, including the button.
 footerTemplate: undefined,

And here is the default template:

<div ng-show="showFooter" class="ngFooterPanel" ng-class="{'ui-widget-content': jqueryUITheme, 'ui-corner-bottom': jqueryUITheme}" ng-style="footerStyle()">
    <div class="ngTotalSelectContainer" >
        <div class="ngFooterTotalItems" ng-class="{'ngNoMultiSelect': !multiSelect}" >
            <span class="ngLabel">{{i18n.ngTotalItemsLabel}} {{maxRows()}}</span><span ng-show="filterText.length > 0" class="ngLabel">({{i18n.ngShowingItemsLabel}} {{totalFilteredItemsLength()}})</span>
        </div>
        <div class="ngFooterSelectedItems" ng-show="multiSelect">
            <span class="ngLabel">{{i18n.ngSelectedItemsLabel}} {{selectedItems.length}}</span>
        </div>
    </div>
    <div class="ngPagerContainer" style="float: right; margin-top: 10px;" ng-show="enablePaging" ng-class="{'ngNoMultiSelect': !multiSelect}">
        <div style="float:left; margin-right: 10px;" class="ngRowCountPicker">
            <span style="float: left; margin-top: 3px;" class="ngLabel">{{i18n.ngPageSizeLabel}}</span>
            <select style="float: left;height: 27px; width: 100px" ng-model="pagingOptions.pageSize" >
                <option ng-repeat="size in pagingOptions.pageSizes">{{size}}</option>
            </select>
        </div>
        <div style="float:left; margin-right: 10px; line-height:25px;" class="ngPagerControl" style="float: left; min-width: 135px;">
            <button class="ngPagerButton" ng-click="pageToFirst()" ng-disabled="cantPageBackward()" title="{{i18n.ngPagerFirstTitle}}"><div class="ngPagerFirstTriangle"><div class="ngPagerFirstBar"></div></div></button>
            <button class="ngPagerButton" ng-click="pageBackward()" ng-disabled="cantPageBackward()" title="{{i18n.ngPagerPrevTitle}}"><div class="ngPagerFirstTriangle ngPagerPrevTriangle"></div></button>
            <input class="ngPagerCurrent" min="1" max="{{maxPages()}}" type="number" style="width:50px; height: 24px; margin-top: 1px; padding: 0 4px;" ng-model="pagingOptions.currentPage"/>
            <button class="ngPagerButton" ng-click="pageForward()" ng-disabled="cantPageForward()" title="{{i18n.ngPagerNextTitle}}"><div class="ngPagerLastTriangle ngPagerNextTriangle"></div></button>
            <button class="ngPagerButton" ng-click="pageToLast()" ng-disabled="cantPageToLast()" title="{{i18n.ngPagerLastTitle}}"><div class="ngPagerLastTriangle"><div class="ngPagerLastBar"></div></div></button>
        </div>
    </div>
</div>

Answer 2

Here is how I did it inline. This custom footer removes the paging option while showing the current page, total, page first, next, previous and last buttons.

You put it in the options for the grid.

footerTemplate: "<div ng-grid-footer=\"\" class=\"ng-scope\"><div ng-show=\"showFooter\" class=\"ngFooterPanel ng-scope\" ng-class=\"{'ui-widget-content': jqueryUITheme, 'ui-corner-bottom': jqueryUITheme}\" ng-style=\"footerStyle()\" style=\"width: 600px; height: 55px;\">" +
            "<div class=\"ngTotalSelectContainer\" >" +
                "<div class=\"ngFooterTotalItems\" ng-class=\"{'ngNoMultiSelect': !multiSelect}\" >" +
                    "<span class=\"ngLabel\">{{i18n.ngTotalItemsLabel}} {{maxRows()}}</span><span ng-show=\"filterText.length > 0\" class=\"ngLabel\">({{i18n.ngShowingItemsLabel}} {{totalFilteredItemsLength()}})</span>" +
                "</div>" +
                "<div class=\"ngFooterSelectedItems\" ng-show=\"multiSelect\">" +
                    "<span class=\"ngLabel\">{{i18n.ngSelectedItemsLabel}} {{selectedItems.length}}</span>" +
                "</div>" +
            "</div>" +
                "<div class=\"ngPagerContainer ngNoMultiSelect\" style=\"float: right; margin-top: 10px;\" ng-show=\"enablePaging\" ng-class=\"{'ngNoMultiSelect': !multiSelect}\">" +

                   " <div style=\"float:left; margin-right: 10px; line-height:25px;\" class=\"ngPagerControl\">" +
                   "page {{pagingOptions.currentPage}} of {{maxPages()}} " +
                   " <button class=\"ngPagerButton\" ng-click=\"pageToFirst()\" ng-disabled=\"cantPageBackward()\" title=\"{{i18n.ngPagerFirstTitle}}\"><div class=\"ngPagerFirstTriangle\"><div class=\"ngPagerFirstBar\"></div></div></button>" +
                       " <button type=\"button\" class=\"ngPagerButton\" ng-click=\"pageBackward()\" ng-disabled=\"cantPageBackward()\" title=\"Previous Page\"><div class=\"ngPagerFirstTriangle ngPagerPrevTriangle\"></div></button>" +
                        " <button type=\"button\" class=\"ngPagerButton\" ng-click=\"pageForward()\" ng-disabled=\"cantPageForward()\" title=\"Next Page\" disabled=\"disabled\"><div class=\"ngPagerLastTriangle ngPagerNextTriangle\"></div></button>" +
                        " <button class=\"ngPagerButton\" ng-click=\"pageToLast()\" ng-disabled=\"cantPageToLast()\" title=\"{{i18n.ngPagerLastTitle}}\"><div class=\"ngPagerLastTriangle\"><div class=\"ngPagerLastBar\"></div></div></button>" +
                     
                      "  </div>" +
                "</div>" +
            "</div></div>"

Answer 3

Here is how I hid the PageSize picker.

.ui-grid-pager-row-count-picker {
  display: none !important;
}