title: jqGrid navButtonAdd not working
body: <p>I have a <code>jqGrid</code> in my project and I would like to add custom buttons, but no button appears in the grid and as far as I see there is no syntax problem. I have tried to simplify my grid, but the button still did not appear. I use <code>Velocity</code> template engine, that's why I have the <code>$</code> symbol in my code, that does not refer to jQuery.
  I am using jqGrid 3.8.2.</p>
  
  <p>Here is how I construct the grid:</p>
  
  <pre><code>      &lt;script type="text/javascript"&gt;
  
                  function loadCompleteHandler(){
                      jQuery("#listTable").jqGrid('setGridHeight', Math.min(500,parseInt(jQuery(".ui-jqgrid-btable").css('height'))));
                  }
  
                  function select1() {
                      return ": ;false:no;true:yes";
                  }
  
                  function select2(){
                              return ": ; 1:Select1;2:Select2;3:Select3";
                  }
  
          var colModelData = [
                      {name:'1', index:'1',width:'5%', hidden: true, align:'center', sortable: false, resizable:false},
                      {name:'2', index:'2',width:'10%', align:'center', formatter: 'checkbox', sortable: false, editable: true, stype: 'select', edittype: 'checkbox', editoptions: {value: "Yes:No"}, searchoptions: { value: select1()}, resizable:false},
                      {name:'3', index:'3', width:'35%', sortable: false, resizable:false, defaultValue: ''},
                      {name:'4', index:'4', width:'30%', sortable: false, resizable:false, defaultValue: ''},
                      {name:'5', index:'5', width:'20%', sortable: false, defaultValue: '$selectedValue', stype: 'select', searchoptions: {value: select2()}, resizable:false},
                      ]
  
          jQuery(function(){
              jQuery("#listTable").jqGrid({
              url: '$urlManager.getURL("/myPath/My.json")' + '?param1=param1Value&amp;param2=param2Value',
              datatype: 'json',
              postData: {
                  filters: '{"groupOp":"AND","rules":' + 
                           '[{"field":"field3","op":"eq","data":"$selectedValue"}]}'
              },
              mtype: 'POST',
              colNames:['', '&lt;input type="checkbox" id="selectionCheckbox" onclick="checkboxClick(this)"&gt;', 'column3', 'column4', 'column5'],
              colModel : colModelData,
              width:'768',
              height: 500,
              pager: '#pagerDiv',
              gridview: true,
              rowNum: 50,
              rowTotal: 500,
              sortorder: 'desc',
              onSelectRow: function(id){
                      if (id){
                          if (id !== lastSel) {
                              jQuery('#listTable').restoreRow(lastSel);
                              jQuery('#listTable').editRow(id, true);
                              lastSel=id;
                          } else {
                              jQuery('#listTable').editRow(id, true);
                          }
                      }
                  },        
              editurl: '$urlManager.getURL("myPath/MyScreen.vm")',
              caption: 'Caption',
              hidegrid: false,
              viewrecords: true,
              loadComplete: loadCompleteHandler,
              ignoreCase: true,
              search: true,
              page: $page
          });
  
              jQuery(function(){
                  jQuery("#listTable").jqGrid('filterToolbar',{
                                      stringResult: true,
                                      searchOnEnter: false });
              });
  
  
              jQuery("#listTable").jqGrid('navGrid',"#pagerDiv",{edit:false,add:false,del:false})
                                  .jqGrid('navButtonAdd', '#pagerDiv', {caption: "Edit",
                                      onClickButton:function(){
                                          console.log('Button clicked');
                                      }});
      &lt;script type="text/javascript"&gt;
  
      &lt;table id = "listTable"&gt; &lt;/table&gt;
      &lt;div id = "pagerDiv"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Thanks in advance.</p>