Question

I am inserting a div element between the jqgrid titlebar and table headers using loadComplete event.

HTML Code

<div class="userinfo">
   <table id="myjqgrid"></table>
   <div id="Pager"></div>                   
   <script src="js/myjqgrid.js" type="text/javascript"></script>
</div>

JSON

{
    "mypage": {
        "outerwrapper": {
            "page":"1",
            "total":"1",
            "records":"1",
            "innerwrapper": {
                "rows":[
                    {
                        "id":"1",
                        "cells":
                        [               
                            {
                                "value":"12345",
                                "label": "ID"                       
                            },
                            {
                                "value":"David",
                                "label": "FirstName"    
                            },
                            {                           
                                "value":"Smith",
                                "label": "LastName"                         
                            }                                                                                       
                        ]       
                    },
                    {
                        "id":"2",
                        "cells":
                        [               
                            {
                                "value":"37546",
                                "label": "ID"                       
                            },
                            {
                                "value":"Willy",
                                "label": "FirstName"    
                            },
                            {                           
                                "value":"Peacock",
                                "label": "LastName"                         
                            }                                                                                       
                        ]       
                    },
                    {
                        "id":"3",
                        "cells":
                        [               
                            {
                                "value":"62345",
                                "label": "ID"                       
                            },
                            {
                                "value":"Kim",
                                "label": "FirstName"    
                            },
                            {                           
                                "value":"Holmes",
                                "label": "LastName"                         
                            }                                                                                       
                        ]       
                    },
                    {
                        "id":"4",
                        "cells":
                        [               
                            {
                                "value":"186034",
                                "label": "ID"                       
                            },
                            {
                                "value":"Andy",
                                "label": "FirstName"    
                            },
                            {                           
                                "value":"Wills",
                                "label": "LastName"                         
                            }                                                                                       
                        ]       
                    }
                ]
            }
        }
    }
}

JQGrid Definition (myjqgrid.js)

$(function (){
    var getValueByName = function (cells, cellItem) {
        var i, count = cells.length, item;
        for (i = 0; i < count; i += 1) {
            item = cells[i];
            if (item.label === cellItem) {
                return item.value;
            }
        }
        return '';
    };
    $("#myjqgrid").jqGrid({
        url: "myjqgrid.json",
        datatype: "json",
        contentType: "application/x-javascript; charset=utf-8",
        colNames:['ID','FirstName', 'LastName'],
        colModel:[
            {name:'ID',index:'ID',jsonmap:function(obj){return getValueByName(obj.cells, "ID");}, width:150, align:"center"},
            {name:'FirstName',index:'FirstName',jsonmap:function(obj){return getValueByName(obj.cells, "FirstName");}, width:150, align:"left", sortable:true},
            {name:'LastName',index:'LastName',jsonmap:function(obj){return getValueByName(obj.cells, "LastName");}, width:150, align:"left", sortable:true}         
        ],
        jsonReader: {
            root: "mypage.outerwrapper.innerwrapper.rows",          
            page: "mypage.outerwrapper.page",
            total: "mypage.outerwrapper.total",
            records: "mypage.outerwrapper.records",
            repeatitems: false
        },
        rowNum:2,
        rowList:[2, 4],
        pager: '#Pager',
        recordpos: 'left',
        multiboxonly:true,
        viewrecords: true,
        sortorder: "desc",
        multiselect: true,
        scrolloffset: 0,    
        loadonce: true,     
        sortable: true, 
        sorttype: "text",
        cache: true,
        height: "auto",
            caption: "MY JQGRID",
        loadComplete: function(){
            $("<div>Table Summary</div>").insertAfter("#gview_myjqgrid .ui-jqgrid-titlebar");
        }
    });
    $("#myjqgrid").jqGrid('navGrid','#Pager',{add:false,del:false,edit:false,position:'right'});
});

Problem

The extra div element is getting displayed. BUT each time I navigate from 1 page to another, it draws an extra div.

• So, when the page loads I get 1 div that reads ‘Table Summary’.
• Then I navigate from page 1 to page 2, I get 2 div elements that read ‘Table Summary’.
• I navigate back from page 2 to page 1, I get 3 div elements that read ‘Table Summary’

Answer 1

You should better use

toolbar: [true,"top"]

parameter of jqGrid to add empty div. If you do need to add the dive manually you should move the code $("<div>Table Summary</div>").insertAfter("#gview_myjqgrid .ui-jqgrid-titlebar"); out of loadComplete. You should place the code after creating of the grid (after $("#myjqgrid").jqGrid({...});).