Select Grouping Row in ag-Grid

7
votes

I'm wondering if there's a way to select the "Grouping" row in ag-grid.

For example, in the example shown on the website: http://www.ag-grid.com/angular-grid-grouping/index.php

You can set the "rowSelection" parameter to "single" in order to highlight an entire row at the lowest node. However, that does not allow you to highlight the "Country" row.

In the example, the only way to do this is to "select all" the elements below that row.

Thanks!

4
angularjsag-grid

4 Answers

4
votes

According to the documentation, setting the grid option groupSelectsChildren to false will make the grouping row selectable, independently from its children.

groupSelectsChildren: When true, selecting a group will have the impact of selecting all it's children. The group will then display 'selected' when all children are selected, 'unselected' when none are selected and 'intermediate' when children have a mix of selected and unselected. When the node is selecting children, it will never appear in the selected set when calling api.getSelectedNodes(). When false, then the group is selectable independently of the child nodes. When selecting the group node independently of the children, it will appear in the set when calling api.getSelectedNodes().

1
votes

I had the same problem so I worked around it by emulating the look-and-feel of selecting rows.

In your columnDefs object, add the cellClassRules attribute to EVERY column definition (so every cell will be highlighted, making it appear that the row itself is highlighted when you click on it):

var columnDefs = [
    { headerName: "#1", cellClassRules: { rowSelected: CustomRowStyle }, field: "Col1" },
    { headerName: "#2", cellClassRules: { rowSelected: CustomRowStyle }, field: "Col2" },
    { headerName: "#3", cellClassRules: { rowSelected: CustomRowStyle }, field: "Col3" }
]

Then add an event listener for onCellClicked in your gridOptions object:

onCellClicked: function(cell) {
    SelectedRowIndex = cell.rowIndex;
    $scope.gridOptions.api.refreshView();
}

In your controller, define a variable called SelectedRowIndex:

var SelectedRowIndex; // this will contain the currently selected row number

Now create a function called CustomRowStyle which is called by ag-grid each time it is about to render a cell on-screen. This function will check if the cell is in the same row as the SelectedRowIndex (based on which row the user last clicked on) to determine if the cell should appear with the rowSelected class.

function CustomRowStyle(params) {
    return params.rowIndex === SelectedRowIndex
}

Finally, define a rowSelected class with your selected row CSS:

.rowSelected {
    background-color: silver !important;
}

Whichever row you click on (whether it's a group item or a child item) will appear with the rowSelected CSS. Your controller can always know which row is currently selected by checking the SelectedRowIndex variable.

1
votes

This probably won't work for all cases but I found that as of version 20.2.0 RowNode's have a 'parent' property (Note: I'm not saying that feature was added in 20.2.0, just that I haven't gone and checked previous versions). So I do this:

api.getRowNode('child-row-id').parent.setSelected(true)

Obviously depending on how many levels of grouping you have and how dynamic that is (i.e. can the user change the grouping configuration, can you have n levels of grouping, etc.) you'll need to detect and adjust, but this works well for my particular use case of remembering what was selected and reselecting it on page refresh because my grid always starts out in the same grouping state on page load.

0
votes

set groupSelectsChildren={false} and use this code onRowClicked={this.onRowClicked} use any unique data identifier for selecting the node.

onRowClicked = (row) =>{
   
   let that = this;
   this.gridApi.forEachNode(node =>{
   if(node.data.id === row.data.id) { that.gridApi.selectNode(node,true);}
});

}