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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid column filter

Thread ID:

Created:

Updated:

Platform:

Replies:

149876 Dec 12,2019 02:25 PM UTC Dec 19,2019 12:50 PM UTC Vue 7
loading
Tags: Data Grid
Kaloyan Stefanov
Asked On December 12, 2019 02:25 PM UTC

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

Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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.              


Kaloyan Stefanov
Replied On 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.

Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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.              


Kaloyan Stefanov
Replied On 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

Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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. 


Kaloyan Stefanov
Replied On December 19, 2019 09:44 AM UTC

It's working now, thank you very much!

Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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.  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon