CODEWITHSUNDEEP
angularag-gridag-grid-angular
djs
djs

Reputation: 1690

AgGrid custom filter not created until interaction

I have a custom filter component on a column in my grid. I've noticed that the filter component is not constructed until I click on the filter icon in the column header. This means that the data is not filtered according to my default settings (e.g., filter out records where status == StatusEnum.Complete).

As a workaround, I've found that I can get a filter instance in the onGridReady event by calling api.getFilterInstance('status'), and this causes the filter component to be created and thereby apply default filtering.

This workaround seems a bit clunky. The filter variable is unused in the onGridReady event, which causes warnings in the IDE / build. Another developer may come along and delete this line of code, thinking it is unnecessary.

Is there a better way to force my custom filter to be instantiated when the grid is created? I'm using AgGrid 17.1 and Angular 4.4.

The grid is configured like so:

gridOptions: GridOptions = {
    enableFilter: true,
    onGridReady: (event) => {
        let filter = event.api.getFilterInstance("status"); // forces the filter component to be constructed
        let data = this.loadAsyncData();
        event.api.setRowData(data);
    },
    columnDefs: [
    ...
    {
        headerName: "Status",
        field: "status",
        filterFramework: MyCustomStatusFilterComponent,
        filterParams: {
            valueGetter: (obj) => { return obj.data.statusEnum; },
            hideCompleteByDefault: true,
            ...
        }
    },
    ....
    ]
}

I've set up an example that demonstrates the issue. Note the "hack" on line 63 of app.component.ts.

Upvotes: 3

Views: 5605

Answers (2)

Mayur Parmar
Mayur Parmar

Reputation: 21

Here You Use Custom Filtering,

If Your Row Not Bind with Value Then You Use Custom Filtering.

         {
            headerName: "Date",
            field: "date",

            //Custom  Filter Start

            filterValueGetter: (params: ICellRendererParams) => 
            {
              if (this.transactionIsEmpty(params.data)) 
              {
                const tx: Transaction = params.data;
                return moment(tx.date).format('DD-MM-YYYY');
              }
            },

            //Custom  Filter End

            cellStyle: { 'text-align': 'left' },
            minWidth: 250,
        }

Upvotes: 0

un.spike
un.spike

Reputation: 5113

First of all - it's two independent thing, custom filter and filter initialization.

I suppose you've mixed those two phases and trying to achieve an unexpected result.

Your custom filter shouldn't contain pre-defined logic cuz init will occur only with first touch of your filter, you have to divide your logic and then in onGridReady you can execute setModel with needed things. or keep a hack as you've already mentioned

Upvotes: 3

Related Questions