We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Grid column filter

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

7 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team December 13, 2019 09:23 AM UTC

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. 



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.              



KS Kaloyan Stefanov December 13, 2019 11:53 AM UTC

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.


TS Thavasianand Sankaranarayanan Syncfusion Team December 16, 2019 01:22 PM UTC

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.              



KS Kaloyan Stefanov December 16, 2019 03:17 PM UTC

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


TS Thavasianand Sankaranarayanan Syncfusion Team December 18, 2019 02:10 PM UTC

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. 


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 = 
    return { 
      data: new DataManager({ 
        url: SERVICE_URI, 
        adaptor: new SerialNoAdaptor(), 
        crossDomain: true 
      }) 
    }; 
  }, 
  provide: { 
    grid: [Filter] 
  } 
}; 
</script> 
<style> 
</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. 



KS Kaloyan Stefanov December 19, 2019 09:44 AM UTC

It's working now, thank you very much!


TS Thavasianand Sankaranarayanan Syncfusion Team December 19, 2019 12:50 PM UTC

Hi Kaloyan, 
 
Thanks for your update. 
 
We are happy that the problem has been resolved at your end. 
 
Regards, 
Thavasianand S.  


Loader.
Live Chat Icon For mobile
Up arrow icon