Excel like Filtering in Silverlight DataGrid
Posted by: Mahesh Sabnis ,
on 7/19/2011,
in
Category Silverlight 2, 3, 4 and 5
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:
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.
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.
Step 4: Run the application and the following result will be displayed:
Click on the ‘Filter Task Assigned To’ CheckBox and the TaskAssignedTo DataGridColumn will display the ComboBox as shown below:
Click on the ComboBox and select the Name from it. Observe the result:
After deselecting the CheckBox, the result is the following:
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
This article has been editorially reviewed by Suprotim Agarwal.
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 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 Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.
Click here to Explore the Table of Contents or Download Sample Chapters!
Was this article worth reading? Share it with fellow developers too. Thanks!
Mahesh Sabnis is a DotNetCurry author and a Microsoft MVP having over two decades 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), and Front-end technologies like Angular and React. Follow him on twitter @
maheshdotnet or connect with him on
LinkedIn