CODEWITHSUNDEEP
angularfilterag-grid
wakiwiki
wakiwiki

Reputation: 223

Ag-Grid filter not shown

I have this code in my html file:

<ag-grid-angular   #agGrid
                   style="height: 300px"
                   [rowData]="rowData"
                   [columnDefs]="columnDefs"
                   [gridOptions]="gridOptions"
                   [enableFilter]="true"
                   (rowSelected)="getSelectedRows($event)">

</ag-grid-angular>

and the filter icon is visible but when click on that nothing happens and ag-grid filters not shown. What is going wrong?

component.ts:

import { AgGridNg2 } from 'ag-grid-angular';

@ViewChild('agGrid') agGrid: AgGridNg2

columnDefs = [
    {
        headerName: 'row',
        headerCheckboxSelection: true,
        checkboxSelection: true,
        pinned: "right",
        width: 150
    },
    { headerName: 'code', field: 'Code'},
    { headerName: 'name', field: 'Name' },

];

gridOptions = {
    rowSelection: 'multiple',
    enableSorting: 'true',
    enableColResize: 'true',
    enableRtl: 'true',
    pagination: 'true',
    paginationAutoPageSize: 'true',
    animateRows: 'true'
}

Upvotes: 1

Views: 10418

Answers (3)

Feroz
Feroz

Reputation: 1

Updating to the latest versions plus changing themes from className="ag-theme-alpine ag-theme-datasheetTable" to className="ag-theme-alpine-fusion" has resolved the issue

Upvotes: 0

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

Lia
Lia

Reputation: 11982

you are assigning string 'true' to Boolean(true or false), and the ts code should be something like:

import {Component} from "@angular/core";
import {GridOptions} from "ag-grid";

@Component({
    selector: 'app-my-grid-application',
    templateUrl: './my-grid-application.component.html'
})
export class MyGridApplicationComponent {

    private gridOptions: GridOptions ;
    constructor() {
        this.gridOptions = <GridOptions>{
          enableSorting: true,
          enableFilter: true
        };
        this.gridOptions.columnDefs = [
          {
            headerName: 'row',
            headerCheckboxSelection: true,
            checkboxSelection: true,
            pinned: "right",
            width: 150,
            field: 'row'
          },
          { 
            headerName: 'Code', 
            field: 'code'
          },
          { 
            headerName: 'Name', 
            field: 'name' 
          },
        ];
        this.gridOptions.rowData = [
            {row: 'test', code: 'test' , name:'test'}
        ]
    }

    getSelectedRows(e){
      console.log('e')
    }
}

DEMO

Upvotes: 2

Related Questions