How to get the column name by clicking the header of column in ag-grid

0
votes

How to get the name of column header by clicking the header of a column in ag-grid, actually I want to perform server-side sorting and filtering when clicking on a column header, for that, I need the name of the column on an event.

HTML Template

    <ag-grid-angular [gridOptions]="gridOptions" style="width: 100%; 
     height: 650px;" (gridReady)="onGridReady($event)"
     class="ag-theme-balham"  [columnDefs]="columnDefs" 
     [rowData]="rowData">
    </ag-grid-angular>

TS

rowData;
columnDefs = [
{
    headerName: "name",
    field: "athlete",
},
{
  headerName: "Status",
  field: "age"
}
];

onGridReady(params: any) {
  this.service.getData().subscribe((e)=>{
    this.rowData = e;
  });
}
3
angularag-grid
ag-grid-angular-how-to-get-click-events-on-header – HDJEMAI
the best answer so far I found is also on stackoverflow here: stackoverflow.com/questions/56337846/…. for the full example inspect this repo: github.com/ag-grid/ag-grid-angular-cli-example – bboydflo

3 Answers

0
votes

At the time of this writing, there is no event for listening to header column click in ag-grid. Your options are:

0
votes

Html:

<ag-grid-angular style="width: 500px; height: 500px"
                 class="ag-theme-balham"
                 [rowData]="tableRows"
                 [columnDefs]="columnDefs"
                 (sortChanged)="sort($event)">
</ag-grid-angular>

JS:

sort(event): void {
  const fieldName = event.api.getSortModel();  // получение названия столбца
}
0
votes

There is no such function to listen to which column's header was clicked on. api.getSortModel() is deprecated, sort information is now part of Column State. To listen to the header you clicked, you have to extract it from columnApi and getColumnState() funtion.

It returns the col Id and sort type (asc,desc,null). Every third click will be considered as null.

So to find the column name, you could loop through the columnApi.getColumnState() and with col ID can be mapped with the columnDefs `

<AgGridReact
       columnDefs={this.state.columnDefs}
       onSortChanged={this.sortChanged}
/>

sortChanged = (val) => {
        const columnSortState = val.columnApi.getColumnState();
        const columns = this.state.columnDefs;
        columns.map((column,i) => {
            Do your code magic here
        });
    }

`