How to change boolean filtering value

[Josip]

Hello,

Is it possible to change boolean filter from true /false to Yes / No or Da / Ne?

This is my column

<e-column field='return' headerText='Return' width='120' type='boolean'>

      <ng-template #template let-data>

        <i [class]="data.return ? 'fas fa-check-circle text-success' : 'fas fa-times-circle text-danger'"

          [title]="data.return ? 'Da' : 'Ne'"></i>

      </ng-template>

    </e-column>

[Sivaranjani Rajasekaran]

Hi Josip,

Greetings from Syncfusion support!

Yes, you can customize the filter dialog's data source by using the filter property of the column and defining the data source via params.dataSource. We’ve prepared a sample demonstrating how to customize the data source of the menu filter.

Please refer to the code below for more information:

Code Example : 

 <e-column

        field="Check"

        headerText="Check"

        type="boolean"

        width="130"

        [filter]="filter"

      >

        <ng-template #template let-data>

          <i

            [class]="

              data.Check

                ? 'fas fa-check-circle text-success'

                : 'fas fa-times-circle text-danger'

            "

            [title]="data.Check ? 'Da' : 'Ne'"

          ></i> </ng-template

      ></e-column>

 this.filter = {

      type: 'Menu',

      params: {

        dataSource: [{ Check: 'Yes' }, { Check: 'No' }],

      },

    };

actionBegin(args: any) {

    if (

      args.requestType === 'filtering' &&

      args.columns[0].field === 'Check' &&

      !this.isFiltering // Prevent recursive calls

    ) {

      this.isFiltering = true; // Set flag to true

      try {

        // Transform filter value from 'Yes'/'No' to true/false

        const value = args.columns[0].value === 'Yes' ? true : false;

        // Apply the filter with the transformed value

        this.grid.filterByColumn(

          args.columns[0].field,

          args.columns[0].operator,

          value

        );

      } finally {

        this.isFiltering = false; // Reset flag after filtering

      }

    }

Please note: After changing the filter data source, the update is only reflected in the UI. It does not affect the original data source of the grid. Therefore, filtering will still be performed based on the original data. To ensure correct filtering behavior, you’ll need to handle the filter manually in the grid’s actionBegin event.

Before : 

After changed:

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

Documentation Link : https://ej2.syncfusion.com/angular/documentation/grid/filtering/filter-menu

Please get back to us if you need further assistance.

Regards,

Sivaranjani R

[Josip]

Thank you! Working perfect!

[Sivaranjani Rajasekaran]

Josip,

You are most welcome! Please get back to us if you need further assistance