Question

How to improve search filter area for Data Grid

0

I have this Data Grid with 20+ filters and it has become too cluttered and takes too much screen space. Are there ways to improve this? Like, say, a collapsible area where a few filters are shown then a expand button can then be pressed to show all the filters? Or maybe a pop-up button instead of an expand button? Or any other possible alternatives? If this is not possible with the Data Grid, then is it possible with other similar widgets like Data Grid 2? Edit: Clarification: What takes up too much space is not the Data Grid itself, but the search filter area/section of the Data Grid. The results/grid area is fine.

asked 2024-04-02

Alnel Vincent Alico

2 answers

Bhargav Ram Singh Bondili · Answer 1 · 2024-04-02

Hi Alnel,

For Datagrids with more columns, we will restrict the count of search inputs for only key attributes or needed attributes. It will not create a user-friendly UI for users by expanding search bars. Try to restrict the count of search inputs there.

If not, and you need a greater number of search filters, then use Datagrid2, here you can search the records using Filter Widgets (Data Controls in Toolbox). By using this, it will be User Friendly UI for searching when compared to Datagrid. Here, the search filters will be just below column you choose to have filter widget. so, you can have a user-friendly UI for users.

Below I have attached the screenshots of how filter widgets look like in Toolbox and how Datagrid2 looks like when we use filter widgets for columns.

Screenshot 2024-04-02 150926.png

Yusuf Kazan · Answer 2 · 2024-04-02

Hi Alnel,

I would suggest you to use a non-persisten entity (the name can be 'Filter'). In this case your data source for the data grid should be microflow. Steps:

1.Create 'Filter' entity which non persistent is.

Attributes:

Input (String)- to be able to make a general search,

isExpanded (boolean) - to make the visible or invisible the needed attributes which will filter the persistent entity per atrribute. E.g Name= Name or Nr= Nr,

attributes in the persistent entity. You can use the attributes of your persistent entity in the NP entity.

2.. Create a microflow or nanoflow which creates the 'Filter' entity and pass this entity to a page where the parameter 'Filter' is. On this page put a dataview. In the dataview add text boxes for the input attribute and your needed attributes and add 1 call a microflow button which changes 'isExpanded' to true or false. You can name this button as 'show more filters/less filters'

You can make your needed attributes to filter visible if the isExpanded is true. If it is false, you can make the the 'input' attribute visible.

3. put a datagrid under the textboxes in the same dataview. Your datasource should be microflow. In the microflow put a decision and use isExpanded attribute. If its true retrieve the items by filtering the needed attributes. if it is false, use 'input' attribute. See the screenshots:

4. You can use events microflow on text boxes to be able to refresh the page.

I hope it helps

Kind Regards

Yusuf