JqGrid | GeekW3

Here, I’m going to explain changing position of navigation bar including pager of JqGrid. I have provided the default JqGrid configuration below,



<!-- HTML -->
<div>
    <div style="float: left; width: 100%;margin: 10px;">
        <table id="tblPlanList"></table>
        <div id="divPagerPlanList"></div>
    </div>
</div>

<script type="text/javascript">
    jQuery().ready(function (){

        jQuery("#tblPlanList").jqGrid({ 
            url:'getplans', 
            datatype: "json", 
            height: 150,
            width: 863,
            rowNum: 10,
            rowTotal: 2000,
            rowList: [10,20,30], 
            colNames:['Id','SlNo','Plan', 'Type', 'Status','Edit','Delete'], 
            colModel:[ {name:'id',index:'id', width:100, sorttype:"int",align:"center",hidden:true}, 
                       {name:'slno',index:'slno', width:80, sorttype:"int",align:"center",search:false}, 
                       {name:'planname',index:'planname', width:329, sorttype:"text"}, 
                       {name:'plantype',index:'plantype', width:229}, 
                       {name:'planstatus',index:'planstatus', width:155, align:"center",sorttype:"text"}, 
                       {name:'edit',index:'edit', width:100, align:"center",sortable:false,search:false},
                       {name:'delete',index:'delete', width:100, align:"center",sortable:false,search:false}], 
            pager: "#divPagerPlanList", 
            viewrecords: true,
            loadonce:true,
            nocase:true,
            caption: "Plans" 
        });

        jQuery("#tblPlanList").jqGrid('navGrid','#divPagerPlanList',{del:false,add:false,edit:false,search:false}); 
        jQuery("#tblPlanList").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});     

    });
</script>

<div>

</div>

jQuery().ready(function (){

jQuery("#tblPlanList").jqGrid({

url:'getplans',

datatype: "json",

height: 150,

width: 863,

rowNum: 10,

rowTotal: 2000,

rowList: [10,20,30],

colNames:['Id','SlNo','Plan', 'Type', 'Status','Edit','Delete'],

colModel:[ {name:'id',index:'id', width:100, sorttype:"int",align:"center",hidden:true},

{name:'slno',index:'slno', width:80, sorttype:"int",align:"center",search:false},

{name:'planname',index:'planname', width:329, sorttype:"text"},

{name:'plantype',index:'plantype', width:229},

{name:'planstatus',index:'planstatus', width:155, align:"center",sorttype:"text"},

{name:'edit',index:'edit', width:100, align:"center",sortable:false,search:false},

{name:'delete',index:'delete', width:100, align:"center",sortable:false,search:false}],

pager: "#divPagerPlanList",

viewrecords: true,

loadonce:true,

nocase:true,

caption: "Plans"

});

jQuery("#tblPlanList").jqGrid('navGrid','#divPagerPlanList',{del:false,add:false,edit:false,search:false});

jQuery("#tblPlanList").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});

});

</script>

As per the above default configuration, JqGrid will look like as below,

If you want to change the position of the navigation bar to above, add toppager:true attribute to the above configuration. And in this case you don’t need to define the <div id=”divPagerPlanList”></div> and use pager: “#divPagerPlanList”. In this case the the id of the pager will be list_toppager. Refer the changed configuration & image below,



    jQuery().ready(function (){

        jQuery("#tblPlanList").jqGrid({ 
            url:'getplans', 
            datatype: "json", 
            height: 150,
            width: 863,
            rowNum: 10,
            rowTotal: 2000,
            rowList: [10,20,30], 
            colNames:['Id','SlNo','Plan', 'Type', 'Status','Edit','Delete'], 
            colModel:[ {name:'id',index:'id', width:100, sorttype:"int",align:"center",hidden:true}, 
                       {name:'slno',index:'slno', width:80, sorttype:"int",align:"center",search:false}, 
                       {name:'planname',index:'planname', width:329, sorttype:"text"}, 
                       {name:'plantype',index:'plantype', width:229}, 
                       {name:'planstatus',index:'planstatus', width:155, align:"center",sorttype:"text"}, 
                       {name:'edit',index:'edit', width:100, align:"center",sortable:false,search:false},
                       {name:'delete',index:'delete', width:100, align:"center",sortable:false,search:false}], 
            viewrecords: true,
            loadonce:true,
            nocase:true,
            caption: "Plans",
            toppager: true
        });

        jQuery("#tblPlanList").jqGrid('navGrid','#list_toppager',{del:false,add:false,edit:false,search:false}); 
        jQuery("#tblPlanList").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});     

    });

jQuery().ready(function (){

jQuery("#tblPlanList").jqGrid({

url:'getplans',

datatype: "json",

height: 150,

width: 863,

rowNum: 10,

rowTotal: 2000,

rowList: [10,20,30],

colNames:['Id','SlNo','Plan', 'Type', 'Status','Edit','Delete'],

colModel:[ {name:'id',index:'id', width:100, sorttype:"int",align:"center",hidden:true},

{name:'slno',index:'slno', width:80, sorttype:"int",align:"center",search:false},

{name:'planname',index:'planname', width:329, sorttype:"text"},

{name:'plantype',index:'plantype', width:229},

{name:'planstatus',index:'planstatus', width:155, align:"center",sorttype:"text"},

{name:'edit',index:'edit', width:100, align:"center",sortable:false,search:false},

{name:'delete',index:'delete', width:100, align:"center",sortable:false,search:false}],

viewrecords: true,

loadonce:true,

nocase:true,

caption: "Plans",

toppager: true

});

jQuery("#tblPlanList").jqGrid('navGrid','#list_toppager',{del:false,add:false,edit:false,search:false});

jQuery("#tblPlanList").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});

});

Then, if we want to get the navigation bar on both top and bottom, do the first step as specified above. After that add cloneToTop:true option as follows,

jQuery(“#tblPlanList”).jqGrid(‘navGrid’,’#divPagerPlanList’,{cloneToTop: true, del:false,add:false,edit:false,search:false});

jQuery(“#tblPlanList”).jqGrid(‘navGrid’,’#pager’,{cloneToTop: true, del:false,add:false,edit:false,search:false});

Refer the changed configuration and image below,



    jQuery().ready(function (){

        jQuery("#tblPlanList").jqGrid({ 
            url:'getplans', 
            datatype: "json", 
            height: 150,
            width: 863,
            rowNum: 10,
            rowTotal: 2000,
            rowList: [10,20,30], 
            colNames:['Id','SlNo','Plan', 'Type', 'Status','Edit','Delete'], 
            colModel:[ {name:'id',index:'id', width:100, sorttype:"int",align:"center",hidden:true}, 
                       {name:'slno',index:'slno', width:80, sorttype:"int",align:"center",search:false}, 
                       {name:'planname',index:'planname', width:329, sorttype:"text"}, 
                       {name:'plantype',index:'plantype', width:229}, 
                       {name:'planstatus',index:'planstatus', width:155, align:"center",sorttype:"text"}, 
                       {name:'edit',index:'edit', width:100, align:"center",sortable:false,search:false},
                       {name:'delete',index:'delete', width:100, align:"center",sortable:false,search:false}], 
            pager: "#divPagerPlanList", 
            viewrecords: true,
            loadonce:true,
            nocase:true,
            caption: "Plans",
            toppager: true
        });

        jQuery("#tblPlanList").jqGrid('navGrid','#divPagerPlanList',{cloneToTop: true, del:false,add:false,edit:false,search:false}); 
        jQuery("#tblPlanList").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});     

    });

jQuery().ready(function (){

jQuery("#tblPlanList").jqGrid({

url:'getplans',

datatype: "json",

height: 150,

width: 863,

rowNum: 10,

rowTotal: 2000,

rowList: [10,20,30],

colNames:['Id','SlNo','Plan', 'Type', 'Status','Edit','Delete'],

colModel:[ {name:'id',index:'id', width:100, sorttype:"int",align:"center",hidden:true},

{name:'slno',index:'slno', width:80, sorttype:"int",align:"center",search:false},

{name:'planname',index:'planname', width:329, sorttype:"text"},

{name:'plantype',index:'plantype', width:229},

{name:'planstatus',index:'planstatus', width:155, align:"center",sorttype:"text"},

{name:'edit',index:'edit', width:100, align:"center",sortable:false,search:false},

{name:'delete',index:'delete', width:100, align:"center",sortable:false,search:false}],

pager: "#divPagerPlanList",

viewrecords: true,

loadonce:true,

nocase:true,

caption: "Plans",

toppager: true

});

jQuery("#tblPlanList").jqGrid('navGrid','#divPagerPlanList',{cloneToTop: true, del:false,add:false,edit:false,search:false});

jQuery("#tblPlanList").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});

});