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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid Column filtering (menu type with checkbox) how to change to "contains" logic

Thread ID:

Created:

Updated:

Platform:

Replies:

150187 Dec 24,2019 07:34 PM UTC Jan 3,2020 06:43 AM UTC Vue 3
loading
Tags: Data Grid
Alex E
Asked On December 24, 2019 07:34 PM UTC

Hi

This question is in reference to Grid Column Filtering (using "Menu Type" with checkboxes):


In above link when you click filter icon of "Employee Name"  and then start typing few characters, the pop-up dropdown list is filtered using "BeginsWith" logic.

How can I change it so it filters using "contains" logic? (please note, I'm not referring to grid filtering itself, but rather to filtering of column dropdown options list)

Must be something simple but could not find it anywhere in documentation

Thanks
Alex



Pavithra Subramaniyam [Syncfusion]
Replied On December 30, 2019 11:15 AM UTC

Hi Alex, 
 
Greetings from Syncfusion support.   
   
You can achieve your requirement by overriding the operator inside the actionBegin event for ‘filtersearchbegin’ request. Please refer to the below code example, Documentation and sample link for more information. 
 
<template> 
  <div id="app"> 
    <ejs-grid id="Grid" ref="grid" allowFiltering=true :filterSettings='filter' :actionBegin='actionBegin' :dataSource="data"> 
      <e-columns> 
        <e-column field="OrderID" headerText="Order ID" width="90"></e-column> 
        <e-column field="CustomerID" headerText="Customer ID" format="C2" width="90"></e-column> 
        <e-column field="ShipCity" headerText="Telefon" width="150" textAlign="Center"></e-column> 
      </e-columns> 
    </ejs-grid> 
  </div> 
</template> 
 
<script> 
.  .  . 
 
export default { 
  data() { 
    return { 
      data: data, 
      filterSettings:{type:"CheckBox"} 
    } 
      }, 
  methods: { 
    actionBegin:function(e){ 
       if(e.requestType === 'filtersearchbegin' && e.columnName === 'CustomerID'){ 
          e.operator = 'contains'; 
     } 
    } 
  }, 
 
  provide: { 
    grid: [Page, Filter] 
  } 
}; 
</script> 
 
 
 
Sample               : https://codesandbox.io/s/checkbox-search-operator-mms2d 
 
Please get back to us if you need further assistance. 
 
Regards, 
Pavithra S. 


Alex E
Replied On January 2, 2020 02:28 PM UTC

Thanks Pavithra!

Dhivya Rajendran [Syncfusion]
Replied On January 3, 2020 06:43 AM UTC

Hi Alex, 

We are happy that the provided solution was helpful to achieve your requirement. Please get back to us if you need further assistance from us. 

Regards, 
R.Dhivya 


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