Question

I need to estimate (and probably build later on) complex filter in ASP.NET WebForms application. The filter has to be mostly based on ASP.NET AJAX or jQuery for high interactivity. The filter has to allow filtering data with complex logical conditions (and, or, braces) and several operators. A user has to be able to save the filter’s query and use it (load it) later on (server logic). Moreover there is still discussion about in operator.

Application should provide some graphical filter builder. I want to have full control on set of operands (filtering fields) and operators. The component will be used for all filtering actions in application. My problem is only how to do the UI part – translation of builded “query structure” is not a problem.

Have you ever did something like that? Can you share some experience how to best and fastest build such component? Do I need to develop component or is there any existing one which has at least some of the functionality and can be extended to provide other functionality? Because I’m not very experienced with client side development, I don’t know how complex task is developing such component from scratch.

Another possiblity is to define some meta query language and allow users to write the query to some query text box with support for building logical expressions.

I have already checked available controls in DevExpress and Telerik toolkits:

DevExpress:

• Pros: Really nice visualization, fast. We probably have DevExpress licences.
• Cons: Tightly coupled with DevExpress grid. Based on documentation no extensibility and no control over operands and operators. It uses operands provided as columns for grid – I need much more. Probably not possible to save and load filters.

Telerik:

• Pros: Not coupled with grid, it looks like separate control.
• Cons: I didn’t find documentation – I’m not sure about extensibility but the code looks like it uses some databind control as source of operands = problem. I don’t like the visualization. Demo is really slow. We don’t have Telerik licences.

Answer 1

The most important thing i would suggest: keep your query builder UI quite divorced from whichever grid you use. When you have it closely coupled it forces you into design and technical decisions you may regret later. DevExpress particularly tend to have a few breaking changes every couple of releases, and this can force you to constantly have to refactor your code. They also have some peculiarly unique ways of doing things which can mean that you end up coding hacks to achieve what you want.

If you keep your UI very loosely coupled, you can build it any way you want, then take the user’s input and create grid filters from it, then add those filters to the grid. It also means that if you decide to swap grids at a later date you only have to change the minimum of code (this approach also helps if you decide to trial the components and you need to run as similar as possible code against both grids).

Personal comment – after doing extensive filtering with both of those component sets, i’ll say one thing: we moved to Telerik for a reason. Well, many reasons actually. And we’ve not looked back in regret. Also the Telerik guys are very good at helping extend and do funky stuff with their controls, while the DevExpress guys tend to take the attitude “why would you want to extend our controls? Aren’t they perfect already? We win all the popularity contests at the developer conferences after all.”. You really need to do a trial between them before you commit to one or the other. Good luck 🙂