Search code examples
htmlcssag-gridgrid-layout

ag-grid JS not showing even though height set with css grid layout

I would like to have an ag-grid below a graph on my webpage.

If I don't manually set the height property of the ag-grid it doesn't show in this jsFiddle.

I initialize the grid as such :

let moves_data = res.result;
let gridOptions = {
    rowData: moves_data,
    columnDefs: [
      {headerName: 'date_peak',field: 'date_peak'},
      {headerName: 'date_through',field: 'date_through'},
      {headerName: 'udl_peak',field: 'udl_peak'},
      {headerName: 'udl_through',field: 'udl_through'},
      {headerName: 'value',field: 'value'},
    ]
  };
let movesGrid = new agGrid.Grid(document.querySelector("#results"), gridOptions);
movesGrid.gridOptions.api.sizeColumnsToFit();
movesGrid.gridOptions.columnApi.autoSizeAllColumns();

The HTML is:

  <div id="results_container">
    <div id="graph-container" class="dygraph-container">
      <div id="graph"></div>
    </div>
    <div id="results" class="ag-theme-balham" style="height:300px;"></div>
  </div>

and the CSS that I would expect to take care of the height issue is :

#results_container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 400px;
}

How can I get the ag-grid to show using only the CSS grid-layout properties ? If I can't use those, why is that the case ?

Solution

  • There's couple of ways to set height for your grid.

    1- Set domLayout: 'autoHeight' on grid property (It's a nightmare for large numbers of rows)

    When you're setting autoHeight you're able to set min height for your grid but it's not possible to specify a max height.

    As described in it's documentation:

    When domLayout='autoHeight' then your application should not set height on the grid div, as the div should be allowed flow naturally to fit the grid contents. When auto height is off then your application should set height on the grid div, as the grid will fill the div you provide it.

    • As you set different numbers of rows into the grid, the grid will resize it's height to just fit the rows.
    • As the grid height exceeds the height of the browser, you will need to use the browser vertical scroll to view data (or the iFrames scroll if you are looking at the example embedded below).
    • The height will also adjust as you filter, to add and remove rows.
    • If you have pinned rows, the grid will size to accommodate the pinned rows.
    • Vertical scrolling will not happen, however horizontal scrolling, including pinned columns, will work as normal.
    • It is possible to move the grid into and out of 'full height' mode by using the api.setDomLayout() or by changing the bound property domLayout.

    2- Set it in your scripts (Somehow better than autoheight):

    gridOptions.api.setDomLayout('normal');
document.querySelector('#results').style.height = '400px';

    3- If you prefer to use css you can do it using general css rules like below:

    .ag-theme-balham .ag-cell
{
    height: 300px;
}

    4- Or, If you like to use grid layout framework you can find it's example here.

    Here is the final view implemented on your example (I reduced the amount of data to not touch the the edge of SO character limit):

    $(function() {

  let res = {
	"data": [{
	  "date": "2000-01-03",
	  "value": 101.45
	}, {
	  "date": "2000-01-04",
	  "value": 103.22
	}, {
	  "date": "2000-01-05",
	  "value": 104.14
	}, {
	  "date": "2000-01-06",
	  "value": 105.23
	}, {
	  "date": "2000-01-07",
	  "value": 105.34
	}, {
	  "date": "2000-01-10",
	  "value": 105.16
	}, {
	  "date": "2000-01-11",
	  "value": 105.95
	}, {
	  "date": "2000-01-12",
	  "value": 105.79
	}, {
	  "date": "2000-01-13",
	  "value": 106.17
	}, {
	  "date": "2000-01-14",
	  "value": 105.87
	}, {
	  "date": "2000-01-17",
	  "value": 104.9
	}, {
	  "date": "2000-01-18",
	  "value": 105.67
	}, {
	  "date": "2000-01-19",
	  "value": 105.32
	}, {
	  "date": "2000-01-20",
	  "value": 105.47
	}, {
	  "date": "2000-01-21",
	  "value": 104.78
	}, {
	  "date": "2000-01-24",
	  "value": 105.57
	}, {
	  "date": "2000-01-25",
	  "value": 106.04
	}, {
	  "date": "2000-01-26",
	  "value": 105.66
	}, {
	  "date": "2000-01-27",
	  "value": 105.12
	}, {
	  "date": "2000-01-28",
	  "value": 107.13
	}, {
	  "date": "2000-01-31",
	  "value": 107.32
	}, {
	  "date": "2000-02-01",
	  "value": 107.85
	}, {
	  "date": "2000-02-02",
	  "value": 108.16
	}, {
	  "date": "2000-02-03",
	  "value": 107.56
	}, {
	  "date": "2000-02-04",
	  "value": 107.19
	}, {
	  "date": "2000-02-07",
	  "value": 108.62
	}, {
	  "date": "2000-02-08",
	  "value": 109.47
	}, {
	  "date": "2000-02-09",
	  "value": 108.79
	}, {
	  "date": "2000-02-10",
	  "value": 109.27
	}, {
	  "date": "2000-02-11",
	  "value": 108.82
	}, {
	  "date": "2000-02-14",
	  "value": 108.96
	}, {
	  "date": "2000-02-15",
	  "value": 109.22
	}, {
	  "date": "2000-02-16",
	  "value": 109.44
	}, {
	  "date": "2000-02-17",
	  "value": 110.56
	}, {
	  "date": "2000-02-18",
	  "value": 111.09
	}],
	"result": [{
	  "date_peak": "2000-01-13",
	  "date_through": "2000-01-03",
	  "udl_peak": 106.17,
	  "udl_through": 101.45,
	  "value": 4.652538196155742
	}, {
	  "date_peak": "2000-02-02",
	  "date_through": "2000-01-21",
	  "udl_peak": 108.16,
	  "udl_through": 104.78,
	  "value": 3.2258064516129004
	}, {
	  "date_peak": "2000-02-08",
	  "date_through": "2000-02-04",
	  "udl_peak": 109.47,
	  "udl_through": 107.19,
	  "value": 2.127064091799613
	}, {
	  "date_peak": "2000-02-21",
	  "date_through": "2000-02-09",
	  "udl_peak": 111.26,
	  "udl_through": 108.79,
	  "value": 2.2704292673958903
	}, {
	  "date_peak": "2000-03-14",
	  "date_through": "2000-02-24",
	  "udl_peak": 105.12,
	  "udl_through": 111.37,
	  "value": -5.611924216575382
	}, {
	  "date_peak": "2000-03-23",
	  "date_through": "2000-03-14",
	  "udl_peak": 107.24,
	  "udl_through": 105.12,
	  "value": 2.0167427701674123
	}, {
	  "date_peak": "2000-03-31",
	  "date_through": "2000-03-23",
	  "udl_peak": 102.78,
	  "udl_through": 107.24,
	  "value": -4.158895934352847
	}, {
	  "date_peak": "2000-04-11",
	  "date_through": "2000-03-31",
	  "udl_peak": 106.92,
	  "udl_through": 102.78,
	  "value": 4.028021015761829
	}, {
	  "date_peak": "2000-04-17",
	  "date_through": "2000-04-11",
	  "udl_peak": 104.54,
	  "udl_through": 106.92,
	  "value": -2.2259633370744436
	}, {
	  "date_peak": "2000-05-03",
	  "date_through": "2000-04-17",
	  "udl_peak": 109.02,
	  "udl_through": 104.54,
	  "value": 4.285440979529365
	}]
  }

  let moves_data = res.result;
  let gridOptions = {
	rowData: moves_data,
	columnDefs: [{
		headerName: 'date_peak',
		field: 'date_peak'
	  },
	  {
		headerName: 'date_through',
		field: 'date_through'
	  },
	  {
		headerName: 'udl_peak',
		field: 'udl_peak'
	  },
	  {
		headerName: 'udl_through',
		field: 'udl_through'
	  },
	  {
		headerName: 'value',
		field: 'value'
	  },

	]
  };
  let movesGrid = new agGrid.Grid(document.querySelector("#results"), gridOptions);
  movesGrid.gridOptions.api.sizeColumnsToFit();
  movesGrid.gridOptions.columnApi.autoSizeAllColumns();

  //graph with arrows
  let udl_data = res.data;
  let g = new Dygraph(
	document.getElementById("graph"),
	udl_data.map((x) => {
	  let res = [];
	  for (let col in x) {
		if (x.hasOwnProperty(col)) {
		  if (col.toLowerCase() === "date") {
			res.push(new Date(x[col]));
		  } else {
			res.push(parseFloat(x[col]));
		  }
		}
	  }
	  return res;
	}), {
	  labels: Object.keys(udl_data[0]),
	  underlayCallback: (canvas, area, g) => {
		moves_data.map((row) => {
		  let coordsA = g.toDomCoords(new Date(row.date_through), parseFloat(row.udl_through));
		  let coordsB = g.toDomCoords(new Date(row.date_peak), parseFloat(row.udl_peak));

		  let add_height = -15;
		  coordsA[1] += add_height;
		  coordsB[1] += add_height;

		  canvas.beginPath();
		  canvas.moveTo(coordsA[0], coordsA[1]);
		  canvas.lineTo(coordsB[0], coordsB[1]);
		  canvas.strokeStyle = "black";
		  canvas.stroke();

		  let radius = 5;

		  canvas.beginPath();
		  canvas.moveTo(coordsA[0], coordsA[1]);
		  canvas.arc(coordsA[0], coordsA[1], radius, 2 * Math.PI, Math.PI, false);
		  canvas.fillStyle = "green";
		  canvas.fill();

		  canvas.beginPath();
		  canvas.moveTo(coordsB[0], coordsB[1]);
		  canvas.arc(coordsB[0], coordsB[1], radius, Math.PI, 2 * Math.PI, false);
		  canvas.fillStyle = "red";
		  canvas.fill();

		});
	  }
	}
  );
  let the_width = $("#tabs-research-tabs-udl_move-graph-container").css("width");
  $("#tabs-research-tabs-udl_move-graph").css("width", the_width);
  g.resize();

})
    .container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 50vh;
width: 100%;
}

#left {
	grid-row: 1/1;
	grid-column: 1/1;
	background: gray;
}

#results {
	grid-row: 1/1;
	grid-column: 2/2;
	overflow: hidden;
}

#right {
	grid-row: 1/1;
	grid-column: 3/3;
	background: gray;
}
    <div id="results_container">
<div id="graph-container" class="dygraph-container">
  <div id="legend" class="dygraph-legend"></div>
  <div id="graph"></div>
</div>
<div class="container">
  <div id="left"></div>
  <div id="results" class="ag-theme-balham"></div>
  <div id="right"></div>
</div>
</div>
<script type='text/javascript' src='http://cdn01.dailycaller.com/wp-includes/js/jquery/jquery.js?ver=1.7.2'></script>

    If the example is error prone you can find working example here in fiddle