jqGrid add buttons for add/edit/delete in toolbar not working <p>I have tried to implement the code for adding buttons in jqGrid toolbar from the example site <a href="http://www.guriddo.net/demo/bootstrap/" rel="nofollow">http://www.guriddo.net/demo/bootstrap/</a> but I'm surprised to find that it isn't working for me. Searched for a couple of hours but I can't figure it out. Here is my code:</p> <pre><code>&lt;script type="text/javascript"&gt; $(function () { var gridDataUrl = '@Url.Action("JsonCategories", "AdminNomCategory")' var grid = $("#reportsGrid").jqGrid({ url: gridDataUrl, datatype: "json", mtype: 'POST', colNames: [ '@Html.DisplayNameFor(model =&gt; model.CategoryGuid)', '@Html.DisplayNameFor(model =&gt; model.CategoryName)', '@Html.DisplayNameFor(model =&gt; model.CategoryDescription)' ], colModel: [ { name: 'CategoryGuid', index: 'CategoryGuid', width: 10, align: 'left', classes: "nts-grid-cell", hidden: true }, { name: 'CategoryName', index: 'CategoryName', width: 10, align: 'left', classes: "nts-grid-cell" }, { name: 'CategoryDescription', index: 'CategoryDescription', width: 10, align: 'left', classes: "nts-grid-cell" } ], rowNum: 20, rowList: [10, 20, 30], height: 450, width: 1140, pager: '#pager', /*jQuery('#pager'),*/ sortname: 'CategoryGuid', toolbarfilter: true, viewrecords: true, sortorder: "asc", caption: "Categories", ondblClickRow: function (rowid) { var gsr = jQuery("#reportsGrid").jqGrid('getGridParam', 'selrow'); if (gsr) { var CategoryGuid = grid.jqGrid('getCell', gsr, 'CategoryGuid'); window.location.href = '@Url.Action("Edit", "AdminNomCategory")/' + CategoryGuid } else { alert("Please select Row"); } }, @*onSelectRow: function (rowid) { var gsr = jQuery("#reportsGrid").jqGrid('getGridParam', 'selrow'); if (gsr) { var CategoryGuid = grid.jqGrid('getCell', gsr, 'CategoryGuid'); window.location.href = '@Url.Action("Edit", "AdminNomCategory")/' + CategoryGuid } else { alert("Please select Row"); } }*@ }); //jQuery("#reportsGrid").jqGrid('navGrid', '#pager', { edit: true, add: true, del: true }); var template = "&lt;div style='margin-left:15px;'&gt;&lt;div&gt; Customer ID &lt;sup&gt;*&lt;/sup&gt;:&lt;/div&gt;&lt;div&gt; {CustomerID} &lt;/div&gt;"; template += "&lt;div&gt; Company Name: &lt;/div&gt;&lt;div&gt;{CompanyName} &lt;/div&gt;"; template += "&lt;div&gt; Phone: &lt;/div&gt;&lt;div&gt;{Phone} &lt;/div&gt;"; template += "&lt;div&gt; Postal Code: &lt;/div&gt;&lt;div&gt;{PostalCode} &lt;/div&gt;"; template += "&lt;div&gt; City:&lt;/div&gt;&lt;div&gt; {City} &lt;/div&gt;"; template += "&lt;hr style='width:100%;'/&gt;"; template += "&lt;div&gt; {sData} {cData} &lt;/div&gt;&lt;/div&gt;"; $('#reportsGrid').navGrid('#pager', // the buttons to appear on the toolbar of the grid { edit: true, add: true, del: true, search: false, refresh: false, view: false, position: "left", cloneToTop: false }, //// options for the Edit Dialog { editCaption: "The Edit Dialog", template: template, errorTextFormat: function (data) { return 'Error: ' + data.responseText } }, // options for the Add Dialog { template: template, errorTextFormat: function (data) { return 'Error: ' + data.responseText } }, // options for the Delete Dailog { errorTextFormat: function (data) { return 'Error: ' + data.responseText } } ); grid.jqGrid('filterToolbar', { searchOnEnter: true, enableClear: false }); jQuery("#pager .ui-pg-selbox").closest("td").before("&lt;td dir='ltr'&gt;Rows per page &lt;/td&gt;"); grid.jqGrid('setGridHeight', $(window).innerHeight() - 450); }); $(window).resize(function () { $('#reportsGrid').jqGrid('setGridHeight', $(window).innerHeight() - 450); }); &lt;/script&gt; </code></pre> <p>I am using jqGrid 4.4.4 and ASP.NET. The thing I noticed, is that on the example page, the buttons are located inside a div with an id like 'jqGridPagerLeft', but on my page, that div has no id. So I went looking inside the jqGrid source but I'm lost and I can't figure out why it doesn't have an id allocated.</p> <p>Any clues? I just want to add the buttons to the bottom toolbar. Thx!</p>