shek shek - 2 months ago 43
HTML Question

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

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

This is the output I'm getting:
Output

Answer

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}

    ];

    ...
})()
Comments