filterApplied Example with Angular-Ionic

Posted by: hoang.nguyen on 15 August 2018, 1:08 pm EST

  • Posted 15 August 2018, 1:08 pm EST

    Do you have any sample code on how to use filterApplied on Angular-Ionic?

    I have tried following but is it not working:

    html page:

    <wj-flex-grid
    id="Projects"
    #flexProjects
    [autoGenerateColumns]="true"
    [headersVisibility]="1"
    [allowSorting]="true"
    [itemsSource]="projects"
    [isReadOnly]="true"
    [selectionMode]="3"
    (filterApplied)="filterApplied(flexProjects,$event)"
    (loadedRows)="loadedRows(flexProjects)"
    (formatItem)="formatItem(flexProjects,$event)">
    <wj-flex-grid-filter
    [filterColumns]="['ProjectName']">
    </wj-flex-grid-filter>

    </wj-flex-grid>

    on ts page:

    import * as wjFilter from 'wijmo/wijmo.grid.filter';

    filterApplied(s, e): void {
    const filter = new wjFilter.FlexGridFilter(s);
    const colFilter = filter.getColumnFilter(e.col);

    console.log(colFilter);
    }

    this filterApplied function had never been triggered even I have clicked the filter icon on column header and applied new filter.

    Thank you very much.
  • Replied 16 August 2018, 7:17 am EST

    Hi,
    The filterApplied event belongs to the WjFlexGridFilter so the handler needs to be attached to the filter.
    Please refer to the following code snippet:-
    <wj-flex-grid #grid [itemsSource]="data">

    <wj-flex-grid-filter (filterApplied)="filterApplied(grid,$event)"></wj-flex-grid-filter>

    </wj-flex-grid>


    You may also refer to the following sample in ionic:-
    https://stackblitz.com/edit/ionic-kch4yy?file=pages%2Fwijmo-grid%2Fwijmo-flexgrid.html

    ~Sharad
  • Replied 16 August 2018, 6:34 pm EST

    Thank you Sharad very much for your quick respond. With you help, Now I can tell when user has click the ApPLY button. My next question is how can I retrieve the list of filter texts that user has selected for filtering

    As you can see in my example, user has select all values. Thank you very much.

  • Replied 17 August 2018, 8:28 am EST

    Hi,

    You can get the list of selected filter values using showValues properties of the valueFilter.

    Also, filterChanged event would be a better alternative for this as we can get the column in EventArgs whose filter has been changed.

    Please refer to the following code snippet:-

    filterChanged(filter, args){
    let valFilter = filter.getColumnFilter(args.panel.columns[args.col]).valueFilter;
    //get show values
    let showValues = valFilter.showValues;
    }

    You may also refer to the following sample:-
    https://stackblitz.com/edit/ionic-jmpgs1?file=pages%2Fwijmo-grid%2Fwijmo-flexgrid.ts

    ~Sharad
  • Replied 20 August 2018, 9:58 am EST

    Thank you sir very much
  • Replied 30 August 2018, 2:47 pm EST

    I need to code a button that when Clicked will clear all filter values on all columns in a flexgrid but I do not know where to start.

    This is what I have tried but it does not work:

    import * as wjGrid from 'wijmo/wijmo.grid';
    import * as wjGridFilter from 'wijmo/wijmo.grid.filter';

    @ViewChild('flexProjects') flexProjects: wjGrid.FlexGrid;


    resetFilter() {
    const filter = new wjGridFilter.FlexGridFilter(this.flexProjects);

    filter.clear();
    }

    Am I missing anything?

    Thank you very much.
  • Marked as Answer

    Replied 31 August 2018, 1:57 am EST

    Hi,

    To clear filter, all you need to do is call clear() method on existing instance of FlexGridFilter.
    Please refer to the following code snippet:-
    <wj-flex-grid [itemsSource]="data">
    <wj-flex-grid-filter #filter></wj-flex-grid-filter>
    </wj-flex-grid>
    <button (click)="filter.clear()" >Clear Filter</button>


    You may also refer to the following sample for the same:-
    https://stackblitz.com/edit/ionic-mmiovk?file=pages%2Fwijmo-grid%2Fwijmo-flexgrid.ts

    Regards
    Sharad
  • Replied 31 August 2018, 10:00 am EST

    Thank you Sharad very much.
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels