Custon data source for filter not showing when filtering by another column

Question

I am having is with custom checkbox filters, I load my data into the data source of a filter object in the columns like so

columns: Column[] = [

{ field: "fullName", headerText: "Employee Name", width: "150", filter: this.cbFilter } as Column,

{ field: "department", headerText: "Department", width: "120", filter: { type: "CheckBox", dataSource: this.departmentData } as IFilter} as Column,

{ field: "team", headerText: "Team", width: "120", filter: { type: "CheckBox", dataSource: this.teamData } as IFilter} as Column,

{ field: "role", headerText: "Role", width: "120", filter: { type: "CheckBox", dataSource: this.jobRoleData } as IFilter } as Column,

{ field: "startDate", headerText: "Start Date", width: "120", format: this.format } as Column,

{ field: "status", headerText: "Status", width: "120", filter: { type: "CheckBox", dataSource: this.statusData } as IFilter} as Column

];

I load the data to the filterArray

a

department:"Accounts"

ejValue:"Accounts"

Which is loaded into the grid and the filters show fine

When I filter by one of these custom values, the other custom filter columns do not show

Here I am filtering by "Information Technology" but when i select the team filters, none show, I want them all to show, not just matching results.

If i look into the vue component, the filtered data of the filter object is empty where the data source is full. The data should not be filtered, I want all filters to be available even if there is not a record in the grid that will match it.

Strangely enough, If i pass in a { ejValue: null, department: null } the front end shows "Blanks"

Now if I filter by blanks, all the custom filter columns show up fine

Thiyagu Subramani · Answer

Hi Eric, 

Thanks for Syncfusion forum. 

Based on your query you need to perform filter operation for the custom dataSource value. By default, grid data operations(searching, sorting, filtering, etc.) will be performed based on the grid dataSource. We can display whatever information(such as modified data, combined data of all columns, numbers, characters, etc.) instead of original dataSource value by using custom filter dataSource or other way.   
  
So, it is not feasible to perform the grid data operations based on the displayed value. Because it is not a generic way to perform the grid data operations. The grid data operations are performed based on the grid dataSource. This is default behavior of Grid.   

Note :  Custom dataSource data’s must be there in grid dataSource data. 
 Please refer the below sample. 
Sample link : https://codesandbox.io/s/vue-template-ny31j 

Please get back to us, if you need any further assistance. 

Regards, 
Thiyagu S

ym · Answer

Actually, I also facing the same issue but my tech stack is React with typescript.

When we use custom data source to prepopulate the filter of a column, it is working fine. And, when I filter that column with custom data source value, its working as expected.

Main issue here is, when I try to use the other normal grid column filters along with the custom data source filter. Custom data source filter is not getting prepopulated with my custom data.

The solution provided for implementing custom data source filter by Syncfusion team in another thread also reproduces this issue. Please find the link below,

https://stackblitz.com/edit/react-gz1lhw?file=index.js

The link explains how to implement a custom data source by using 'actionbegin' property of the grid. But when you filter the 'name' column first and then try to apply the 'work' column filter. Now the issue will happen by not showing the custom data source of the 'work' column filter

Help is really appreciated. Also, by default It would be great to have a proper documentation with examples for this kind of scenarios in the API docs. Thanks

Rajapandiyan Settu · Answer

Hi YM, 
 
Thanks for contacting Syncfusion support. 
 
Based on your requirement, you want to bind custom dataSource for some of the columns and need to show the custom dataSource when filtering applied in other columns. 
 
By default, the current Grid filter queries are applied to Filter Dialog dataSource. If the filtered values are not in the custom datasource, then no records will be displayed in the Filter Dialog. We have considered your requirement as custom sample. We will update the further details on or before Sep 1st 2021. 
 
We appreciate your patience until then. 
 
Regards, 
Rajapandiyan S

Rajapandiyan Settu · Answer

Hi YM, 
 
Sorry for the inconvenience caused. 
 
By validating your code example, we found that you are using array of object value for the Work column and trying to filter this column using custom dataSource. 
 
By default, the EJ2 Grid column only supports number, string, date, dateTime, Boolean, checkbox type values, and which is not supports array type value. Refer to the below documentation. 
 
UG: https://ej2.syncfusion.com/documentation/api/grid/columnType/  
 
So, we are unable to provide the filtering support with custom dataSource on array type column. It is not feasible at our end. We can support custom dataSource filtering on the following type columns like int, string, date, dateTime, Boolean. 
 
Please let us know if you have any concerns. 
 
Regards, 
Rajapandiyan S

Kalab Richard · Answer

Hello, I have pretty same issue but in angular, and currently no clue how I can attach customDatasource for filter column into main dataSource, can you provide me some idea of angular solution? I did try with view, but not sure with DataManager and Qur

Joseph Christ Nithin Issack · Answer

Hi Kalab,   Greetings from
Syncfusion support.   Based on your
query, you want to change the data source of the filter popup in check box
filter. We have already discussed the same in the below KB in detail. Please refer
the below KB for more information.  KB: https://support.syncfusion.com/kb/article/10065/how-to-change-the-data-source-for-checkbox-filter-popup-in-gridRegards,Joseph I.