filter template with different values

Question

Hello Team,I am working on requirement where we are required to show columns with respect to filter. I am facing  problem when the filter value and column value are not same. I have attached a example where while changing filter results are not filtering in grid.With all Filter No results even grid has results with CS Here we can see SKU column has "CS" results when no filter is selected but not able to see results when "CS" filter is selected.https://codesandbox.io/s/vue-grid-filter-fyw97Regards,Sandeep G

Pavithra Subramaniyam · Answer

Hi Sandeep, 
 
Thanks for contacting Syncfusion support. 
 
In your sample we can see that you are setting the value for the filter template dropdown list as “1”, “2” and tried to filter the column with these values. But the original column doesn’t contain these values which is the cause of the reported scenario. So, we suggest to set the values which are available in the “LocationUOMDesc” column for the dropdown list. Please refer to the below modified the sample for more information. 
 
Sample: https://codesandbox.io/s/vue-grid-filter-forked-o95d4?file=/src/App.vue 
 
Please get back to us if you need further assistance on this. 
 
Regards, 
Pavithra S

Sandeep G · Answer

Hi Pavithra,Thanks for your reply, In the example I provided filter values and columns values are different. How can we achieve filtering with different values as we are using two different API calls to load filter Template (dropdown list) and column value (grid).In this example I want to filter 'CS' rows if dropdown value is '1' as I can't update dropdown values to available values in the 'LocationUOMDesc'.https://codesandbox.io/s/vue-grid-filter-fyw97Thanks & Regards,Sandeep G

Pavithra Subramaniyam · Answer

Hi Sandeep, 
 
You can achieve your requirement by passing the innerText to the “filterByColumn” method. Please refer to the below code example for more information. 
 




args.element.addEventListener("input", (args) => { 
  if (args.currentTarget.value !== "ALL") { 
    vm.$refs.gridObj.filterByColumn( 
      args.currentTarget.id, 
      "equal", 
      args.currentTarget.selectedOptions[0].innerText 
    ); 
  } else { 
    vm.$refs.gridObj.filterByColumn( 
      args.currentTarget.id, 
      "NotEqual", 
      args.currentTarget.selectedOptions[0].innerText 
    ); 
  } 
 
 
Regards, 
Pavithra S