How to display two instances of ag-grid tables on the same page

Question

Is it possible to display two ag-grid instances on the same page? Like I'm trying to do this:

<html style="height: 100%;">

    <head lang="en">
     <meta charset="UTF-8">
        <title>Data Platform - Real Time Monitor </title>
        <script src="../dist/ag-grid-enterprise.js?ignore=notused30"></script>
        <script src="loadingGrid.js"></script>
        <script src="sortGrid.js"></script>

    </head>
<body style="height: 100%; margin: 0px;">


<div style="width: 100%; height: 100%; overflow-x:auto; overflow-y:hidden">
<div id="myGrid2" style="width: 70%; height: 50%;" class="ag-fresh">


        </div>
<div id="myGrid" style="width: 100%; height: 90%; overflow-x:scroll;" class="ag-fresh">


        </div>  
</div>      




  </body>

</html>

And then I'm using the loading data tutorial from this link: https://www.ag-grid.com/ag-grid-tutorials/index.php i.e, the loadingGrid.js using the div id myGrid2 and sortGrid.js uses the div id myGrid. Both have different tables. But only one table with all the data is displayed, the second table shows empty table and that too with column names of the second table. How to display two ag-grid tables on the same page??

UPDATE: OK, I tried it with the ag-grid example as well (tried to create two ag-grid tables on the same page, but getting the same kinda output. Here you go with all the code: tutorial1.js:

var columnDefs = [
    {headerName: "Athlete", field: "athlete", width: 150, sort: 'desc'},
    {headerName: "Age", field: "age", width: 90}

];


var gridOptions = {
    columnDefs: columnDefs,
    rowData: null,
    enableSorting: true,
    enableFilter: true,
    enableColResize: true
};


// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
    var gridDiv = document.querySelector('#myGrid1');
    new agGrid.Grid(gridDiv, gridOptions);

    // do http request to get our sample data - not using any framework to keep the example self contained.
    // you will probably use a framework like JQuery, Angular or something else to do your HTTP calls.
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('GET', '../dist/olympicWinners.json');
    httpRequest.send();
    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
            var httpResult = JSON.parse(httpRequest.responseText);
            gridOptions.api.setRowData(httpResult);
            console.log(httpResult);
        }
    };
});

tutorial.js

var columnDefs = [

    {headerName: "Country", field: "country", width: 120},
    {headerName: "Year", field: "year", width: 90, unSortIcon: true},
    {headerName: "Date", field: "date", width: 110},
    {headerName: "Sport", field: "sport", width: 110},
    {headerName: "Gold", field: "gold", width: 100},
    {headerName: "Silver", field: "silver", width: 100},
    {headerName: "Bronze", field: "bronze", width: 100},
    {headerName: "Total", field: "total", width: 100}
];


var gridOptions = {
    columnDefs: columnDefs,
    rowData: null,
    enableSorting: true,
    enableFilter: true,
    enableColResize: true
};


// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
    var gridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(gridDiv, gridOptions);

    // do http request to get our sample data - not using any framework to keep the example self contained.
    // you will probably use a framework like JQuery, Angular or something else to do your HTTP calls.
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('GET', '../dist/olympicWinners.json');
    httpRequest.send();
    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
            var httpResult = JSON.parse(httpRequest.responseText);
            gridOptions.api.setRowData(httpResult);
            console.log(httpResult);
        }
    };
});

index.html:

<!DOCTYPE html>
<html style="height: 100%;">

    <head lang="en">
        <meta charset="UTF-8">

        <script src="../dist/ag-grid.js"></script>

        <script src="tutorial.js"></script>
        <script src="tutorial1.js"></script>
    </head>

    <body style="height: 100%; margin: 0px;">

        <div id="myGrid" style="width: 100%; height: 100%;" class="ag-fresh"></div>
        <div id="myGrid1" style="width: 100%; height: 100%;" class="ag-fresh"></div>
    </body>
</html>

You can get olympicWinner.json from: https://raw.githubusercontent.com/vadimtsushko/ag-grid/master/web/olympicWinners.json

UPDATE1: I added the following in tutorial.js:

function buyside() {
    var filterApi = gridOptions.api.getFilterApi('Sport');
    filterApi.selectNothing();
    filterApi.selectValue('Swimming');
    //filterApi.selectValue('Great Britain');
    gridOptions.api.onFilterChanged();
}

function sellside() {
    var filterApi = gridOptions.api.getFilterApi('Sport');
    filterApi.selectNothing();
    filterApi.selectValue('Gymnastics');
    //filterApi.selectValue('Great Britain');
    gridOptions.api.onFilterChanged();
}


function clearFilters() {
    gridOptions.api.setFilterModel(null);
    gridOptions.api.onFilterChanged();
}

And the following line in index.html:

<center><span style="padding-bottom: 4px; display: inline-block;">


            <button onclick="buyside()">Swimming</button>
            <button onclick="sellside()">Gymnastics</button>
            <button onclick="clearFilters()">Clear Filters</button>

        </span></center>

But nothing happens on clicking the buttons. It works fine when there is only one ag-grid on the page though.

@JarodMoser No, myGrid is displayed correctly, but myGrid2 is not. A table skeleton for myGrid2 is formed though, but with column headers of myGrid only. — shek, Sep 22 '16 at 17:48
it might be useful to see the contents of sortGrid.js and loadingGrid.js. What I suspect is going on is that there are some variables leaking from one to the other somehow and getting over ridden — Jarod Moser, Sep 22 '16 at 17:52
There's a lot of code. Do you want to see it all? Like there's a jsp and then 2 js — shek, Sep 22 '16 at 17:53
the important parts would be the gridOptions for each grid and the part where you are assigning each grid to #myGrid and #myGrid2 — Jarod Moser, Sep 22 '16 at 17:58
@JarodMoser Updated the question. Tried it with the ag-grid example and I'm facing the same problem when loading two table. Please see above and tell me why this is happening. — shek, Sep 22 '16 at 18:25

score 6 · Accepted Answer · edited May 23 '17 at 11:53

You are running into a scoping issue, similar to what this answer explains. Since you have all your variables globally defined they are being overwritten when you don't want them to. You have two options to fix this:

1 - rename all globally named variables in tutorial1.js to include the number 1 after them (or whatever you desire) so you don't accidentally rewrite them again.

var columnDefs1 = [
        ...
    ];


var gridOptions1 = {
    columnDefs: columnDefs1,
    ...
};


// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
    var gridDiv = document.querySelector('#myGrid1');
    new agGrid.Grid(gridDiv, gridOptions1);

    ....
});

2 - wrap your whole code in each of the files in self invoking anonymous functions. Here is what it would look like:

(function(){
    var columnDefs = [
        {headerName: "Athlete", field: "athlete", width: 150, sort: 'desc'},
        {headerName: "Age", field: "age", width: 90}

    ];

    ...
})()

Questions: So, I'm trying to add filters, but that doesn't work. Please look at my updated code above. — shek, Sep 23 '16 at 14:13
Since this is a new problem, please create a new question. This will help to keep questions readable and answers are kept clear for future readers. Refer to [this answer on the meta site](http://meta.stackoverflow.com/a/296635/5187323) for more information. — Jarod Moser, Sep 23 '16 at 15:05

How to display two instances of ag-grid tables on the same page

1 Answers1