Grid column filter

[Kaloyan Stefanov]

Hi, do you plan to add support for Grid component to filter columns by non latin symbols?

[Thavasianand Sankaranarayanan]

Hi Kaloyan, 

 

Greetings from Syncfusion support. 

 

Query: Do you plan to add support for Grid component to filter columns by non latin symbols? 

 

We have support for filtering latin symbols. To achieve this we have to set ignoreAccent as true. Please refer the below code example, sample and screenshot for more information. 

Sample : https://codesandbox.io/s/vue-template-w20lr 

UG: https://ej2.syncfusion.com/vue/documentation/grid/filtering/?no-cache=1#diacritics 

App.vue 

<template> 

 

  <div id="app"> 

    <ejs-grid 

      :dataSource="data" 

      :allowFiltering="true" 

      :filterSettings="filterOptions" 

      height="273px" 

    > 

      <e-columns> 

--- 

      </e-columns> 

    </ejs-grid> 

  </div> 

</template> 

<script> 

----- 

export default { 

  data() { 

    return { 

      data: data, 

      filterOptions: { 

        ignoreAccent: true 

      } 

    }; 

  }, 

  provide: { 

    grid: [Filter] 

  } 

}; 

</script> 

 

If we misunderstood your query, please get back to us with below details. 

1. Share more information about your requirement.
2. Share more details of non latin symbols.
3. Did you give those symbols as string in Grid dataSource.

Regards, 

Thavasianand S.              

[Kaloyan Stefanov]

This is my case: I am trying to filter a column "Client Name" by "Starts With" setting, but the name i want to filter is in Cyrillic script. The name is passed to the server but it is not transformed correctly to lower case.

[Thavasianand Sankaranarayanan]

Hi Kaloyan, 

 

Query : I am trying to filter a column "Client Name" by "Starts With" setting, but the name i want to filter is in Cyrillic script. 

 

We unable to process with provided information. Please share below details  

 

1. Are you having Cyrillic script in your database or not ?
2. Are you having Cyrillic script as a displaying data in Grid?
3. How can you sent filter input to the server, is that Cyrillic script or not ?
4. Are you using any convertor to convert Cyrillic script to the English in the server side, if yes please share the details about this?
5. Share screen shot or video demonstration of the issue.

 

Regards, 

Thavasianand S.              

[Kaloyan Stefanov]

1. Yes, the names of the clients are stored in the database in Cyrillic

2. Yes, displaying the names also in Cyrillic

3. Example: Filter the column in Cyrillic scrypt 'АБЦ' is not converted to lower case, the letters are still in caption

Filter the column in Latin 'ABC' the letters are converted to lower case

filter cyrilic - /?$top=20&$filter=startswith(tolower(AreaManagerResponse),'АБЦ')

filter english - /?$top=20&$filter=startswith(tolower(AreaManagerResponse),'abc')

4.No we do not use converters.

5.See number 3

[Thavasianand Sankaranarayanan]

Hi Kaloyan, 

Query : Filter the column in Cyrillic scrypt 'АБЦ' is not converted to lower case, the letters are still in caption 

 

We have validated the provided details. By using custom adaptor, we have override the code and returning lowercase values.  At last we send these query into the server (ODataAdaptor), but  by default OData adaptors decode all the special characters. So in your server side we suggest  you to decode the request (refer the screenshot) before the action. Please refer the below code example and sample for more information. 

Sample : https://codesandbox.io/s/vue-template-7sfve 

App.vue 

<template> 

  <div id="app"> 

    <ejs-grid :dataSource="data" :allowFiltering="true"> 

      <e-columns> 

        <e-column field="OrderID" headerText="Order ID" textAlign="Right" width="90"></e-column> 

        <e-column field="CustomerID" headerText="Customer ID" width="120"></e-column> 

        <e-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="90"></e-column> 

        <e-column 

          field="OrderDate" 

          headerText="Order Date" 

          textAlign="Right" 

          format="yMd" 

          type="date" 

          width="120" 

        ></e-column> 

      </e-columns> 

    </ejs-grid> 

  </div> 

</template> 

<script> 

import Vue from "vue"; 

import { GridPlugin, Filter } from "@syncfusion/ej2-vue-grids"; 

import { DataManager, ODataAdaptor } from "@syncfusion/ej2-data"; 

Vue.use(GridPlugin); 

class SerialNoAdaptor extends ODataAdaptor { 

  onPredicate(predicate, query, requiresCast) { 

    predicate.value = predicate.value.toLowerCase(); 

    var returnvalue = super.onPredicate.call( 

      this, 

      predicate, 

      query, 

      requiresCast 

    ); 

    return decodeURIComponent(returnvalue);    // returning lowercase value of filter string 

  } 

} 

export default { 

  data() { 

    let SERVICE_URI = 

      "https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders?$top=7"; 

    return { 

      data: new DataManager({ 

        url: SERVICE_URI, 

        adaptor: new SerialNoAdaptor(), 

        crossDomain: true 

      }) 

    }; 

  }, 

  provide: { 

    grid: [Filter] 

  } 

}; 

</script> 

<style> 

@import "https://cdn.syncfusion.com/ej2/material.css"; 

</style> 

   

Image #1: 

 

Decode the requests, by using the following code Uri.UnescapeDataString(“string”). 

Image #2: decode the request 

 

If you are not using OdataAdaptor. Share the details about your adaptor. 

 

Regards, 

Thavasianand S. 

[Kaloyan Stefanov]

It's working now, thank you very much!

[Thavasianand Sankaranarayanan]

Hi Kaloyan, 

 

Thanks for your update. 

 

We are happy that the problem has been resolved at your end. 

 

Regards, 

Thavasianand S.