Foreign Key Column Sort, Excel Filtering

[Joshua Dunn]

Hi,

I have two queries:

1) I've defined a foreign key column as such:

<e-column field='customerId' foreignKeyValue="companyName" foreignKeyField="id" :dataSource="lookups.Customers" headerText='Company Name'></e-column>

I want to define that this column is sorted using the foreignKeyValue, how can I do this?

2) When using the excel style filters with a foreign key column, I cannot get the checkboxes with the list of values to appear, when using the same row as above.

I am assigning the data that must be displayed here by myself, by passing it to the dataSource function on the dataStateChange event.

If I use a simple column, such as:

          

<e-column field='customerCompanyName' headerText='Company Name'></e-column>

I can do this, by doing something like:

                var lookupData = await (this.dataService as DataService).fetchLookup("rich/Customers");

                const data = (lookupData.body.data as Array<any>).map(x => {

                    return { customerCompanyName: x['companyName'] }

                })

                state.dataSource(data);

How can I get the checkboxes dispalyed to be a list of my fk data?

Thanks

[Sujith Kumar Rajkumar]

Hi Joshua, 

Greetings from Syncfusion support. 

 

Query – 1: “I want to define that this column is sorted using the foreignKeyValue, how can I do this?” 

Query – 2: “When using the excel style filters with a foreign key column, I cannot get the checkboxes with the list of values to appear, when using the same row as above.” 

We checked your queries and would like to let you know that for remote data/custom binding, the sorting and filtering functionalities for the foreign key columns will be performed based on the data source value of the Grid. So it performs sort/filter based on the foreign key field only and not based on the foreign key value for that. This is its default behavior based on the current Grid architecture.  

Foreign key documentation: https://ej2.syncfusion.com/vue/documentation/grid/columns/#foreign-key-column 

Let us know if you have any concerns. 

Regards, 

Sujith R 

[Joshua Dunn]

Thanks for getting back to me.

I understand this is the default behaviour, but is there any way I can change this?

Also, is it possible to hide these checkboxes altogether?

The UI provided by the excel filter is the only way I can see that I can provide range filtering, but I don't need the checkbox list as well.

Thanks

[Sujith Kumar Rajkumar]

Hi Joshua, 

 

This filtering behavior for the foreign key column is implemented considering the Grid’s architecture and it is not feasible to change it. However you can achieve your requirement of – “Hiding the checkbox on excel filter” by overriding the following CSS classes and setting display property as ‘none’ to them. 

 

<style> 

.e-grid .e-filter-popup .e-dlg-content, 

.e-grid .e-filter-popup .e-footer-content { 

  display: none; 

} 

</style> 

 

Sample based on this for your reference, 

 

Sample: https://codesandbox.io/s/vue-qdvwf?file=/src/App.vue 

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R