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

How to display a static catalogue a options in checkbox filter?

Hello. I have an <ejs-grid> with column that uses checkbox filter, defined in this manner:
<e-column field="categories" [headerText]="'categories'" [filter]="{ type: 'CheckBox' }"></e-column>


The grid uses UrlAdaptor to obtain pages of data from server as needed (there is a large amount).
It also uses 'Menu' filter style, so filter is a popup.


When I open the filter popup, what happens is that client makes a request to the server to obtain first 1000 rows, like this:
{
    "requiresCounts": true,
    "take": 1000
}


Then, all (deduplicated) values for my specific column (in my example 'categories') in server response are used to create list of options that appear in filter popup - but because first 1000 rows are not likely to contain all possible values (and querying entire database is not feasible), some values are not included in options displayed to the user.

User can use the search option in filter popup, but that requires knowing the name they are looking for and overall is a strange user experience IMHO.


What I want is to be able to somehow bind a static list/catalogue of all possible values to the filter and have this complete list of options always displayed (unless user uses the search option to narrow it down, if possible).

This feels like it should be a simpler case than having to obtain data from server in order to render the filter popup. Is it somehow possible?

Thanks.


I believe this https://www.syncfusion.com/forums/153992/for-checkbox-grid-filtering-how-do-i-add-filter-options-manually is the same requirement as mine.

It is mentioned there that "By default in EJ2 Grid the filter popup contains the only the data that you have bounded to the grid", so I believe I'm interested in non-default way.


3 Replies

JC Joseph Christ Nithin Issack Syncfusion Team March 13, 2023 07:32 PM UTC

Hi Tomas,


Greetings from Syncfusion support.


By default the Excel/ Checkbox filter Dialog in the Grid will display the distinct data from the first 1000 records in grid dataSource to optimize the performance and all the records will be returned as result in the search option of the Filter dialog. 


You can increase the Excel filter choice count by modifying the filterChoiceCount argument value in the actionBegin event when the requestType is ‘filterchoicerequest’ as demonstrated in the below code snippet,


 

function actionBegin(args){

  if(args.requestType == 'filterchoicerequest' || args.requestType === "filtersearchbegin"){

 

 args.filterChoiceCount = 5000;   // change the filterchoicecount value as you need (the filter check list shown based on this value )

 }

}

 


Find the below documentation for your reference.


https://www.syncfusion.com/kb/13372/how-to-change-the-filter-choice-value-count-for-grid-excel-filter


Still, if you face the same issue, kindly share the total records count and simple issue reproducible sample to validate further.


Regards,

Joseph I.




TS Tomas Sladek March 14, 2023 12:05 PM UTC

Hi Joseph,


thanks for answer. However, rather than adjusting how many records I request, I'm interested if there is some filter setting or callback where I can completely bypass the network request, and instead provide filter with immutable list of options to display, which is already stored in client's memory. It's safe to assume that querying all data would be a problem.

In my case as a user, when I'm setting up a filter, I'm not all that interested which values are present in real data, just that I get to select from all options defined in catalogue.



JC Joseph Christ Nithin Issack Syncfusion Team March 16, 2023 03:58 PM UTC


Thomas,


  Based on your query, you want to perform filtering in the client side. In your previous update, you have mentioned that you are using `UrlAdaptor` for binding the data. We suggest you to use the `RemoteSaveAdaptor` for performing actions in the client side. Please refer the below documentation where we have discussed in detail about RemoteSaveAdaptor.


Documentation: https://ej2.syncfusion.com/angular/documentation/grid/data-binding/remote-data#remote-save-adaptor


Loader.
Up arrow icon