Add toolbar in the bottom of the header using jqgrid

Question

i want to add one more tool bar with different buttons in the bottom of the header. is there any possibilities?

used

 toolbar: [true,"top"] or toolbar: [true,"bottom"] 

its showing same toolbars... in the bottom toolbar contains Add, edit, delete buttons.. i want to make change in top toolbar contains ADD button only.. & bottom toolbar contains Edit, Delete, refresh, etc.,

Thank you,

Meade

Answer 1

Probably you misunderstood toolbar parameter of the jqGrid. Perhaps you want use Navigator having cloneToTop: true which works if you define additionally toppager: true jqGrid option. This option clone the pager div on the top of the jqGrid. After this one can easy remove some elements from the top or bottom "toolbar":

jQuery("#list").jqGrid({
    // some parameters
    toppager: true,
    // some other paremeters
}).jqGrid('navGrid','#pager',{cloneToTop:true});

var topPagerDiv = $("#list_toppager")[0];
$("#edit_list_top", topPagerDiv).remove();
$("#del_list_top", topPagerDiv).remove();
$("#search_list_top", topPagerDiv).remove();
$("#refresh_list_top", topPagerDiv).remove();
$("#list_toppager_center", topPagerDiv).remove();
$(".ui-paging-info", topPagerDiv).remove();

var bottomPagerDiv = $("div#pager")[0];
$("#add_list", bottomPagerDiv).remove();

The part "list" of different id names from the code above will be used because we use <table> element with id="list".

Jehanna

thank you so much Oleg. this is exactly want i needed. many thanks to u. u saved my time.. – Meade

Hai Oleg, Thank you. I also looking for this feature. Finally I got here. But Now the add button only Working correctly. edit and del buttons (only I tried) not working after moving the pager to top. Before it is working fine when pager is in bottom. May I know why? Do I need to do any changes? – Farmyard

@vissupepala: it would be better if you post the code which you use currently and which has the problem. It would be better if you open new question because reading code in the comment is too difficult. – Jehanna

@Oleg, Sorry Oleg, I gone through your another answer HERE. And I solved it. Now it is working for me. Thank you very much. – Farmyard

@vissupepala: Not a problem. It's important that all work now. You are welcome! – Jehanna

Hey why cloneToTop:true not cloning custom nav buttons? – Conventionalism

@CJRamki: It's because no custom navigation buttons exist during the cloning work. navGrid first creates all buttons on one pager and at the end clones all previously created buttons to another pager. You need just created custom buttons twice see here and here. You should just use the corresponding pager id as the parameter of navButtonAdd or inlineNav. – Jehanna

@Jehanna thanks for your reply. I got it in after some minutes from your another answers. – Conventionalism

@CJRamki: You are welcome! By the way you have right to vote about 30 answers per day (see here). Voting count in the main criteria for the searching engine. So by voting of all helpful answers and questions which you found on the stackoverflow you help other visitors of the stackoverflow. – Jehanna

yeah... sorry i missed to vote up... Here after Surely i will do all your valuable answers. :) – Conventionalism

@CJRamki: No problem. You can understand that I have enough high reputation which I can't use in any way, but I have to post many answers filled with links on another questions which will be not found mostly because of low voting. So voting is the basis of stackoverflow. Only other user decides which answers are helpful and so there should be shown on top and which one should be shown on the page 20 in the searching results... – Jehanna

@Jehanna yeah... I understood that... :) – Conventionalism

Let us continue this discussion in chat. – Conventionalism

Answer 2

From the Demo site:

HTML

Java Scrpt code

    jQuery("#myGrid").jqGrid({
  url:'server.php?q=1',
  datatype: "xml",
  colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
  colModel:[
    {name:'id',index:'id', width:55},
    {name:'invdate',index:'invdate', width:90},
    {name:'name',index:'name', width:100},
    {name:'amount',index:'amount', width:80, align:"right"},
    {name:'tax',index:'tax', width:80, align:"right"},      
    {name:'total',index:'total', width:80,align:"right"},       
    {name:'note',index:'note', width:150, sortable:false}       
  ],
  rowNum:10,
  rowList:[10,20,30],
  pager: '#pgmyGrid',
  sortname: 'id',
  viewrecords: true,
  sortorder: "desc",
  caption:"Toolbar Example",
  editurl:"someurl.php",
  toolbar: [true,"top"] //THIS IS IMPORTANT!
  });
  jQuery("#myGrid").jqGrid('navGrid','#pgmyGrid',{edit:false,add:false,del:false});

  $("#t_myGrid").append("<input type='button' value='Click Me' style='height:20px;font-size:-3'/>");

Stealing