Sending payload as a keyword in Grid Datamanager excel type filter

[Sreevatsan]

I am using WebApiAdaptor and Datamanager for binding my remote data. I have more than 1 lakh data. I am using excel type filter. When I search a keyword in grid filter, it searches with the keyword and returns results inside grid filter popup. But when I hit "Ok" on the grid filter it sends the payload with all matching items of the keyword which makes payload too large to handle and returns 414 URI too long error. I need the same search key to go as payload after I click "Ok" in the filter popup. Is there a solution? Since I am handling large datasets this is needed. I may also need to handle multiple filters for different columns and sorting too.

[Santhosh Iruthayaraj]

Hi Sreevatsan,

Greetings from Syncfusion Support.

As you have mentioned, when using the Grid with remote data, enabling Excel or Checkbox filtering and performing a search within the filter search bar will include all matching items to the query string. If you attempt to remove this query and only retain the search portion, it may disrupt the default behavior of the DataManager and any associated Adaptor. Therefore, it is not recommended to remove filter items from the query string when using DataManager with Adaptors.

However, instead of using the DataManager, you can achieve your requirement by utilizing the Grid’s Custom Binding feature. This feature allows you to construct and execute your own API queries and manually bind the response to the Grid. To use Custom Binding, you must initially fetch a set of records along with the total record count from the server and bind the data to the Grid using an object containing the "result" and "count" properties. Binding the data in this format will trigger the "dataStateChange" event, which includes the current state of the Grid in its arguments. You can use this state information to construct your custom query and return data in the same "result" and "count" format for subsequent operations.

To populate the Excel or Checkbox filter’s dataSource, the "dataStateChange" event arguments will provide a method called "state.dataSource" when the on filter popup open. You can use this method to assign a dataSource specifically for the filter UI.

For more information, please refer to the documentation below:

Documentation: Custom Binding in Vue Grid component | Syncfusion

You can also use “UrlAdaptor” with DataManager, which is basically send POST request for every Grid actions including Filtering. Unlike GET request, where the query string length is limited, POST request allows you to send much larger payloads without these kinds of errors. You can find more information about UrlAdaptor from the documentation below:

Documentation: Bind data and perform CRUD action with UrlAdaptor in Syncfusion Grid

Please let us know if you have any further queries or need additional assistance.

Regards,

Santhosh I

[Sreevatsan]

Thank you for the suggestions. Will try this out and revert.

[Santhosh Iruthayaraj]

Hi Sreevatsan,

Thank you for the update, please let us know if you need any further assistance.

Regards,

Santhosh I