fiter icons not hiding when i clicked toolbar filter button

Posted by: bemes9226 on 16 February 2021, 5:26 pm EST

  • Posted 16 February 2021, 5:26 pm EST

    need to when i click filter icon in toolbar show filter button in columns,when i click again hide it.
  • Replied 17 February 2021, 2:26 pm EST

    Hi bemes9226,

    It seems that this is not the default filter of FlexGrid. Can you let me know how have you added this filter?

    Regards,
    Ashwin
  • Replied 18 February 2021, 10:29 pm EST

    <wj-flex-grid
    #grid
    [itemsSource]="data"
    [allowSorting]="false"
    [autoGenerateColumns]="false"
    [columnGroups]="columns"
    [headersVisibility]="1"
    [showSort]="true"
    class="no-scrollbars"
    (click)="getId(grid,$event)"
    (initialized)="initGrid(grid,$event)" >
    <wj-flex-grid-filter #filter></wj-flex-grid-filter>
    </wj-flex-grid>

    @ViewChild('filter', { static: true }) gridFilter: wjcGridFilter.FlexGridFilter;
    @ViewChild('grid', { static: true }) flexGrid: wjcGrid.FlexGrid;
    toolbarData: ({ label: string; icon: string; action: () => void; control?: undefined; } | { control: { label: string; checked: boolean; action: (control: any) => void; }; label?: undefined; icon?: undefined; action?: undefined; })[];
    toolbarConfig: any = {
    filterButtonHidden: false,
    filtersHidden: true,
    groupButtonHidden: false,
    groupPanelHidden: true,
    toggleFilter: this.toggleFilter.bind(this),
    toggleGroupPanel: () => {
    this.toolbarConfig.groupPanelHidden = !this.toolbarConfig.groupPanelHidden;
    }
    };
    toggleFilter() {
    this.toolbarConfig.filtersHidden = !this.toolbarConfig.filtersHidden;
    if (this.toolbarConfig.filtersHidden) {
    this.gridFilter.clear();
    }
    }
    https://codesandbox.io/s/wijmo-angular-forked-0umf6
  • Replied 21 February 2021, 11:04 pm EST

    Hi,

    From the code snippet also, I can see that you are using some toolbar to display the filter. I am thinking that there is a method that you call when the filter button on the toolbar is clicked.
    Can you let me know which toolbar you are using and what method is called when clicking on the filter icon.

    ~regards
  • Replied 20 April 2021, 10:37 am EST

    <bento-toolbar class="bento-toolbar" [items]="toolbarData">
    <!-- BENTO TOOLBAR PROJECTED CONTENT -->
    <ul class="nav navbar-right" role="group">
    <li *ngIf="!toolbarConfig.filterButtonHidden">

    <button class="btn btn-outline-primary btn-icon btn-toggle" [ngClass]="{'active':!toolbarConfig.filtersHidden}"
    [attr.aria-pressed]="!toolbarConfig.filtersHidden" (click)="toolbarConfig.toggleFilter()" placement="bottom"
    ngbTooltip="{{!toolbarConfig.filtersHidden ? 'Hide filters':'Show filters'}}" aria-label="toggle filters">
    <i aria-hidden="true" class="bento-icon-filter-az"></i>
    </button>
    </li>
    </ul>
    </bento-toolbar>
    this is the toolbar filtericon toggle code.
    1)when i click icon fitericon added in the respective columns when i click againfitericon remove the fitericon fro all columns.
    2)parlally when i click header sorting also need to be work
  • Replied 20 April 2021, 10:40 am EST


    toolbarConfig: any = {
    filterButtonHidden: false,
    filtersHidden: true,
    groupButtonHidden: false,
    groupPanelHidden: true,
    toggleFilter: this.toggleFilter.bind(this),
    toggleGroupPanel: () => {
    this.toolbarConfig.groupPanelHidden = !this.toolbarConfig
    .groupPanelHidden;
    }


    toggleFilter() {
    this.toolbarConfig.filtersHidden = !this.toolbarConfig.filtersHidden;
    if (this.toolbarConfig.filtersHidden) {
    this.gridFilter.clear();
    }
    }

  • Replied 21 April 2021, 12:28 am EST

    Hi bemes9226,

    It seems that your requirement is to hide the filter icons dynamically. You can use the defaultFilterType property of the FlexGridFilter to show and hide the filters. Please refer to the sample link below for reference:

    https://stackblitz.com/edit/angular-9-0-0-rc-1-gwwv9b

    ~regards
  • Replied 21 April 2021, 11:56 pm EST

    i want hide the filter and sorting for checkbox.
    i dont want show filter icon beside ofthe favourate,pdf,excel,html columns i want hide it
  • Replied 22 April 2021, 5:32 pm EST

    Hi,

    You can remove the sort by setting the allowSorting property of the columns to false and remove the filter by setting the filterType property of each of the column filter to None.

    https://codesandbox.io/s/wijmo-angular-forked-fjr8x

    ~regards
  • Replied 25 April 2021, 11:59 pm EST

    1)i am used same logic sorting is removed but filter icon still showing
    initFilter(filter) {
    debugger;
    let nonFilterColumns = ["pdf", "html", "excel"];
    nonFilterColumns.forEach((c) => {
    let filterCol = filter.getColumnFilter(c);
    filterCol.filterType = "None"; // remove filter;
    filterCol.column.allowSorting = false; // remove sorting
    });
    }
    2)when i mouse over on favicon show tooltip text
  • Replied 26 April 2021, 9:13 pm EST

    Hi,

    Regarding 1, please make sure that your code is executing this line as well as the filter variable contains the instance of WjFlexGridFilter.

    Regarding 2, you can handle the formatItem event of the FlexGrid and use the setTooltip method of Tooltip class to add a tooltip.

    https://codesandbox.io/s/wijmo-angular-forked-n3zyw

    ~regards
  • Replied 27 April 2021, 11:00 pm EST

    when i given timeout firsttime not hiding the filter icons,when i refresh the page second time it will hiding
    let nonFilterColumns = ["pdf", "html", "excel"];
    setTimeout(() => {
    nonFilterColumns.forEach((c) => {
    let filterCol = filter.getColumnFilter(c);

    filterCol.filterType = 0; // remove filter;

    filterCol.column.allowSorting = false; // remove sorting
    });
    }, 1500);
  • Replied 28 April 2021, 7:06 pm EST

    Hi bemes9226,

    Can you share the HTML side as well as the complete method of TS side so that I can check what may be causing this issue?

    ~regards
Need extra support?

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

Learn More

Forum Channels