jqgrid inlineNav cloneToTop?

Question

I am playing with jqGrid and I have a combination of both a pager (with View and Refresh) and an inlineNav (with Add, Edit, Save, Cancel).

I have toppager:true and cloneToTop:true which places the pager controls, both at top and bottom. However I can't seem to do the same with my inlineNav.

Full code follows, but I tried to do the following, but the top buttons do not respond properly and it's a bit of a mess:

$("#pager_left").clone().appendTo("#list_toppager_left");

Can anyone help?

    $(document).ready(function() {

        var lastSel;

  $("#list").jqGrid({
    url:'db.php',
    datatype: 'json',
    mtype: 'GET',
    colNames:[
    /*...*/
    ],
    colModel :[ 
      /*...*/
    ],
    pager: '#pager',
    autowidth:true,
    height: "100%",
    rowNum:20,
    rowList:[20,50,100,1000],
    loadtext: 'Loading...',
    viewrecords: true,
    sortname:'BUSINESS',
    sortorder:"ASC",
    multiselect:false,
    sortable:true,
    toppager:true,
    ignorecase:true,
    gridview: true,
    editurl:"db_edit.php",
    caption: 'Bath BID',
    onSelectRow: function(id) {
        if(id && id!==lastSel){ 
            $('#list').saveRow(lastSel);
            lastSel=id; 
        }
        }
  }).navGrid('#pager', {
    edit:false,
    add:false,
    del:true,
    view:true,
    search:false,
    viewtext:"View", 
    closeOnEscape:true,
    edittext:"Edit", 
    refreshtext:"Refresh", 
    addtext:"Add", 
    deltext:"Delete", 
    searchtext:"Search",
    cloneToTop:true},{},{},{},{multipleSearch:true});

    $("#list").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : true});
    $("#list").jqGrid('inlineNav','#pager', { 
        edittext:"Edit", 
        addtext:"Add",
        savetext:"Save",
        canceltext:"Cancel",
        cloneToTop:true
    });

Thanks in advance!

Answer 1

It's a little bit clunky, but for a quick win I just duplicated the code within grid.inlinedit.js in order to recreate buttons that do the same thing in both top and bottom bars... it seems to work.

            if(o.add) {
            $($t).jqGrid('navButtonAdd', elem,{
                caption : o.addtext,
                title : o.addtitle,
                buttonicon : o.addicon,
                id : $t.p.id+"_iladd",
                onClickButton : function ( e ) {
                    $($t).jqGrid('addRow', o.addParams);
                    if(!o.addParams.useFormatter) {
                        $("#"+$t.p.id+"_top_ilsave").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_ilcancel").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iladd").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iledit").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_ilsave").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_ilcancel").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iladd").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iledit").addClass('ui-state-disabled');
                    }
                }
            });

            $($t).jqGrid('navButtonAdd', '#' + $($t)[0].id + '_toppager_left',{
                caption : o.addtext,
                title : o.addtitle,
                buttonicon : o.addicon,
                id : $t.p.id+"_top_iladd",
                onClickButton : function ( e ) {
                    $($t).jqGrid('addRow', o.addParams);
                    if(!o.addParams.useFormatter) {
                        $("#"+$t.p.id+"_top_ilsave").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_ilcancel").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iladd").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iledit").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_ilsave").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_ilcancel").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iladd").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iledit").addClass('ui-state-disabled');
                    }
                }
            });

        }
        if(o.edit) {
            $($t).jqGrid('navButtonAdd', elem,{
                caption : o.edittext,
                title : o.edittitle,
                buttonicon : o.editicon,
                id : $t.p.id+"_iledit",
                onClickButton : function ( e ) {
                    var sr = $($t).jqGrid('getGridParam','selrow');
                    if(sr) {
                        $($t).jqGrid('editRow', sr, o.editParams);
                        $("#"+$t.p.id+"_ilsave").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_ilcancel").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iladd").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iledit").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_ilsave").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_ilcancel").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iladd").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iledit").addClass('ui-state-disabled');
                    } else {
                        $.jgrid.viewModal("#alertmod",{gbox:"#gbox_"+$t.p.id,jqm:true});$("#jqg_alrt").focus();                         
                    }
                }
            });

            $($t).jqGrid('navButtonAdd', '#' + $($t)[0].id + '_toppager_left',{
                caption : o.edittext,
                title : o.edittitle,
                buttonicon : o.editicon,
                id : $t.p.id+"_top_iledit",
                onClickButton : function ( e ) {
                    var sr = $($t).jqGrid('getGridParam','selrow');
                    if(sr) {
                        $($t).jqGrid('editRow', sr, o.editParams);
                        $("#"+$t.p.id+"_ilsave").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_ilcancel").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iladd").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iledit").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_ilsave").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_ilcancel").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iladd").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iledit").addClass('ui-state-disabled');
                    } else {
                        $.jgrid.viewModal("#alertmod",{gbox:"#gbox_"+$t.p.id,jqm:true});$("#jqg_alrt").focus();                         
                    }
                }
            });


        }
        if(o.save) {
            $($t).jqGrid('navButtonAdd', elem,{
                caption : o.savetext || '',
                title : o.savetitle || 'Save row',
                buttonicon : o.saveicon,
                id : $t.p.id+"_ilsave",
                onClickButton : function ( e ) {
                    var sr = $($t).jqGrid('getGridParam','selrow');
                    if(sr) {
                        if($("#"+$.jgrid.jqID(sr), "#"+$.jgrid.jqID($t.p.id) ).hasClass("jqgrid-new-row")) {
                            var opers = $t.p.prmNames,
                            oper = opers.oper;
                            if(!o.editParams.extraparam) {
                                o.editParams.extraparam = {};
                            }
                            o.editParams.extraparam[oper] = opers.addoper;
                        }
                        $($t).jqGrid('saveRow', sr, o.editParams);
                        $("#"+$t.p.id+"_ilsave").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_ilcancel").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iladd").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iledit").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_ilsave").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_ilcancel").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iladd").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iledit").removeClass('ui-state-disabled');
                    } else {
                        $.jgrid.viewModal("#alertmod",{gbox:"#gbox_"+$t.p.id,jqm:true});$("#jqg_alrt").focus();                         
                    }
                }
            });
            $("#"+$t.p.id+"_ilsave").addClass('ui-state-disabled');

            $($t).jqGrid('navButtonAdd', '#' + $($t)[0].id + '_toppager_left',{
                caption : o.savetext || '',
                title : o.savetitle || 'Save row',
                buttonicon : o.saveicon,
                id : $t.p.id+"_top_ilsave",
                onClickButton : function ( e ) {
                    var sr = $($t).jqGrid('getGridParam','selrow');
                    if(sr) {
                        if($("#"+$.jgrid.jqID(sr), "#"+$.jgrid.jqID($t.p.id) ).hasClass("jqgrid-new-row")) {
                            var opers = $t.p.prmNames,
                            oper = opers.oper;
                            if(!o.editParams.extraparam) {
                                o.editParams.extraparam = {};
                            }
                            o.editParams.extraparam[oper] = opers.addoper;
                        }
                        $($t).jqGrid('saveRow', sr, o.editParams);
                        $("#"+$t.p.id+"_ilsave").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_ilcancel").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iladd").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iledit").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_ilsave").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_ilcancel").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iladd").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iledit").removeClass('ui-state-disabled');
                    } else {
                        $.jgrid.viewModal("#alertmod",{gbox:"#gbox_"+$t.p.id,jqm:true});$("#jqg_alrt").focus();                         
                    }
                }
            });
            $("#"+$t.p.id+"_top_ilsave").addClass('ui-state-disabled');
        }
        if(o.cancel) {
            $($t).jqGrid('navButtonAdd', elem,{
                caption : o.canceltext || '',
                title : o.canceltitle || 'Cancel row editing',
                buttonicon : o.cancelicon,
                id : $t.p.id+"_ilcancel",
                onClickButton : function ( e ) {
                    var sr = $($t).jqGrid('getGridParam','selrow');
                    if(sr) {
                        $($t).jqGrid('restoreRow', sr, o.editParams);
                        $("#"+$t.p.id+"_ilsave").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_ilcancel").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iladd").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iledit").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_ilsave").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_ilcancel").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iladd").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iledit").removeClass('ui-state-disabled');
                    } else {
                        $.jgrid.viewModal("#alertmod",{gbox:"#gbox_"+$t.p.id,jqm:true});$("#jqg_alrt").focus();                         
                    }
                }
            });
            $("#"+$t.p.id+"_ilcancel").addClass('ui-state-disabled');

            $($t).jqGrid('navButtonAdd', '#' + $($t)[0].id + '_toppager_left',{
                caption : o.canceltext || '',
                title : o.canceltitle || 'Cancel row editing',
                buttonicon : o.cancelicon,
                id : $t.p.id+"_top_ilcancel",
                onClickButton : function ( e ) {
                    var sr = $($t).jqGrid('getGridParam','selrow');
                    if(sr) {
                        $($t).jqGrid('restoreRow', sr, o.editParams);
                        $("#"+$t.p.id+"_ilsave").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_ilcancel").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iladd").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iledit").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_ilsave").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_ilcancel").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iladd").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iledit").removeClass('ui-state-disabled');
                    } else {
                        $.jgrid.viewModal("#alertmod",{gbox:"#gbox_"+$t.p.id,jqm:true});$("#jqg_alrt").focus();                         
                    }
                }
            });
            $("#"+$t.p.id+"_top_ilcancel").addClass('ui-state-disabled');
        }

Answer 2

I analysed your problem. First of all the option cloneToTop: true is supported by navGrid, but not by inlineNav. Moreover the ids of the buttons of will be constructed using the grid id as the prefix. As the result one will have

list_iladd, list_iledit, list_ilsave, list_ilcancel

as ids. On the other side the ids of the standard navGrid buttons from will have the following ids after cloneToTop: true:

view_list, del_list,
view_list_top, del_list_top

So one can't just call navGrid twice with both pager:

$("#list").jqGrid('inlineNav', '#list_toppager', {
    edittext: "Edit",
    addtext: "Add",
    savetext: "Save",
    canceltext: "Cancel"
});
$("#list").jqGrid('inlineNav', '#pager', {
    edittext: "Edit",
    addtext: "Add",
    savetext: "Save",
    canceltext: "Cancel"
});

One will receive as the results id duplicates (see the demo).

Making manual id modifications before calling the inlineNav at the second time will also not really help (see the next demo) because the code which will be executed after clicking on the inline buttons use the same rules of id building. So only the buttons having original ids will be disabled or enabled.

I can summarize: the current implementation of inlineNav don't support the top pager. I would recommend you use inlineNav only once. If you need to have the icons in the second pager you should better examine the source code of inlineNav (see here for example) and add in the same way new buttons with respect of navButtonAdd and using another ids.

I hope that in the next version the code of inlineNav will be extended to support two pager at the same time.

UPDATED: I forgot to mention, that I fixed a little position of the text relative to icons in the navigator bars. It is not the main subject of your question, but probably it will be interesting for you too:

.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div {
    margin-top: 2px;
    padding-right: 5px;
}
.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div span.ui-icon {
    margin-top: -2px;
}
.ui-jqgrid .ui-jqgrid-pager .ui-pg-div {
    margin-top: 2px;
    padding-right: 5px;
}
.ui-jqgrid .ui-jqgrid-pager .ui-pg-div span.ui-icon {
    margin-top: -2px;
}