Total votes: 0
Print: Print Article
Please login to rate or to leave a comment.
Published: 28 May 2012
If you have come across the JQGrid features, you might have seen the filter row available as the first row in the grid. The feature includes filtering the column data as soon as you start typing into the textboxes. Similarly we are going to achieve it for Telerik's RadGridView. Instead of on the top, we would do it at the bottom of the RadGridView.
RadGridView from Telerik is one of the powerful Grid views available, especially for Silverlight. If you have come across the JQGrid features, you might have seen the filter row available as the first row in the grid. The feature includes filtering the column data as soon as you start typing into the textboxes. Similarly we are going to achieve it for Telerik's RadGridView. Instead of on the top, we would do it at the bottom of the RadGridView.
Let's visualize the requirement, as you see in the following diagram; we have the filter text boxes kept at the bottom of the grid. Now let's see whether we have something from RadGridView we can make use of. Yes of course, as I have mentioned above, it is one of the powerful grid view. It has a ColumnFooter Property that we could utilize.
Coming to the next step, we have to consider the following:
- How do we place a TextBox in the Column Footer.
- How to have the binding.
- How to change the width of the textbox on column resize.
- The filter should be visible in the filter control.
There are two ways you could add a RadGridView to your Silverlight project, the first one is with the Telerik Project template which would come if you have installed the RadControls for Silverlight.
As you see above, the required dlls would be added if you use the Project Configuration Wizard, else you could add only those dlls and use the RadGridView.
We would have a RadGridView in our Demo Project.
As you see in the above image, we have enabled the
ShowFooterPanel in RadGridView, which would satisfy our requirement. Let's have some sample data for the Grid. To make the columns available automatically we need to set
As you can see, the column footers are having empty footer cells. We could utilize the
DataLoaded event handler for creating dynamic TextBoxes into the Footer cells. The trick is once the
DataLoaded event is fired we would unsubscribe the event handler, so that it won't be hit all the time whenever data is loaded into the grid.
As you see in the above code snippet, we are doing a foreach for all the Columns available in the RadGridView and based on the Type of the column, we are subscribing
KeyDown event for the TextBox; this is because if the data type for the column is either int, double or float, we would have to restrict the TextBox for entering non-numeric values. Also we are adding the TextBox to the FooterCell.
If you look at the description for the Footer property of the column, it says that it's an object which would be get or set. That means if we add the Binding to the TextBox, it would never be applied. We are discussing this because, when we add a TextBox to the Footer of the Column, the width remains default; that is as per our logic, if it less than or equals the width of 30 then make it 120 otherwise apply the columns actual width.
Remember that, a column's width property could be bound to the width of the TextBox. To achieve that we need to subscribe for another event of the RadGridView, and that is
As you see in the above code snippet, we are finding the textbox from the column's footer and assigning the new width to the column. We are checking for 20 pixels because, the Column of the RadGridView contains a Filter control, so whenever the column is squeezed to the maximum, the width of the column remains 20 pixels intact.
As we are subscribing to the
KeyDown events of the TextBox, let's put some logic in there.
You could see in the above code snippet, the special characters and the numeric values are handled in the
KeyDown event of the TextBox.
In RadGridView, we have two types Filters are handled at column level, also known as FilterDescriptors. Such as:
- Distinct Filter
- Field Filter
When we click on the Filter control available in the column, it displays the above Filter popup. All the values with check boxes are known as Distinct Filter and the 2nd option where "Show rows with value that" would be Field Filter.
The logical operators would also change based on the data type of the column. For example, for numeric columns "Is Greater Than" would be available, which is not available for string type columns.
Our aim is, when we filter in the TextBox, it should also be seen at the column level. To achieve that we need to use the ColumnFilterDescriptor, this takes column as a parameter which would identify the column in its collection.
Let's have a collection of Keys, which are invalid keys for filtering. We would check for the above Keys and then proceed.
Let's assume that we would have Contains as the default logical operator for string type columns and for non-string type column we would have the default logical operator as
As you can see in the above switch case statement, we are having different types as the check statement. Based on the type, the value would be converted, and in the default case the value would always be string.
This check is required, otherwise you would end up creating runtime errors such as cannot convert to type...
Also we are checking for whether the TextBox value is empty, if it is empty we would remove the filter else add it.
While adding a filter also we have implemented a logic, such as; if the column has some filters already applied, remove the specific filter first and then add it.
Let's see the full code for the
KeyPress event handler.
Let's run the application and apply some filter.
As you see in the above image, whenever a filter is applied the filter indicator for the specific column shows the indicator (TeamName and Price columns).
As you see in the above image, the specific filter is applied to column filter descriptor.
We have successfully implemented the TextBox filter at the bottom of the RadGridView in Silverlight. Hope you like this article, we will see more customization.
Diptimaya Patra is a Client App Dev MVP, also a software consultant in the following areas: Silverlight, WPF, Expression Blend, Windows Phone 7.
Follow him in tweeter @dpatra
This author has published 14 articles on DotNetSlackers. View other articles or the complete profile here.
Please login to rate or to leave a comment.