Column Chooser icon not visible in pager bar

Question

Does anyone know why is the Column Chooser icon not visible in jqGrid's pager bar? I'm using free-jqGrid v4.9.2

[Html]

<script src="~/Member/Scripts/jquery-ui-v1.10.3.themes/redmond/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>  <!-- JQuery UI -->
<script src="~/Member/Scripts/jqgrid-v4.9.2/i18n/grid.locale-en.js" type="text/javascript"></script>   <!-- jqGrid Plugin -->
<script src="~/Member/Scripts/jqgrid-v4.9.2/jquery.jqgrid.min.js" type="text/javascript"></script>   <!-- jqGrid Plugin -->
<script src="~/Member/Scripts/jqgrid-v4.9.2/ui.multiselect.min.js" type="text/javascript"></script>   <!-- jqGrid Plugin -->

<div id="BatchReportJqgrid" class="GridViewForceCenterInAllWebBrowsers" style="padding-top:2px;padding-bottom:20px;">
     <div><table id="BatchReportJqgrid_Spreadsheet"></table></div>
     <div id="BatchReportJqgrid_Pager"></div>
</div>

[Javascript]

var _httpHost = window.location.host;  //This give you "localhost:<<port #>>" on local machine...
var _dealerAccountId = parmDealerAccountId;
var _dealerUserId = parmDealerUserId;
var _dealerBranchAccountId = parmDealerBranchAccountId;
var _jqgridSpreadsheetId = "BatchReportJqgrid_Spreadsheet";
var _jqgridPagerId = 'BatchReportJqgrid_Pager';
var _jqgridLayoutWidth = 1022;
var _jqgridDialogColumnChooserWidth = 800;


    //===============================================================================
    //jqGrid - Initialize...
    //===============================================================================
    $('#' + _jqgridSpreadsheetId).jqGrid({
        url: "https://" + _httpHost + "/WebApi/Webpages/Member/BatchFooReport/JqgridSpreadsheetLookup/" + _dealerAccountId + "/" + _dealerUserId + "/" + _dealerBranchAccountId + "",
        datatype: "local",
        mtype: 'POST',
        jsonReader: { repeatitems: false },
        postData: {},
        colName: ["StockNumber", "VIN", "Year", "Make", "Model", "Trim"],
        colModel: [
            { jsonmap: function (o) { return o.cell[0]; }, name: 'Stock Number', index: 'StockNumber', sortable: true, sorttype: 'text', align: 'center' },
            { jsonmap: function (o) { return o.cell[1]; }, name: 'Vin', index: 'Vin', sortable: true, sorttype: 'text', width: 190, align: 'center' },
            { jsonmap: function (o) { return o.cell[2]; }, name: 'Year', index: 'Year', sortable: true, sorttype: 'int', align: 'center' },
            { jsonmap: function (o) { return o.cell[3]; }, name: 'Make', index: 'Make', sortable: true, sorttype: 'text', align: 'center'},
            { jsonmap: function (o) { return o.cell[4]; }, name: 'Model', index: 'Model', sortable: true, sorttype: 'text', align: 'center' },
            { jsonmap: function (o) { return o.cell[5]; }, name: 'Trim', index: 'Trim', sortable: true, sorttype: 'text', align: 'center' },
        ],
        pager: '#' + _jqgridPagerId,
        emptyrecords: "No vehicles found that match your search.",
        loadtext: "Locating vehicles, please wait...",
        recordtext: "Viewing {0} - {1} of {2} vehicles.",
        rowNum: 25,
        viewrecords: true,
        caption: "Batch Foo Report",
        rowList: [25, 50, 100],
        loadonce: false,
        width: _jqgridLayoutWidth,
        height: 400,
        loadError: function (xhr, status, error) {
            alert("Error occured while retrieving data.");
        }
    });
    //==========================================

    //===============================================================================
    //jqGrid --> Navigation Buttons...
    //===============================================================================
    //Column Chooser Icon [Columns]...
    //#$('#' + _jqgridSpreadsheetId).navButtonAdd('#' + _jqgridPagerId, {
    $('#' + _jqgridSpreadsheetId).jqGrid('navButtonAdd', '#' + _jqgridPagerId, {
        position: "first",
        caption: "Columns",
        title: "Columns",
        //cursor: "pointer",  //This does not work...
        onClickButton: function () {
            //http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jquery_ui_methods&s[]=column&s[]=chooser...
            //$('#' + _jqgridSpreadsheetId).columnChooser({
            $(this).columnChooser({
                title: "Columns",
                caption: "Select Columns",
                width: _jqgridDialogColumnChooserWidth,
                modal: true,
                done: function (perm) {
                    if (perm) { /* "OK" button are clicked... */
                        this.jqGrid("remapColumns", perm, true);
                    }
                    else { /* "Cancel" button or "x" button are clicked... */ }
                }
            });
        }
    });
    //===============================================================================

Answer 1

You need to include the call of navGrid which creates navigator bar before you can add any custom button in the navigator bar with respect of navButtonAdd. Even if you don't need any standard buttons you should add the call of navGrid with the corresponding parameters: .jqGrid("navGrid", {add: false, edit: false, del: false, refresh: false, search: false});