Published: 28 May 2012
By: Diptimaya Patra

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.

Contents [hide]

Introduction

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.

Thought Process

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.

Adding RadGridView

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 AutoGenerateColumns to True.

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 ColumnWidthChanged.

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 KeyUp and 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 IsEqualTo.

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.

Conclusion

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.

<<  Previous Article Continue reading and see our next or previous articles

About Diptimaya Patra

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.

Other articles in this category


Displaying Notification Messages in a Silverlight Dashboard Application
In this article we will see how we could display a notification message and further a list of notifi...
Develop a Flexible 2.5D Scene Editor Targeting Silverlight RPG Games - Part 1
Starting from this article, I'm going to introduce to you an excellent 2.5D RPG games scene editor -...
Air Space Issue in Web Browser Control in Silverlight
Air Space issue is a common issue in Web Browser control in Silverlight and WPF. To explain the issu...
Widget Refresh Timer in MVVM in Silverlight
In this article we'll see how to refresh and disable widgets using the Model View View-Model pattern...
Develop a Flexible 2.5D Scene Editor Targeting Silverlight RPG Games - Part 2
In this article, I'm going to introduce to you how to construct such a 2.5D RPG game scene editor th...

You might also be interested in the following related blog posts


VBA code I wrote this week in Excel and how it helped me read more
Telerik Launches RadControls for Silverlight 3 for Line-of-Business Application Development read more
Reporting Release History : Q2 2009 SP1 (version 3.1.9.807) read more
Silverlight Release History : Q2 2009 (version 2009.2.701) read more
WPF Release History : Q2 2009 (version 2009.2.701) read more
Telerik Introduces Free Web Testing Framework for ASP.NET AJAX and Silverlight read more
WPF Release History : Q1 2009 SP2 (version 2009.1.526) read more
Silverlight Release History : Q1 2009 SP2 (version 2009.1.526) read more
Reporting Release History : Q1 2009 SP1 (version 3.0.9.430) read more
Introduction to HealthvaultDevelopment #11: Data filtering read more
Top
 
 
 

Please login to rate or to leave a comment.