Free jgGrid show add button on pager

Question

I am setting up a simple jqGrid, and will have inline editing and deleting, but now trying to make the add button show up on the pager. I will start with the default add action, but I can't seem to remember how to make the add button show there, and I would like to know the clean way to do it on free jqGrid.

Here is the current code. Thanks.

$('#press_op_setup').jqGrid({
        url:'grid.php',
        postData:{
            'arg1':'press_ops'
        },
        height: 'auto',
        datatype: 'xml',
        mtype: 'POST',
        width: 400,
        colNames:[
            'id',
            'Emp Num'
        ],
        colModel:[
            {name: 'id', hidden: true, key: true},
            {name: 'empnum'}
        ],
        inlineEditing: {addRow: {}},
        sortname: 'empnum',
        sortorder: 'asc',
        viewrecords: true,
        gridview: true,
        caption: 'Press Operators',
        rowNum: 100,
        pager: true
    });
})

Answer 1

I'm not sure that I correctly understand what you need. You should call at least inlineNav method or both navGrid and inlineNav. You can call the methods directly after creating the grid. Using navOptions and inlineNavOptions you can specify additional options of navGrid and inlineNav. Alternatively you can use the same options directly as the options of navGrid and inlineNav methods.

One thing with isn't work in simple way: reordering of buttons inside of navigator bar (pager). You still can move the DOM elements using jQuery methods like append, prepend and so on. For example, your code could be the following:

$('#press_op_setup').jqGrid({
    url:'grid.php',
    postData:{
        'arg1':'press_ops'
    },
    datatype: 'xml',
    mtype: 'POST',
    width: 400,
    colNames:[
        'id',
        'Emp Num'
    ],
    colModel:[
        //{name: 'id', hidden: true, key: true},
        {name: 'empnum'}
    ],
    inlineEditing: { keys: true },
    sortname: 'empnum',
    sortorder: 'asc',
    viewrecords: true,
    caption: 'Press Operators',
    rowNum: 100,
    pager: true,
    navOptions: { add: false, edit: false, search: false, refresh: false },
    inlineNavOptions: { add: true, edit: true }
}).jqGrid("navGrid")
    .jqGrid("inlineNav");
$("#press_op_setup_iladd").prependTo($("#press_op_setup_iladd").parent());

I removed unneeded hidden id column. The id attribute of rows (<tr> elements) will be set already. One don't need to hold the copy of the same information in hidden <td> element of the grid.

I removed unneeded height: 'auto' and gridview: true options, which are default for free jqGrid. Empty addRow: {} inside of inlineEditing is unneeded too. You should specify only the properties, which you really need to set like keys: true above.