Grid filtering

[Mantas Parfionovas]

Hello,

So I am using filters on grid columns. My column is a boolean type with a template that is showing an icon if it's true.

The problem is that in the filter I see true/false selections.

My question is if I can change those default true/false to Enable / Disable options? The same filter changing would be used for enum type columns.

this.filterSettings = { type: 'CheckBox', columns: [{ field: 'enable', operator:'equal', value: true }]};

<e-column field='terminalSettings.settingsAvailable' [allowEditing]="false" [allowFiltering]="true" align="center" headerText="{{'TerminalSettings'|translate}}" width='120'>
  <ng-template #template let-data>
    <div *ngIf="data.terminalSettings.settingsAvailable">
      <div [ngClass]="'mat-terminal-icon'" [ngStyle]="{'background-color': data.terminalSettings.color}" (click)="openSaveDialog(data.terminalSettings)">
        +
      </div>
    </div>
  </ng-template>
</e-column>

[Shalini Maragathavel]

Hi Mantas, 

Thanks for contacting Syncfusion support. 

Based on your query, we suspect that you want to replace the Boolean column checkbox filter values. To achieve your requirement we suggest you to use filterItemTemplate property of Grid.   

Please refer the below code example for more information. 

 

app.component.html

<div class="control-section"> 

    <ejs-grid #grid [dataSource]='data' allowFiltering='true' [filterSettings]='filterSettings'> 

        <e-columns> 

            

            <e-column [filter]="filterCheckboxSettings" field='Verified' headerText='Discontinued' width='150'> 

                <ng-template #template let-data> 

              <div *ngIf="data.Verified; else elseblock"> 

                <button class="e-icons custom"></button> 

              </div> 

          </ng-template> 

          <ng-template #elseblock>  <button class="e-icons custom1"></button></ng-template> 

            </e-column> 

        </e-columns> 

    </ejs-grid> 

<ng-template #filterItemTemplate let-data>{{changeItems(data)}}</ng-template> 

</div> 

------------------------------------------------------------------------------------
app.component.ts 

export class FilteringMenuComponent implements OnInit { 

    ngOnInit(): void { 

        this.filterCheckboxSettings = { type: 'CheckBox', itemTemplate:this.filterItemTemplate }; 

    } 

    changeItems(args){ 

      if(args.Verified== "Select All"){ 

        return "Select All"; 

      } 

      else if(args.Verified == true){ 

        return "Enable"; 

      } 

        else if(args.Verified == false){ 

        return "Disable"; 

      } 

    } 

} 

Please refer the below sample for your reference.

Sample: https://stackblitz.com/edit/angular-m79bep-gyrvv6?file=filter-menu.component.ts 

Let us know, if you have any concerns.

Regards,
Shalini M.