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!

Executrix

Answer 1

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;
}

Crossgrained

Answer 2

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');
        }

Executrix

It's about the same which I suggested in my answer. I think only that one should not add always the buttons in '#' + $($t)[0].id + '_toppager_left'. There are already parameter elem. I would add buttons only in the elem pager, but I would use ids constructed from the id of the elem. Moreover I would use additional classes to iladd, iledit and so on buttons then the code for disabling or enabling of the buttons can be shorter. I would also to use a little another rules how to construct the ids of the buttons to have no possible conflicts with buttons added by inlineNav. – Crossgrained

Please post additionally a short comment to my answer if you update the text of your question of if you post one more answer. Only in the case I would have notification about this. – Crossgrained