Adding Jqgrid navButtonAdd icon to the top(cloned) navigator

Question

I am using navButtonAdd to have a column chooser in my jqgrid but it adds the button to the bottom navigation bar. Is it possible to add the same icon to the top of my cloned navigation bar. Here is my code...

jQuery("#grid").jqGrid({
         ......
         toppager: true,
         ....
    );  

jQuery("#grid").jqGrid('navGrid','#pager',
    {cloneToTop: true, edit:false, add:false, del:false, search:false},
        { }, { }, { }, { } );

jQuery("#grid").jqGrid('navButtonAdd', '#pager', {
    caption : "",
    buttonicon : "ui-icon-calculator",
    title : "Choose Columns",
    onClickButton : function() {
        jQuery("#grid").jqGrid('columnChooser');
    }
});

Rajab

Answer 1

If the toppager will be created it will have the id constructed from the grid id and "_toppager", so it will be "grid_toppager" in your case. So you should use

jQuery("#grid").jqGrid('navButtonAdd', '#grid_toppager', {...});

See here and here for more details and for demos.

Macaw

Thanks Oleg. I was able to fix it using same approach. var msgGrid = jQuery("#messagesGrid"); msgGrid.jqGrid('navButtonAdd', '#' + msgGrid[0].id + '_toppager_left', { }); – Rajab

@varaprakash: You are welcome! It's what I mean. By the way, if the id of the grid could have some special characters (which is not recommended) you should use '#' + $.jgrid.jqID(msgGrid[0].id) + '_toppager_left' instead (see about escaping or meta-characters here). – Macaw

Answer 2

For basic functionality, setting the toppager: true and cloneToTop: true would suffice as below.

$("#list").jqGrid({
    pager: '#pager',toppager: true  
});

$("#list").jqGrid('navGrid',"#pager",{
    cloneToTop:true
});

Dim