New Filtering Menu for RadGrid for ASP.NET AJAX

Monday, February 08, 2010 by ASP.NET AJAX Team | Comments 8

Hi everyone,

As of Q1 2010 RadGrid will be equipped with a new filtering menu – a powerful and flexible feature the interest in which was sparked by RadGrid’s MVC counterpart offered by Telerik. It will be a sub-part of RadGrid's header context menu and will allow for filtering the grid's data on two conditions related with a logical AND operator:

Filter

Perhaps, many of you are already eager to know how the new feature should be switched on/off. For this purpose a new property has been introduced into the RadGrid control -RadGrid.EnableHeaderContextFilterMenu/GridTableView.EnableHeaderContextFilterMenu. In addition, it is important that RadGrid.EnableHeaderContextMenu/ GridTableView.EnableHeaderContextMenu and RadGrid.AllowFilteringByColumn/GridTableView.AllowFilteringByColumn properties be set to true in order for the header context filter menu to be available.

For the purpose of supporting this extension to RadGrid's filtering mechanism, each GridColumn will feature an additional current filter function/value properties that are set to contain the second filter condition data. These properties are called AndCurrentFilterFunction/AndCurrentFilterValue:

<telerik:GridBoundColumn
             CurrentFilterFunction="GreaterThan" CurrentFilterValue="2.5"
             AndCurrentFilterFunction="LessThan" AndCurrentFilterValue="5.0"
             DataField="Freight" DataType="System.Decimal" HeaderText="Freight"
             SortExpression="Freight" UniqueName="Freight">
</telerik:GridBoundColumn> 

 

In spite of having been created to allow for filtering the grid on two conditions, the new menu will give the freedom to set only one of those. The condition for which no data has been set will be ignored and RadGrid will filter its data only on the one for which a filter function and a filter value have been set.

When a filter command is triggered from the header context filter menu, RadGrid will construct a command argument object represented by a Triplet:

  • the first object will contain the column's unique name on which the filter command has been fired.
  • the second will be a Pair object including the first filter condition filter function and filter value.
  • the third one will also constitute a Pair object containing the second filter condition filter function and filter value. 

After the ItemCommand event of the grid is raised, the command argument object constructed as described above will be sent into the event handlers attached to the event. The name of the new filter command is HeaderContextMenuFilterCommand.

The header context filter menu will consist of:

  • a "ClearFilter" button that resets the filtering on the given column
  • two RadComboBox controls containing the filter function options
  • two RadTextBox's or another type of special controls for setting the filter values.

and will be represented by a single object server-side. This way of implementation has been chosen to speed up the grid performance by merely creating one menu instance server side and then, based on the type of the column over which it is displayed, show the required filter functions and filter value controls. The presence in the grid of special columns such as GridDateTimeColumn, GridMaskedColumn etc. will make the header context filter menu create corresponding controls for extra convenience in specifying the filter values (such as RadDatePicker, RadMaskedBox, etc.). For greater optimization only two instances of each specific type of control are created server-side and then used for all columns that require them. Therefore, if the grid has five numeric columns only two instances of a RadNumericBox control will be created and then used by all numeric columns. Still the filtering menu remains independent for each column - this means that the filtering menu options vary by the column's DataType and the properties of the special controls will depend on any other specific column properties such as Mask, DecimalDegits, PickerType etc. 

The new filter menu can be used along-side the classic one. In this case, the GridTableView.IsFilterItemExpanded property should be set to true (the default value). When the two filter menus are switched on simultaneously, the data set for the first filter condition of the header context filter menu will be also set as filter data for the classic one and vice versa. Thus, if you choose the EqualTo filter option from the first combo in the header context filter menu and specify "Bulgaria" as a filter value, then the filter function of the classic menu on the same column will automatically be set to EqualTo and the filter box will be populated with "Bulgaria" as a filter value. If you want to use just the header context filter menu, then just set GridTableView.IsFilterItemExpanded property to false leaving, as mentioned above, the RadGrid.GridTableView/GridTableView.AllowFilteringByColumn property to true.

There is no other more valuable feature, a grid control may possess, than its filtering capabilities. Improving those means placing  more and more power at the hands of developers and end-users. And that’s exactly what we have tried to deliver with the introduction of RadGrid’s header context filter menu. So, stand by the Q1 release is just around the corner.

8 Comments

  • Alex 08 Feb 2010
    This is great. Will we be able to open this client side so we can add a filtering image that when clicked will open? Similar experience to Silverlight/WPF

    Great job. Looking forward to this.
  • Tsvetoslav 09 Feb 2010
    Yes, Alex,
    that should be fairly easy using the GridColumn client-side object's API and in particular the showHeaderMenu method. Here is some more information on the latter:
  • Boudewijn van veen 10 Feb 2010
    Is there a way to get the search criteria the user selected to the server? i would like to sync a grid with a chart and still need this info. So if the user used the filter to select "country = netherlands" i would be able to use this info on the server.
  • Tsvetoslav 11 Feb 2010
    Hi, Boudewijn,
    all the filter information is present in the GridTableView.FilterExpression string, so you can just parse it and use as per your application scenario. 
  • nick 19 Feb 2010
    Why support only two criteria per column?  Why not support an unlimited number of criteria?
  • Tsvetoslav 24 Feb 2010
    Hi, Nick,
    RadGrid's header context menu is not suitable for a filter sub-menu as envisioned by you. However, the feature you are recommending (multiple-condition filtering) is on the to-do list of our development team and was one of the reasons for the creation of our new control - RadFilter. An example of the latter combined with a RadListView can be found at the following link:
    http://demos.telerik.com/aspnet-ajax-beta/filter/examples/firstlook/defaultcs.aspx

    RadFilter is planned to be integrated into RadGrid and will provide the support for filtering the grid's data on an unlimited number of criteria.
  • Tom 27 Jun 2011
    What about OR conditions?
  • Tsvetoslav Kovachev 28 Jun 2011
    RadGrid's header context filter menu does not have this option and it is not on our to-do list. However, you can either use RadFilter to build more powerful filter expressions for the grid or manipulate the FilterExpression property of the grid's table views. Do take a look at our online help for more information:
    http://www.telerik.com/help/aspnet-ajax/grid-operate-with-filter-expression-manually.html
    http://www.telerik.com/help/aspnet-ajax/filter-basics.html

Add comment

  1. Formatting options
       
     
     
     
     
       
  2. (optional, emails won't be shown on public pages)
  3. (optional)