Excel like Filtering in Silverlight DataGrid
Posted by: Mahesh Sabnis
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
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!