How to render filter with value accessor sourced data...

Question

I have a bunch of config data that I want to set. This config data has both an id and a string (text) that renders it.

When I pull the data down the id is populated. I then use the valueAccessor functionality to render the text version of the id.

But of course, when it comes to filtering the filters use the data verbatim so I see the guid (the id's are guids) in the filter drop down.

I have used [this](https://www.syncfusion.com/forums/154932/selecting-default-value-on-excel-checkbox-column-filter) to try and solve my problem but I am unable with that solution access the data on my component. I can get it to work but all I have for the dropdowns is the row data and I need more than that as I need to look up the text value of the id. Notwithstanding the fact that it breaks out of the component altogether (so is not very vue friendly - I'm not sure the other devs here are going to like it - even if it did work).

Is it possible to achieve this? Right now the problem is both that I don't have the relevant state in the method that is called (that "global" method) and also that I have to add this global section on the main host file... both are show stoppers.

Up till now we've had to do very ugly mapping between the id and the text when we load the data and the same for when we save so on the front end we only deal with the text values, not the id's.

Could there not be a feature where a similar technique is provided to render the filter items as to the rendering of the text in the cell? a simple "valueAccessor" concept but for the filter items?

Thank you for your product by the way.

Rajapandiyan Settu · Answer

Hi Michael, 
 
Thanks for contacting Syncfusion support. 

Based on your requirement, we suspect that you want to perform grid actions on one field and display another field in Grid. If so, you can achieve this by using to use foreignKey column feature. 

To bind a foreign key column in the grid’s column, we have to set foreignKeyValue, ForeignKeyField and dataSource to that column. Refer the below documentation for more information. 

ForeignKey-column: https://ej2.syncfusion.com/vue/documentation/grid/columns/foreign-key-column/ 

Demo: https://ej2.syncfusion.com/vue/demos/#/bootstrap5/grid/foreign-key.html 

Note: The data-mapping is based on the column field name and  foreignKeyField. So, the foreignKeyField should contains the column field values in its dataSource. Then the correspond foeignKeyValue will be shown in the Gird. 

Sample: https://codesandbox.io/s/vue-template-forked-rjkeb?file=/src/App.vue 

Please let us know you have any concerns. 

Regards, 
Rajapandiyan S

Michael Wiles · Answer

Thank you - yes, after posting this I did discover the foreign key capability and switched to that.

Rajapandiyan Settu · Answer

Hi Michael, 
 
We are glad that you have achieved your requirement with the provided solution. 

Please get back to us if you need further assistance. 

Regards, 
Rajapandiyan S