Excel like Filtering in Silverlight DataGrid

Posted by: Mahesh Sabnis , on 7/19/2011, in Category Silverlight 2, 3, 4 and 5
Views: 89937
Abstract: Microsoft Excel is a popular product and it’s very common for end-users to expect a similar experience in any grid like control they use. The same goes for the Silverlight DataGrid where users expect a similar experience when it comes to filtering records. In this article, to create an excel filtering like experience in a Silverlight DataGrid, I am using a ControlTemplate using which you can add any kind of a UI element like the ComboxBox in the header.

Microsoft Excel is a popular product and it’s very common for end-users to expect a similar experience in any grid like control they use. The same goes for the Silverlight DataGrid where users expect a similar experience when it comes to filtering records. To create an excel filtering like experience in a Silverlight DataGrid, I am using a ControlTemplate using which you can add any kind of a UI element like the ComboxBox in the header. Let us get started:

 

Note: If you are interested in Silverlight development, make sure you check out this article - Microsoft Silverlight 4 Tutorials You Must Read

Step 1: Open VS 2010 and create a new Silverlight project, name it as ‘SL4_ComboBox_DataGrid_Column_Header’. In this project, add a new class file which contains the following classes:

silverlight-data-collection

The code above also defines an ObservableCollection<T> Names which stores some names in it. In a real scenario, you can make use of WCF Service call to get distinct names for the TaskAssignedTo value.

Step 2: Open MainPage.xaml and write the following xaml code.

silverlight-datagrid-filter-xaml

The code shown above defines an instance of the TaskCollection class in UserControl.Resources. These resources also define a ControlTemplate for DataGridColumnHeader to add the ComboBox in it. The ComboBox is bound with the string ObservableCollection<T>. The CheckBox when clicked, applies the ControlTemplate defined in the Resource dictionary under UserControl.Resources.

Step 3: Open MainPage.xaml.cs and write the following code in it.

Note: Please read the comments for each method to understand what the code does.

silverlight-datagrid-filter

Step 4: Run the application and the following result will be displayed:

Silverlight DataGrid Excel Filter

Click on the ‘Filter Task Assigned To’ CheckBox  and the TaskAssignedTo DataGridColumn will display the ComboBox as shown below:

Silverlight DataGrid Excel Filter

Click on the ComboBox and select the Name from it. Observe the result:

Silverlight DataGrid Excel Filter

After deselecting the CheckBox, the result is the following:

Silverlight DataGrid Excel Filter

There you go! We just create an excel like filtering facility in your Silverlight DataGrid.

The entire source  code of this article can be downloaded over here

Absolutely Awesome Book on C# and .NET

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce the The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this eBook aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core. Use these concepts to deepen your existing knowledge of C# and .NET, to learn new features or to crack your next .NET Interview.

Click here to Purchase this eBook at a Discounted Price!

What Others Are Reading!
Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Author
Mahesh Sabnis is a DotNetCurry author and Microsoft MVP having over 17 years of experience in IT education and development. He is a Microsoft Certified Trainer (MCT) since 2005 and has conducted various Corporate Training programs for .NET Technologies (all versions). Follow him on twitter @maheshdotnet


Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by Rathin Pandya on Monday, October 3, 2011 5:52 AM
very good and easy article to understand.
every thing in step by step.
Thanks
Comment posted by veeresh on Tuesday, October 18, 2011 2:19 PM
Hi As a Silverlight beginner, this post helped me a lot, I have a question on this how can we include  the checkbox in the combo when it is filtered so that I can get results for multiple names as Excel does. Please suggest me on this.
Comment posted by Thirukkumaran Haridass on Tuesday, November 29, 2011 10:17 AM
Mahesh, Great article about extending the Silverlight Grid. Kudos to you.
Comment posted by Ahlawat Vivek on Tuesday, May 15, 2012 8:07 AM
Excellent article Mahesh,It really help me a lot
Comment posted by proftalat on Sunday, May 27, 2012 12:24 AM
Very nice, easy to follow and implement. But, when you set up multiple columns to filter, it becomes a problem to know what the column headings were. Any suggestions?
Comment posted by Mahesh Sabnis on Saturday, June 23, 2012 6:30 AM
HI Proftalat,
  There is no OOB support available for multiple column filtering in SL DataGrid. What u need to do is to declar an ObservableCollection<> for the first column bind it to the DataGrid and then Apply sorting on this observable collection and then update binding.
It should work
Comment posted by Anitha on Friday, April 4, 2014 11:22 AM
Very Useful.Thanks

Categories

JOIN OUR COMMUNITY

POPULAR ARTICLES

C# .NET BOOK

C# Book for Building Concepts and Interviews

Tags

JQUERY COOKBOOK

jQuery CookBook