Grids - replacing the boolean display value with checkbox filters

[Martin Teasdale]

Hi !

I have tried a lot of things but I haven't found a way to replace the display value of boolean values when using checkbox filters in ejs2-grids. Is there any way of replacing the 'false' and 'true' strings (see picture). We're using the French locale if that matters.

Thanks !

[Manivel Sellamuthu]

Hi Martin, 

Greetings from Syncfusion support. 

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

Please refer the below code example and sample for more information. 

<div class="control-section"> 

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

        <e-columns> 

            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column> 

            <e-column field='CustomerID' headerText='Customer Name' width='150'></e-column> 

            <e-column field='Verified'  width='150'> 

              <ng-template #filterItemTemplate let-data> 

                <div>value of {{replaceValue(data)}}</div> 

              </ng-template> 

            </e-column> 

            <e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column> 

        </e-columns> 

    </ejs-grid> 

export class AppComponent { 

. . . 

 

  replaceValue(args) { 

// here you can change and return the value 

    return args["Verified"]; 

  } 

 

  ngOnInit(): void { 

    this.data = [ 

      { 

        OrderID: 10248, 

        CustomerID: "VINET", 

        Numbers: 32532, 

        ShipCountry: "France", 

        Verified: !0 

      }, 

       . . . 

    ]; 

    this.pageSettings = { pageCount: 5 }; 

    this.filterSettings = { type: "CheckBox" }; 

  } 

} 

Sample: https://stackblitz.com/edit/angular-159188-filtering?file=app.component.ts 

 

Please let us know, if you need further assistance. 

Regards, 

Manivel 

[Martin Teasdale]

It worked, thanks for the quick answer !

[Manivel Sellamuthu]

Hi Martin, 

Thanks for your update. 

We are glad that the provided solution resolved your requirement. 

Please let us know, if you need further assistance. 

Regards, 

Manivel