how to create a nggrid custom footer

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.



ngGrid How can I create filters on multiple columns like Excel Data Filter?

We are using ngGrid. I wanted to know if there is a way to create multi column filter like in Excel? Have been searching on the net but most that I could find was having a single text box filter for f

ngGrid: how to check whether row is selected or not

I have grid implemented using ngGrid, and now I want to make it editable only if the row is selected using checkBox is checked, how to find whether the checkbox is checked or not in ngGrid to make cel

How to hide default footer and display custom footer?

I created a custom theme , I want to hide the default footer for page created with this theme , but when I comment out the code to display footer in theme.html , then it hides footer for all the pages

Android – How to add footer from xml layout to a custom activity to display it in all activities?

I want to create a custom activity to display a footer to all activities that extend it. I have created an XML layout called footer.xml How could I add it to this custom activity ? public class Custom

How can I create a custom Repeater that displays Header, Footer based on properties?

I want to create a Repeater that displays the header/footer based on properties, only if the DataSource is empty. public class Repeater : System.Web.UI.WebControls.Repeater { public bool ShowHeaderOnE

nggrid how can I disable/enable individual column

I have a nggrid with a name and an age column with some data. so it looks like this: Name | Age 50 | 50 : age field has green background because name and age col have same value How can I make the a

How to create a top-footer and footer using foundation, just like foundation website

I am new to CSS and fronted framework. How to create a top-footer, subscription part and footer using foundation, as similar as the one in foundation website. I had tried the below using foundation cs

CSS how to create unveilable footer

i want to create footer like footer on elementaryos.org i don’t know what css code that make the footer below the page container and will be unveiled when we scroll it down. <!doctype html> <

Yii CGridView custom footer

I am using CGridView to show data in grid format, but i am not able to create a custom footer, the code that i am using, <?php $this->widget(‘zii.widgets.grid.CGridView’, array(‘dataProvider’ =&

How to create Header/Footer

I am a day 1 UI guy(started web design today only), want to design a header/footer(for pages in my application) for my app. I read that using Javascript/JQuery we can do that, but on googling I did n

Answers

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>

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>"

Here is how I hid the PageSize picker.

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