Question

9

How to listen sortChange(event) on Angular for ag-Grid?

rated 0 times [ 12] [ 3] / answers: 1 / hits: 9185 / 4 Years ago, mon, february 24, 2020, 12:00:00

I have very basic example here:
https://stackblitz.com/edit/angular-ag-grid-angular-cwvpic?file=app/my-grid-application/my-grid-application.component.ts

In this ag-grid I want to print which column clicked and ordered in what way.To do that basically I found method sortChange(event) on official docs.But I couldn't find a way to implement this method.Here what I tried.

 sortChange(event){

      console.log(event);

    }



<div style=width: 200px;>

    <ag-grid-angular

     (sortChange)=sortChange($event) 

     #agGrid style=width: 100%; height: 200px; 

    class=ag-theme-fresh [gridOptions]=gridOptions>

    </ag-grid-angular>

</div>

Unfortunately this didn't work.It prints nothing.Do you know how I can listen sort changes on each column with column name?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

clarkulisesa

Add To Favorites

Follow

Total Points: 422

Total Questions: 93

Total Answers: 112

Location: Austria

Member since Thu, Jan 7, 2021

3 Years ago

clarkulisesa questions

1 Google BigQuery Error: Syntax error: Illegal input character %

Fri, Sep 18, 20, 00:00, 4 Years ago

1 how to change state of a react component from another component

Mon, Jun 22, 20, 00:00, 4 Years ago

1 How to compare objects using lodash regardless on their order

Tue, Jun 16, 20, 00:00, 4 Years ago

1 Vue JS provide/inject and Props

Mon, Aug 12, 19, 00:00, 5 Years ago

1 How to change height of react-navigation header

Wed, Mar 27, 19, 00:00, 5 Years ago

View All

answered 4 Years ago malkajillc · Accepted Answer

It is sortChanged and not sortChange (has a d).

Try:

  printSortStateToConsole() {

    const sortState = this.gridApi.getSortModel();

    if (sortState.length == 0) {

      console.log("No sort active");

    } else {

      console.log("State of sorting is:");

      for (var i = 0; i < sortState.length; i++) {

        const item = sortState[i];

        console.log(i + " = {colId: " + item.colId + ", sort: " + item.sort + "}");

      }

    }

  }



onGridReady(params: any) {

      this.gridApi = params.api;

 }

<div style="width: 200px;">

    <ag-grid-angular

       #agGrid style="width: 100%; height: 200px;" 

       class="ag-theme-fresh"

       (sortChanged)="printSortStateToConsole($event)"

       (gridReady)="onGridReady($event)"

       [gridOptions]="gridOptions">

    </ag-grid-angular>

</div>

Edit:
Your code is good, but you have to populate this.gridApi when the grid is ready like that (checkout (gridReady) and onGridReady). I get what you want to be logged into the console this way.