ag-grid multiple instances in the same page using single gridOptions

Question

I am using ag-grid in my application. I would like to use the same instance of the grid options with two grid on the same page. ag-grid only renders one of the grids and leaves the other one empty.

This plnkr shows the issue

http://plnkr.co/edit/4rRNRGbUoy8QhAhGadpQ?p=preview

 <!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
       <script src="https://www.ag-grid.com/dist/ag-grid.js?ignore=notused24"></script>
    <script src="script.js"></script>
  </head>

<body ng-app="example" ng-controller="exampleCtrl">
  <button ng-click="loadData()">Load Data</button>
  <button ng-click="showPopup()">Toggle Docked</button>
  <div ng-show="docked">
    <h2>Docked</h2>
    <div ag-grid="gridOptions" class="ag-fresh" style="height: 100%;"></div>
  </div>
  <div ng-show="docked">
    <h2>UnDocked</h2>
    <div ag-grid="gridOptions" class="ag-fresh" style="height:100%;"></div>
  </div>
</body>
</html>

jwoe jwoe · Accepted Answer · 2016-09-27T15:00:26

I'm not sure ag-grid supports this.

Maybe you can create a second angular controller and duplicate your gridoptions there?

EDIT: From https://www.ag-grid.com/javascript-grid-master-slave/ :

Using a master/slave relationship, you can have 2 grids with synced columns-- column changes in one grid will be reflected in the other.

To have one grid act as the 'slave' to another, use the slaveGrids option in the master's gridOptions:

gridOptionsSlave = {
   // some grid options here
   };
gridOptionsMaster = {
    // some grid options here
   slaveGrids: [gridOptionsSlave]
 }

Note that pivot functionality does not work with the master/slave relationship, as the relationship depends on both grids having the same columns.

/j

ag-grid multiple instances in the same page using single gridOptions

1 Answers