jqGrid add buttons for add/edit/delete in toolbar not working - jqgrid

Question

I have tried to implement the code for adding buttons in jqGrid toolbar from the example site http://www.guriddo.net/demo/bootstrap/ 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:
<script type="text/javascript">
$(function () {
var gridDataUrl = '#Url.Action("JsonCategories", "AdminNomCategory")'
var grid = $("#reportsGrid").jqGrid({
url: gridDataUrl,
datatype: "json",
mtype: 'POST',
colNames: [
'#Html.DisplayNameFor(model => model.CategoryGuid)',
'#Html.DisplayNameFor(model => model.CategoryName)',
'#Html.DisplayNameFor(model => 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 = "<div style='margin-left:15px;'><div> Customer ID <sup>*</sup>:</div><div> {CustomerID} </div>";
template += "<div> Company Name: </div><div>{CompanyName} </div>";
template += "<div> Phone: </div><div>{Phone} </div>";
template += "<div> Postal Code: </div><div>{PostalCode} </div>";
template += "<div> City:</div><div> {City} </div>";
template += "<hr style='width:100%;'/>";
template += "<div> {sData} {cData} </div></div>";
$('#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("<td dir='ltr'>Rows per page </td>");
grid.jqGrid('setGridHeight', $(window).innerHeight() - 450);
});
$(window).resize(function () {
$('#reportsGrid').jqGrid('setGridHeight', $(window).innerHeight() - 450);
});
</script>
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.
Any clues? I just want to add the buttons to the bottom toolbar. Thx!