Add buttons to a new top toolbar?

Question

I'm trying to add buttons to a new top toolbar. I already have a toolbar at the top for search filtering, but I would like to place a new toolbar above it to add buttons for a menu.

The menu is the the same as the ones in the bottom left of the grid. Juse makes it easier for the user if they have row list set high, so they dont have to scroll down to the bottom.

What would be the best way to do this? Examples welcome, im pritty new to this.

This is my code to create the toolbar and buttons.

JS

// Toolbar
$("#customer_grid").jqGrid('filterToolbar', {searchOnEnter: false});

// Bottom left buttons
$("#customer_grid").jqGrid('navButtonAdd',"#customer_grid_pager",{caption:"Add Customer",title:"Add Customer",buttonicon :'ui-icon-plus',
            onClickButton:function(){

            }
    });

    $("#customer_grid").jqGrid('navButtonAdd',"#customer_grid_pager",{caption:"Clear",title:"Clear Search",buttonicon :'ui-icon-refresh',
            onClickButton:function(){
                    $("#customer_grid")[0].clearToolbar()
            }
    });
    $("#customer_grid").jqGrid('navButtonAdd',"#customer_grid_pager",{caption:"Close",title:"Close Search",buttonicon :'ui-icon-close',
            onClickButton:function(){

            }
    });

Many Thanks

Answer 1

First of all I recommend you to read this and this old answer which describe how the toppager works. If you use toppager:true jqGrid option the additional pager toolbar will be created above the searching toolbar. If you use cloneToTop:true option of the navigator all standard navigation buttons will be added in the both toolbars. Because the name of the toppager will be constructed based on the fix rule from the id of the grid: "list_toppager" for the grid id="list" (in your case "customer_grid_toppager") you can use the same navButtonAdd method which you use to add the button to the top navigation bar like to the bottom navigation bar. You should just use another id of the pager ("#customer_grid_toppager" instead of "#customer_grid_pager" in your case).

I modified the demo from the answer for you to the following demo, which do what you need:

The corresponding code follows:

var mygrid = $("#list"),
    pagerSelector = "#pager",
    mydata = [
       {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
       {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
       {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
       {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
       {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
       {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
       {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
       {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
       {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
       {id:"10",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
       {id:"11",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
       {id:"12",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
       {id:"13",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
       {id:"14",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
       {id:"15",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
       {id:"16",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
       {id:"17",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
       {id:"18",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
    ],
    myAddButton = function(options) {
        mygrid.jqGrid('navButtonAdd',pagerSelector,options);
        mygrid.jqGrid('navButtonAdd','#'+mygrid[0].id+"_toppager",options);
    };

mygrid.jqGrid({
    datatype: 'local',
    data: mydata,
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
    colModel:[
        {name:'id',index:'id',width:70,sorttype:'int',
         searchoptions:{sopt:['eq','ne','lt','le','gt','ge']}},
        {name:'invdate',index:'invdate',width:80,align:'center',sorttype:'date',
         formatter:'date',formatoptions:{srcformat:'Y-m-d', newformat:'d-M-Y'},
         srcfmt:'d-M-Y', datefmt:'d-M-Y',
         searchoptions: {
             sopt:['eq','ne','lt','le','gt','ge'],
             dataInit:function(elem) {
                 setTimeout(function() {
                     $(elem).datepicker({
                         dateFormat: 'dd-M-yy',
                         autoSize: true,
                         //showOn: 'button', // it dosn't work in searching dialog
                         changeYear: true,
                         changeMonth: true,
                         showButtonPanel: true,
                         showWeek: true
                     });
                 },100);
             }
         }},
        {name:'name',index:'name', width:100},
        {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
        {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
        {name:'total',index:'total', width:80,align:"right",sorttype:"float"},
        {name:'note',index:'note', width:150, sortable:false}
    ],
    height: '100%',
    width: 720,
    toppager: true,
    gridview: true,
    pager: pagerSelector,
    rowNum: 10,
    rowList: [5, 10, 20, 50],
    sortname: 'id',
    sortorder: 'asc',
    viewrecords: true,
    caption: 'Add buttons to both top and bottom toolbars'
});
mygrid.jqGrid('navGrid',pagerSelector,
              {cloneToTop:true,edit:false,add:false,del:false,search:true});
mygrid.jqGrid('filterToolbar',
              {stringResult:true, searchOnEnter:true, defaultSearch:'cn'});

myAddButton ({
    caption:"Add Customer",
    title:"Add Customer",
    buttonicon :'ui-icon-plus',
    onClickButton:function(){
        alert("Add Customer");
    }
});
myAddButton ({
    caption:"Clear",
    title:"Clear Search",
    buttonicon:'ui-icon-refresh',
    onClickButton:function(){
        mygrid[0].clearToolbar();
    }
});
myAddButton ({
    caption:"Close",
    title:"Close Search",
    buttonicon:'ui-icon-close',
    onClickButton:function(){
        alert("Close Search");
    }
});