title: Unable to see the left pager in the following jqGrid directive
body: <p>I am working for the jqGrid for the first time at all.I wanted to use it in my application with all its native features, like editing, deleting,a dding, sorting and all others.</p>
  <p>I came across this <a href="https://github.com/devginie/angular-jqgrid" rel="nofollow noreferrer">project</a>, which seems to be a basic implementation of jqGrid. It was a good starting point. However, I am having trouble displaying the Add, Delete, Search buttons in Left pager.</p>
  <p>I have tried setting the pager to true, setting it to an div-id.
  Tried setting nav grid options.
  Tried binding the .navGrid function to the pager element in directive.</p>
  <p>But the left pager won't show up at all. I have a related issue <a href="https://github.com/devginie/angular-jqgrid/issues/2" rel="nofollow noreferrer">here</a>.</p>
  <p>below is the entire code I have apart from the above directive.</p>
  <pre><code>&lt;!Doctype html&gt;
  &lt;html ng-app=&quot;poc&quot;&gt;
  &lt;head&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;jquery-ui.css&quot; /&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;ui.jqgrid.min.css&quot; /&gt;
      &lt;!--&lt;link rel=&quot;stylesheet&quot; href=&quot;http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css&quot;&gt;--&gt;
  
      &lt;script type=&quot;text/javascript&quot; src=&quot;jquery.min.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;angular.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;jquery.jqgrid.min.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;angular-jqgrid.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;app.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-controller=&quot;ctrl&quot;&gt;
      &lt;jq-grid dataset=&quot;myData&quot; options=&quot;myGridOptions&quot;&gt;&lt;/jq-grid&gt;
      &lt;div id=&quot;pager&quot;&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  
  angular.module(&quot;poc&quot;, ['angular-jqgrid']);
  angular.module(&quot;poc&quot;).controller('ctrl', function ($scope) {
      $scope.myData = [{ &quot;OrderID&quot;: &quot;10248&quot;, &quot;CustomerID&quot;: &quot;WILMK&quot;, &quot;OrderDate&quot;: &quot;1996-07-04 00:00:00&quot;, &quot;Freight&quot;: &quot;32.3800&quot;, &quot;ShipName&quot;: &quot;Vins et alcools Chevalier&quot; }, { &quot;OrderID&quot;: &quot;10249&quot;, &quot;CustomerID&quot;: &quot;TRADH&quot;, &quot;OrderDate&quot;: &quot;1996-07-05 00:00:00&quot;, &quot;Freight&quot;: &quot;11.6100&quot;, &quot;ShipName&quot;: null }, { &quot;OrderID&quot;: &quot;10250&quot;, &quot;CustomerID&quot;: &quot;HANAR&quot;, &quot;OrderDate&quot;: &quot;1996-07-08 00:00:00&quot;, &quot;Freight&quot;: &quot;65.8300&quot;, &quot;ShipName&quot;: &quot;Hanari Carnes&quot; }, { &quot;OrderID&quot;: &quot;10251&quot;, &quot;CustomerID&quot;: &quot;VICTE&quot;, &quot;OrderDate&quot;: &quot;1996-07-08 00:00:00&quot;, &quot;Freight&quot;: &quot;41.3400&quot;, &quot;ShipName&quot;: &quot;Victuailles en stock&quot; }, { &quot;OrderID&quot;: &quot;10252&quot;, &quot;CustomerID&quot;: &quot;SUPRD&quot;, &quot;OrderDate&quot;: &quot;1996-07-09 00:00:00&quot;, &quot;Freight&quot;: &quot;51.3000&quot;, &quot;ShipName&quot;: null }, { &quot;OrderID&quot;: &quot;10253&quot;, &quot;CustomerID&quot;: &quot;HANAR&quot;, &quot;OrderDate&quot;: &quot;1996-07-10 00:00:00&quot;, &quot;Freight&quot;: &quot;58.1700&quot;, &quot;ShipName&quot;: &quot;Hanari Carnes&quot; }, { &quot;OrderID&quot;: &quot;10254&quot;, &quot;CustomerID&quot;: &quot;CHOPS&quot;, &quot;OrderDate&quot;: &quot;1996-07-11 00:00:00&quot;, &quot;Freight&quot;: &quot;22.9800&quot;, &quot;ShipName&quot;: &quot;Chop-suey Chinese&quot; }, { &quot;OrderID&quot;: &quot;10255&quot;, &quot;CustomerID&quot;: &quot;RICSU&quot;, &quot;OrderDate&quot;: &quot;1996-07-12 00:00:00&quot;, &quot;Freight&quot;: &quot;148.3300&quot;, &quot;ShipName&quot;: &quot;Richter Supermarkt&quot; }, { &quot;OrderID&quot;: &quot;10256&quot;, &quot;CustomerID&quot;: &quot;WELLI&quot;, &quot;OrderDate&quot;: &quot;1996-07-15 00:00:00&quot;, &quot;Freight&quot;: &quot;13.9700&quot;, &quot;ShipName&quot;: &quot;Wellington Importadora&quot; }, { &quot;OrderID&quot;: &quot;10257&quot;, &quot;CustomerID&quot;: &quot;HILAA&quot;, &quot;OrderDate&quot;: &quot;1996-07-16 00:00:00&quot;, &quot;Freight&quot;: &quot;81.9100&quot;, &quot;ShipName&quot;: null }, { &quot;OrderID&quot;: &quot;10258&quot;, &quot;CustomerID&quot;: &quot;ERNSH&quot;, &quot;OrderDate&quot;: &quot;1996-07-17 00:00:00&quot;, &quot;Freight&quot;: &quot;140.5100&quot;, &quot;ShipName&quot;: &quot;Ernst Handel&quot; }, { &quot;OrderID&quot;: &quot;10259&quot;, &quot;CustomerID&quot;: &quot;CENTC&quot;, &quot;OrderDate&quot;: &quot;1996-07-18 00:00:00&quot;, &quot;Freight&quot;: &quot;3.2500&quot;, &quot;ShipName&quot;: &quot;Centro comercial Moctezuma&quot; }, { &quot;OrderID&quot;: &quot;10260&quot;, &quot;CustomerID&quot;: &quot;OLDWO&quot;, &quot;OrderDate&quot;: &quot;1996-07-19 00:00:00&quot;, &quot;Freight&quot;: &quot;55.0900&quot;, &quot;ShipName&quot;: null }, { &quot;OrderID&quot;: &quot;10261&quot;, &quot;CustomerID&quot;: &quot;QUEDE&quot;, &quot;OrderDate&quot;: &quot;1996-07-19 00:00:00&quot;, &quot;Freight&quot;: &quot;3.0500&quot;, &quot;ShipName&quot;: null }, { &quot;OrderID&quot;: &quot;10262&quot;, &quot;CustomerID&quot;: &quot;RATTC&quot;, &quot;OrderDate&quot;: &quot;1996-07-22 00:00:00&quot;, &quot;Freight&quot;: &quot;48.2900&quot;, &quot;ShipName&quot;: &quot;Rattlesnake Canyon Grocery&quot; }, { &quot;OrderID&quot;: &quot;10263&quot;, &quot;CustomerID&quot;: &quot;ERNSH&quot;, &quot;OrderDate&quot;: &quot;1996-07-23 00:00:00&quot;, &quot;Freight&quot;: &quot;146.0600&quot;, &quot;ShipName&quot;: &quot;Ernst Handel&quot; }, { &quot;OrderID&quot;: &quot;10264&quot;, &quot;CustomerID&quot;: &quot;FOLKO&quot;, &quot;OrderDate&quot;: &quot;1996-07-24 00:00:00&quot;, &quot;Freight&quot;: &quot;3.6700&quot;, &quot;ShipName&quot;: null }, { &quot;OrderID&quot;: &quot;10265&quot;, &quot;CustomerID&quot;: &quot;BLONP&quot;, &quot;OrderDate&quot;: &quot;1996-07-25 00:00:00&quot;, &quot;Freight&quot;: &quot;55.2800&quot;, &quot;ShipName&quot;: null }, { &quot;OrderID&quot;: &quot;10266&quot;, &quot;CustomerID&quot;: &quot;WARTH&quot;, &quot;OrderDate&quot;: &quot;1996-07-26 00:00:00&quot;, &quot;Freight&quot;: &quot;25.7300&quot;, &quot;ShipName&quot;: &quot;Wartian Herkku&quot; }, { &quot;OrderID&quot;: &quot;10267&quot;, &quot;CustomerID&quot;: &quot;FRANK&quot;, &quot;OrderDate&quot;: &quot;1996-07-29 00:00:00&quot;, &quot;Freight&quot;: &quot;208.5800&quot;, &quot;ShipName&quot;: &quot;Frankenversand&quot; }];
      $scope.myGridOptions = {
          colNames: [&quot;OrderID&quot;, &quot;Customer ID&quot;, &quot;Order Date&quot;, &quot;Freight&quot;, &quot;Ship Name&quot;,],
          colModel:[
                      { label: 'OrderID', name: 'OrderID', key: true, width: 75 },
                      { label: 'Customer ID', name: 'CustomerID', width: 50 },
                      { label: 'Order Date', name: 'OrderDate', width: 150 },
                      { label: 'Freight', name: 'Freight', width: 150 },
                      { label:'Ship Name', name: 'ShipName', width: 150 }
          ],
      cmTemplate: { autoResizable: true, editable: true },
      hoverrows: true,
      rowNum: 20,
      autoResizing: { compact: true },
      rowList: [5, 10, 20, &quot;10000:All&quot;],
      viewrecords: true,
      sortable: true,
      pager: true,
          pgbuttons : true,
      pagerRightWidth: 150,
      sortname: &quot;OrderID&quot;,
      sortorder: &quot;desc&quot;,
      formEditing: {
          width: 310,
          closeOnEscape: true,
          closeAfterEdit: true,
          savekey: [true, 13]
      },
      formViewing: {
          labelswidth: &quot;80%&quot;
      },
      navOptions: {
          view: true,
      },
      singleSelectClickMode: &quot;selectonly&quot;, // optional setting
      ondblClickRow: function (rowid) {
          $(this).jqGrid(&quot;editGridRow&quot;, rowid);
      },
      caption: &quot;Angular Implementation of jqGrid&quot;,
          width: 1280,
          height: 450,
      };
  });
  </code></pre>
  <p>This is simply all I have for now. My console shows no error, and I think I pretty much have all needed libraries in place. The grid displays fine except for the blank left pager.</p>
  <p>Am I missing something in configuration object. How can I make the Add Delete button to appear.</p>
  <p>Any help is appreciated.</p>