JqGrid add button in navigation bar not working

Question

I am trying to create a grid that allows the user to add, edit and delete a record. I did the work to fill the grid now, I'm going to display a dialog to add a record. But I do not understand why this does not work. The dialog is not displayed.

This is a snapshot of my grid.

and this is my js function

InfoDesk.GridManager.postsGrid = function (gridName, pagerName) {
    //Create the grid
    $(gridName).jqGrid({
        //server url and other ajax stuff
        url: '/Admin/Posts',
        datatype: 'json',
        mtype: 'GET',

        height: 'auto',

        //Columns
        colNames: colNames,
        colModel: columns,

        //pagination options
        toppager: true,
        pager: pagerName,
        rowNum: 10,
        rowList: [10, 20, 30],

        //row number columns
        rownumbers: true,
        rownumWidth: 40,

        //default sorting
        sortname: 'PostedOn',
        sortorder: 'desc',

        //display the no. of records message
        viewrecords: true,

        jsonReader: { repeatitems: false },

        afterInsertRow: function (rowid, rowdata, rowelem) {
            var tags = rowdata["Tags"];
            var tagStr = "";

            $.each(tags, function (i, t) {
                if (tagStr) tagStr += ", "
                tagStr += t.Name;
            });


            $(gridName).setRowData(rowid, { "Tags": tagStr });

        }


    });

    $(gridName).navGrid(pagerName,
                     {
                         cloneToTop: true,
                         search: false,
                         add:true
                     }, editOptions, addOptions, deleteOptions);                
    };

When I click the Add button. Nothing happens. This is my first jqGrid project. So, I do not know about this at all.

Edition:

I found an example of a violin and modified for the navigation bar. It works fine, but, nevertheless, I could not recognize the problem when I make a mistake in my code.

fiddle

Answer 1

, - , navGrid . , .

, . , .

jqGrid , : pager toppager. pager, <div>, id, div - id pager. , <div id="mypager"></div> pager: "#mypager" jqGrid. pager : pager: "mypager" pager: $("#mypager"), jqGrid . var thePager = $(gridName).jqGrid("getGridParam", "pager");, "" , thePager === "#mypager" , pager.

toppager -. toppager: true . jqGrid <div>. id div _toppager. , gridName #mygrid, id="mygrid_toppager". toppager

var theTopPager = $(gridName).jqGrid("getGridParam", "pager");

id true: theTopPager "#mygrid_toppager" (gridName + "_toppager").

navGrid , . $(gridName).navGrid(pagerName, ...); $(gridName).navGrid(gridName + "_toppager", ...);, . $("#grid").navGrid('setGridParam', ..., jsfiddle demo, , 'setGridParam' id .

( ), pager navGrid cloneToTop: true. , navButtonAdd, , cloneToTop: true, .

, , jqGrid pager: pagerName "", "", "" "":

$(gridName).navGrid($(gridName).getGridParam("toppager"), { search: false });

, jqGrid toppager: true pager: pagerName

$(gridName).navGrid($(gridName).getGridParam("pager"), { search: false });
$(gridName).navGrid($(gridName).getGridParam("toppager"), { search: false });

$(gridName).navGrid($(gridName).getGridParam("pager"),
    { search: false, cloneToTop: true });

, $(gridName).getGridParam("pager") pagerName navGrid, , id (, "mypager") id (, "#mypager"), InfoDesk.GridManager.postsGrid. navGrid id.

, , , editOptions, addOptions, deleteOptions, searchOptions, viewOptions (. ). editOptions, addOptions, deleteOptions, searchOptions, viewOptions . , , .

. , fork jqGrid, GitHub , 1) pager: true, toppager: true. 2) navGrid (, $(gridName).navGrid({search: false});). , jqGrid , jqGrid. 3) navGrid: iconsOverText:true, (. ). 4) , , width. readme .