2

I have a Div whose size can vary (only div resize) based on user action (small & large view) and this div contain ag-grid.
Initially div/grid load in compress size so I have used class according to that like (small font-size, height, padding etc.) to remove scrolls
but I want when user enlarge the div size the class will swap with another class (large font-size, height etc.) but I couldn't find any grid api or method to set cellClass and headerClass dynamically.

One more thing can I update that in gridOptions and load grid according to new option.

Nazir Ahmed
  • 615
  • 4
  • 14
  • 29
  • Try if this helps https://www.ag-grid.com/javascript-grid-cell-styling/ – dileepkumar jami Mar 15 '19 at 13:28
  • @dileepkumarjami I have already set the cellClass and cellClass rules but my scenario is bit different cellClassRule apply based on grid params but I want to change grid properties on parent div resize – Nazir Ahmed Mar 15 '19 at 13:44

1 Answers1

6

Add a listener to gridSizeChanged event. In the listener, check for the window/div size and apply CSS classes accordingly.

var gridOptions = {
  ...
  onGridSizeChanged: onGridSizeChanged
};

function onGridSizeChanged(params) {
  let newClass = (css class for new width)
  gridOptions.api.getColumnDef(colId).headerClass = newClass;
  gridOptions.api.refreshHeader()
}
Chris
  • 1,154
  • 10
  • 15
  • This line not working in angular 6 `let newClass = (css class for new width)` so justed add the new class on runtime by this way `function onGridSizeChanged(params) { gridOptions.api.getColumnDef(colId).headerClass = 'expanded-grid-header'; gridOptions.api.refreshHeader() }` Thanks @Chris u point me to the right direction – Nazir Ahmed Mar 18 '19 at 09:53
  • Thanks. Yes, the '(css class for new width)' is a code placeholder. Glad that it helped your forward. – Chris Mar 18 '19 at 13:02