Filtering as checkbox not working when search active

ngOnInit() {
  this.filter = {type: 'CheckBox'/*, columns: [{field: 'State', matchCase: false, operator: 'equal', predicate: 'and', value: 'true'}]*/};
  this.filterSettings = {
    type: 'Menu',
    columns: [{field: 'Active', matchCase: true, operator: 'equal', predicate: 'and', value: true}]
  };
  this.toolbar = ['Search'];
  this.data = new DataManager({
       url: `${this.baseUrlApi}/api/crm/PersonnesView`,
       adaptor: this.oDataAdaptor
     });
}

<ejs-grid #grid [allowFiltering]='true' [allowPaging]='true' [allowSelection]='false' [allowSorting]='true'
          [dataSource]='data' [enableHover]='true' [filterSettings]='filterSettings' [pageSettings]='pageSettings'
          [toolbar]='toolbar'>
  <e-columns>
    <e-column field="IdIndividu" headerText="Id"></e-column>
    <e-column field="Nom" headerText="Nom"></e-column>
    <e-column field="Prenom" headerText="Prénom"></e-column>
    <e-column [filter]='filter' field="Active" headerText="Actif"></e-column>
    <e-column [filter]='filter' field="Etat" headerText="Etat"></e-column>

  </e-columns>
</ejs-grid>