CODEWITHSUNDEEP
javascriptjqueryjqgridjavascript-framework
Rafa
Rafa

Reputation: 2027

jqGrid - Multiple grids on same page shows only one pager

I am writing a page with multiple jqGrids. My code follows a JavaScript MVC pattern which is going to provide an API for my HTML elements (including jqGrids). So, in the end of the day, I can create grids by calling my API. Something like:

var grid1 = new grid();
grid1.init();
var grid2 = new grid();
grid2.init();

I have done it with other javascript components and it worked great. However, when I create multiple jqGrid instances on the same page there is only one jqPager on the page attached to the last grid. Does anybody have an idea why?

Here is my code (Note that this is a simplified version, in reality I keep it separated in different .js files and also follow many other design patterns): 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.2/css/ui.jqgrid.css" />
</head><body>

<!-- IMPORT JS -->  
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.2/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.2/js/jquery.jqGrid.min.js"></script>    

<script>

$(document).ready(function() {
    function grid() {
        //=== LOCA VARIABLES ===//
        var myGrid = $('<table>').attr( "id", "useraccount-search-datagrid");
        var myPager = $("<div>").attr("id", "useraccount-search-datagrid-pager");
        var localData1 = {
            "page" : 1,
            "totalRecords" : 5,
            "pageSize" : 3,
            "rows" : [
                { Name : "Name 1"},
                { Name : "Name 3"},
                { Name : "Name 2"}
            ]
        };

        function publicInit(){
            $("body").append(myGrid, myPager);
            myGrid.jqGrid({
                pager : myPager,
                data: localData1.rows,
                datatype : "local",
                colModel : [
                    { name : 'Name', index : 'Name', width : "500"}
                ],
                localReader: {
                    repeatitems: false
                },
                rowNum : 3,
                viewrecords : true,
                height : "auto",
                ignoreCase : true
            });
        }
        //=== REVEALING PATTERN===//
        return {
            init: publicInit
        }
    };

    var grid1 = new grid();
    grid1.init();

    $("body").append("<br><br>"); //Add some spacing to distinguish between both grids

    var grid2 = new grid();
    grid2.init();

});
</script>
</body>
</html>

Any help would be highly appreciated.

Upvotes: 0

Views: 5002

Answers (1)

Oleg
Oleg

Reputation: 221997

It seems to me that your code produce <table> and <div> elements with the same id attributes. So the second grid var grid2 = new grid(); just add <table> and <div> elements which already exist on the page. It's a bug. All id attributes of all element on one HTML page must be unique. So the lines myGrid = $('<table>').attr( "id", "useraccount-search-datagrid"); and var myPager = $("<div>").attr("id", "useraccount-search-datagrid-pager"); must be changed.

If you need just to assign some unique ids you can use $.jgrid.randId() method used in jqGrid internally. The code could be

var myGrid = $("<table>").attr("id", $.jgrid.randId());
var myPager = $("<div>").attr("id", $.jgrid.randId());

Moreover I strictly recommend you to use name conversion used in JavaScript. If you need to use new operator to create an object you should rename the function grid to Grid.

Upvotes: 1

Related Questions