Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ag-grid hiding rows

Is there any implemented functionality to conditionally hide rows?

I instantiate them like this:

let rows = [
    { name: "Adam", isVisible: true },
    { name: "Bert", isVisible: true },
    { name: "Carl", isVisible: false }
];

for(let row of rows)
  row["height"] = row.isVisible ? 25 : 0;

this.rowData = rows;

And then I provide this function to set the row height:

this.gridOptions.getRowHeight = (params) => {
    return params.data.height;
}

This is not a perfect solution, especially because if the grid ends with a row of height 0 it shows that row anyway (with the height of 4px or so)

like image 259
Jakub Siuda Avatar asked Mar 09 '23 17:03

Jakub Siuda


2 Answers

I think the best way would be to filter the data based on the property isVisible of the object.

An implementation could be:

gridOptions.isExternalFilterPresent = () => {return true;}
gridOptions.doesExternalFilterPass = (node) => {
    return gridOptions.api.getValue("isVisible", node)
}

if the datamodel data changes then you just need to call gridOptions.api.onFilterChanged()

like image 128
Jonathan Naim Avatar answered Mar 19 '23 05:03

Jonathan Naim


As a workaround for the 4px issue when setting row height to 0, i suggest you also use

gridOptions.getRowStyle = function(params) {
            //some filter
            return { 'display': 'none' };
        }
like image 32
Mostafa Ibrahim Avatar answered Mar 19 '23 04:03

Mostafa Ibrahim