Question

It seems Pager functionality is currently disabled for treegrid. But I would like to add some custom icons like export icon, refresh to the top pagination as shown below. Are there any other alternatives to achieve this functionality for treegrid as well. Thanks in advance…

Answer 1

First of all I would recommend you to read the answer which describe how to add toppager to the grid. You can do the same with tree grid.

The id of the toppager will be constructed from the grid id. If the grid id for example is “treegrid”, then the id of the toppager will be “treegrid_toppager”. The pager will hold tree parts: left, center and right. Because the toppager of the tree grid will be always empty you can save the place on the pager if you remove or hide the center part:

$('#treegrid_toppager_center').hide();

The next improvement in position of the texts in the navigator bar you can archive if you would include the text inside of <span> element which CSS styles you can define yourself. For example

$grid.jqGrid('navGrid', '#treegrid_toppager',
    {add: false, edit: false, del: false, search: false,
        refreshtext: '<span class="ui-pg-text">Refresh</span>'});
$grid.jqGrid('navButtonAdd', '#treegrid_toppager', {
    caption: '<span class="ui-pg-text">Columns</span>',
    buttonicon: "ui-icon-wrench",
    onClickButton: function () {
        this.jqGrid("columnChooser");
    }
});

and

.ui-jqgrid-toppager .navtable .ui-pg-div .ui-pg-text {
    position: relative;
    top: 1px;
    padding-right: 3px;
    float: left;
}

Additionally I find better to include one more additional CSS definition

.ui-jqgrid-toppager .navtable {
    padding-top: 1px;
    padding-bottom: 0px;
}

which can a little improve the position of the buttons in the toppager.

The results you can see on the following demo: