CODEWITHSUNDEEP
javascriptangularag-grid
dev-dan
dev-dan

Reputation: 6283

How to sort Column when data is cell rendering a component Angular 6

I'm using Ag-grid to try and have some data on screen nice and tidy and well organised, for one of my columns I have it set up so all of the cells have a component rendered in, a span and a div.

The Ag-grid lives within a modal and when that it opened I am using 

this.gridColumnApi.getColumn('value').setSort("desc");

to set the sort to descending in order for it to come out how I planned. Now the Component in each cell looks like this.

<div class="d-flex">
  <span>{{status}}</span>
<div class="data-block"
     [class.example1]="status === 'exampleValue1'"
     [class.example2]="status === 'exampleValue2'"
     [class.example3]="status === 'exampleValue3'"
     [class.example4]="status === 'exampleValue4'">
</div>

I still need to and sort by the text value but unsure how to as now the sort functionality does not work.

I have tried calling the setSort functions on the API but cant work out how to achieve the required outcome. Any way on how people have managed to sort cell rendered components would be awesome.

Upvotes: 0

Views: 1212

Answers (1)

Naga Sai A
Naga Sai A

Reputation: 10975

To achieve expected result , use below option of using setSortModel method instead of setSort

const defaultSortModel = [
            {colId: "value", sort: "asc"},
        ];

this.gridOptions.api.setSortModel(defaultSortModel);

Upvotes: 1

Related Questions