How I can add 'Multiple' filters on my page for the data in the grid (grid is having 10 columns and I want to add filter for all the columns) which will be more obvious and easy to use for the user (i.e. without making them confuse) ? I have two options in mind. First one is to add a dropdown list (having all the columns' names in it) and a text box (where user will type the value to filter the data with respect to the selected column name in the dropdown list).Then I'll add a '+' icon button at right to add another filter (clicking the '+' button will add another dropdown and a text box for multiple filtering) so that user can add filters upto 10. The other option to implement this is to add a permanent text box on top of the data columns in grid for every column. Which option will be more suitable and why ? or tell me if there any better way to implement multiple filtering. I'll be thankful for your valuable suggesstions.
1 Answer
I have seen both implementations and I am all for the second option. The reason is simply because it provides a better spatial mapping between the filter definition and the data it is applied on.
One major problem of filtered grids is that the active filters are not obvious enough. Make sure you convey to the user that the data is filtered.
Another suggestion is to try to avoid free entry text boxes if possible. I favor a button that opens a popup (similar to a dropdown) where you have more space to place more usable controls like combo boxes, radio buttons, drop downs, sliders and so on. This make the filter definition process easier.