Filter icon is coming after latest update version

Posted by: nilesh_nichal on 8 June 2023, 8:40 pm EST

  • Posted 8 June 2023, 8:40 pm EST - Updated 8 June 2023, 8:45 pm EST

    Hi Team,

    After updating to latest version, we are getting the filter in every column which was not there earlier. Please refer the screenshot below.

    Note: We are using below extend class

    export class GridFilterComponent extends WjFlexGridFilter {
      static readonly meta: IWjComponentMetadata = {
        outputs: wjFlexGridFilterMeta.outputs
      };

    export declare class WjFlexGridFilter extends wjcGridFilter.FlexGridFilter implements OnInit, OnDestroy, AfterViewInit {
        static readonly meta: IWjComponentMetadata;
        private _wjBehaviour;


    Please let us know about the fix to be done and if anything required from my end.

    Please provide the solution in angular.

    Thanks

  • Posted 11 June 2023, 5:06 pm EST

    Hello,

    To prevent filter icons to appear on every column header, you may use showFilterIcons property of FlexGridFilter and set it to false. In case you want to show filter icons on a selected few columns then you can use filterColumns property and pass all the columns binding on which you want to show the filter icon. Please refer to the below sample link for reference:

    https://stackblitz.com/edit/angular-14ldkd?file=src%2Fapp%2Fapp.component.html

    API link: https://www.grapecity.com/wijmo/api/classes/wijmo_grid_filter.flexgridfilter.html

    In case you still face any issues, please update the above sample to replicate your issue or share a small sample of your application replicating the issue so that we can further investigate the issue at our end and assist you accordingly.

    Regards

  • Posted 11 June 2023, 8:11 pm EST - Updated 11 June 2023, 8:27 pm EST

    Hi Team,

    As per above suggestion, we have done all the changes as mentioned. By doing so we found below two points

    1. The showFilterIcons property of FlexGridFilter and set it to false, then no filter is coming at all, which is not the solution

      2.Now, if we pass the filterColumns as empty array than it is showing the filter in all the column. But if we pass array with single value (eg [‘-1’] )to it than fillter is not coming. It is as bug from the wijmo side, please have a look on it and let us know about the solution for it.

    Please let me know if anything required from my end.

    Thanks

  • Posted 11 June 2023, 8:21 pm EST

    Hi nilesh_nichal,

    1. Ok, then could you please let us know your expected behavior? How do you like to display filters on the grid?

    2. You would be required to pass the column’s binding string inside the filterColumns array to display the filter icons on those column’s header cells. As per your example, it seems you have passed some other string. In that case, no filter icons will be visible on any column. I request you to please share a small sample or video of your exact requirement so that we can investigate the issue further at our end.

    Regards

  • Posted 12 June 2023, 4:54 pm EST - Updated 12 June 2023, 5:00 pm EST

    Hi,

    There is still an issue, in the example which you have provided via link https://stackblitz.com/edit/angular-14ldkd?file=src%2Fapp%2Fapp.component.html

    in the code please update it like below (attached the screenshot below)

    
    <wj-flex-grid [itemsSource]="data">
      <gc-grid-filter [filterColumns]='filterColumns'></gc-grid-filter>
    </wj-flex-grid>

    and in the ts file make it like below

    
    filterColumns = [];

    you will find that the filter icon are present in all the column. But if we put

    filterColumns = [‘id’]; // than here the filter icon is present only in the Id.

    If we are giving filterColumns as empty array than it should not show the filter in any column, but it is giving the filter icon on every column.

    Please let us know how to resolve the above bug.

  • Posted 12 June 2023, 5:15 pm EST

    Hello,

    The observed behavior is the current design behavior as you can also refer to the API documentation which already mentions this behavior.

    API link: https://www.grapecity.com/wijmo/api/classes/wijmo_grid_filter.flexgridfilter.html#filtercolumns

    If you want to remove the filter icon from every column then you should use showFilterIcons property instead of filterColumns. If you still want to use filterColumns then you may pass an empty string inside the array to filterColumns to remove filter icons from all the columnHeaders.

    Sample link: https://stackblitz.com/edit/angular-grcgj1?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html

    Regards

Need extra support?

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

Learn More

Forum Channels