It is possible to ignore accentuation on filter?

[Rafael]

Hi,

I am using querybuilder integration with grid to filter but I wish I could ignore all the accents, like if the user type "á" or just "a". 

So, if I am filtering some data like "Ágatha", if the user type "Ágatha" or "Agatha" it would return the data.

It is possible?

Thank you

[Gayathri KarunaiAnandam]

Hi Rafael, 

We have checked your reported query. We have prepared a sample based on this. We can ignore Accent by using the ignoreAccent property. Please check the below code snippet. 

  <ejs-querybuilder 

    #querybuilder 

    class="row" 

    [dataSource]="dataSource" 

    width="100%" 

    [rule]="importRules" 

    (ruleChange)="updateRule($event)" 

  > 

    <e-columns> 

      <e-column field="TaskID" label="Task ID" type="number"></e-column> 

      <e-column field="Name" label="Name" type="string"></e-column> 

      <e-column field="Category" label="Category" type="string"></e-column> 

      <e-column field="SerialNo" label="Serial No" type="string"></e-column> 

      <e-column field="InvoiceNo" label="Invoice No" type="string"></e-column> 

      <e-column field="Status" label="Status" type="string"></e-column> 

    </e-columns> 

  </ejs-querybuilder> 

</div> 

<div class="col-lg-12 control-section"> 

  <div class="content-wrapper"> 

    <ejs-grid 

      id="Grid" 

      #grid 

      [dataSource]="gridDataSource" 

      [allowSelection]="true" 

      [allowPaging]="true" 

      [pageSettings]="pageSettings" 

      [filterSettings]="filterSettings" 

      width="100%" 

      (created)="onGridCreated()" 

    > 

      <e-columns> 

        <e-column 

          field="TaskID" 

          headerText="Task ID" 

          width="120" 

          textAlign="Right" 

        ></e-column> 

        <e-column field="Name" headerText="Name" width="140"></e-column> 

        <e-column 

          field="Category" 

          headerText="Category" 

          width="140" 

          textAlign="Right" 

        ></e-column> 

        <e-column 

          field="InvoiceNo" 

          headerText="Invoice No" 

          width="130" 

        ></e-column> 

        <e-column field="Status" headerText="Status" width="120"></e-column> 

        <e-column 

          field="SerialNo" 

          headerText="Serial No" 

          width="130" 

        ></e-column> 

      </e-columns> 

    </ejs-grid> 

  dataSource = hardwareData; 

  gridDataSource = hardwareData; 

  pageSettings = { pageSize: 8, pageCount: 5 }; 

  importRules: RuleModel = { 

    condition: 'or', 

    rules: [ 

      { 

        label: 'Category', 

        field: 'Category', 

        type: 'string', 

        operator: 'endswith', 

        value: 'Laptop' 

      } 

    ] 

  }; 

  updateRule(args: RuleChangeEventArgs): void { 

    const predicate: Predicate = this.qryBldrObj.getPredicate(args.rule); 

    const fltrDataSource: Object[] = []; 

    let dataManagerQuery: Query; 

    if (isNullOrUndefined(predicate)) { 

      dataManagerQuery = new Query().select([ 

        'TaskID', 

        'Name', 

        'Category', 

        'SerialNo', 

        'InvoiceNo', 

        'Status' 

      ]); 

    } else { 

      predicate.ignoreAccent = true; 

      dataManagerQuery = new Query() 

        .select([ 

          'TaskID', 

          'Name', 

          'Category', 

          'SerialNo', 

          'InvoiceNo', 

          'Status' 

        ]) 

        .where(predicate); 

    } 

    new DataManager(hardwareData) 

      .executeQuery(dataManagerQuery) 

      .then((e: ReturnOption) => { 

        (<Object[]>e.result).forEach((data: Object) => { 

          fltrDataSource.push(data); 

        }); 

      }); 

    this.gridDataSource = fltrDataSource; 

    this.grid.refresh(); 

  } 

  onGridCreated(): void { 

    this.updateRule({ 

      rule: this.qryBldrObj.getValidRules(this.qryBldrObj.rule) 

    }); 

  } 

Please check the below link. 

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

Please get back to us, if you need further assistance. 

Regards, 

Gayathri K 

[Rafael]

Hiii Gayathri,

It works! Thank you very much! :D

[Gayathri KarunaiAnandam]

Hi Rafael, 

You are welcome. 

We are happy to hear that your requirement has been fulfilled. Please feel free to contact us if you need any further assistance on this. 

Regards, 

Gayathri K