Silverlight DataGrid is a nice control provided for Data representation as well as manipulation. Since this control provides its object model separately e.g. DataGridColumn, DataGridColumnHeader etc, it is very easy for us to provide custom data representation capability to this control. In this article, I have demonstrated how to hide/unhide DataGrid columns depending on the user selection. This caters to requirements where the end-user wants to see only selected data column values from the source.
Step 1: Open VS 2010 and create Silverlight 4 project. Name it as ‘SL4_Hiding_Unhiding_DataGrid_Columns’. To this project, add the following classes. These classes will be used as a data source.
/// <summary>
/// Class containing Employee Details
/// </summary>
public class Employee
{
public int EmpNo { get; set; }
public string EmpName { get; set; }
public string DeptName { get; set; }
public string Designation { get; set; }
public decimal Salary { get; set; }
}
/// <summary>
/// Class contains Employee Collection
/// </summary>
public class EmployeeCollection : ObservableCollection<Employee>
{
public EmployeeCollection()
{
Add(new Employee() { EmpNo = 101, EmpName = "Ram",
DeptName = "Admin", Designation = "Supreme", Salary = 890000 });
Add(new Employee() { EmpNo = 101, EmpName = "Bharat",
DeptName = "Treasury", Designation = "Head", Salary = 390000 });
Add(new Employee() { EmpNo = 101, EmpName = "Lakshman",
DeptName = "Security", Designation = "Head", Salary = 290000 });
Add(new Employee() { EmpNo = 101, EmpName = "Shatrugnaha",
DeptName = "External Affairs", Designation = "CEO", Salary = 790000 });
Add(new Employee() { EmpNo = 101, EmpName = "Kirshna",
DeptName = "Admin", Designation = "Supreme", Salary = 190000 });
Add(new Employee() { EmpNo = 101, EmpName = "Balram",
DeptName = "Security", Designation = "Head", Salary = 390000 });
Add(new Employee() { EmpNo = 101, EmpName = "Gautam",
DeptName = "Education", Designation = "Supreme", Salary = 790000 });
Add(new Employee() { EmpNo = 101, EmpName = "Bhargav",
DeptName = "Security", Designation = "Head", Salary = 990000 });
Add(new Employee() { EmpNo = 101, EmpName = "Vaman",
DeptName = "Education", Designation = "Head", Salary = 190000 });
Add(new Employee() { EmpNo = 101, EmpName = "Udhav",
DeptName = "External Affairs", Designation = "Head", Salary = 290000 });
}
}
Step 2: In the MainPage.xaml.cs, add a class for storing MetaInfo of the Employee class. This class we will be used to read all public property names in the Employee class. This class will be further used for binding with the ListBox. The end user will select property name from this list box to hide column. The class code is as shown below:
Step 3: In the MainPage.Xaml.cs and in the MainPage class, declare the List<ColumnDetails> object. Also write the following method which will read the Employee class using ‘typeof’ operation (Reflection in short) and load its properties in List< ColumnDetails >. The code is as below:
and here’s the method:
Step 4: In the MainPage.xaml write the following xaml:
<UserControl x:Class="SL4_Hiding_Unhiding_DataGrid_Columns.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="458" d:DesignWidth="844"
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
Loaded="UserControl_Loaded">
<UserControl.Resources>
<DataTemplate x:Key="ColumnNameTemplate">
<CheckBox Width="140" IsChecked="{Binding IsSelected}"
Content="{Binding ColumnName}" Click="chBkx_Click"></CheckBox>
</DataTemplate>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="54*" />
<RowDefinition Height="404*" />
</Grid.RowDefinitions>
<TextBlock Name="textBlock1" Text="Employee Information" TextAlignment="Center"
FontSize="40" />
<sdk:DataGrid AutoGenerateColumns="False" Grid.Row="1" Height="359"
HorizontalAlignment="Left" Margin="29,23,0,0" Name="dgEmp"
VerticalAlignment="Top" Width="620" ColumnWidth="*">
<sdk:DataGrid.Columns>
<sdk:DataGridTextColumn Header="EmpNo" Binding="{Binding EmpNo}">
</sdk:DataGridTextColumn>
<sdk:DataGridTextColumn Header="EmpName" Binding="{Binding EmpName}">
</sdk:DataGridTextColumn>
<sdk:DataGridTextColumn Header="DeptName" Binding="{Binding DeptName}">
</sdk:DataGridTextColumn>
<sdk:DataGridTextColumn Header="Designation" Binding="{Binding Designation}">
</sdk:DataGridTextColumn>
<sdk:DataGridTextColumn Header="Salary" Binding="{Binding Salary}">
</sdk:DataGridTextColumn>
</sdk:DataGrid.Columns>
</sdk:DataGrid>
<TextBlock Grid.Row="1" Height="38" HorizontalAlignment="Left" Margin="661,23,0,0"
Name="textBlock2" Text="Please Uncheck the Column to Hide:"
VerticalAlignment="Top"
Width="125" TextWrapping="Wrap" />
<ListBox Grid.Row="1" Height="228" HorizontalAlignment="Right" Margin="0,67,52,0"
Name="lstEmployeeColumns" VerticalAlignment="Top" Width="131"
ItemTemplate="{StaticResource ColumnNameTemplate}" />
</Grid>
</UserControl>
Step 5: Declare the following object in the MainPage class level and in the Loaded event of the MainPage user control, write the following code:
EmployeeCollection EmpCol;
CheckBox chBkx;
private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
EmpCol = new EmployeeCollection();
//Bind EmployeeCollection to DataGrid
dgEmp.ItemsSource = EmpCol;
LoadListWithClassProperties();
//Bind the ColumnName collection to ListBox
lstEmployeeColumns.ItemsSource = PropertyDetails;
}
The above code binds the EmployeeCollection object to the DataGrid and also makes a call to the LoadListWithClassProperties() method. Finally it binds the PropertyDetails List object to the ListBox.
Step 6: If you see the above Xaml, it defines the DataTemplate of the name ‘ColumnNameTemplate’. This defines CheckBox and implements the ‘Click’ event. This DataTemplate is passed to the ListBox to display all properties from Employee class with checkboxes. Write the Click event in the code-behind for this checkbox. The code Is as below:
/// <summary>
/// The logic for hinding/Unhiding the columns from DataGrid
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
void chBkx_Click(object sender, RoutedEventArgs e)
{
chBkx = sender as CheckBox;
bool isChecked = Convert.ToBoolean(chBkx.IsChecked);
if (isChecked == false)
{
foreach (DataGridColumn dgColumn in dgEmp.Columns)
{
if (dgColumn.Header.ToString() == chBkx.Content.ToString())
{
dgColumn.Visibility = System.Windows.Visibility.Collapsed;
break;
}
}
}
if (isChecked == true)
{
foreach (DataGridColumn dgColumn in dgEmp.Columns)
{
if (dgColumn.Header.ToString() == chBkx.Content.ToString())
{
dgColumn.Visibility = System.Windows.Visibility.Visible;
break;
}
}
}
}
}
The above code is the heart of the article. When the user deselects any checkbox from the ListBox, the DataGridColumn having header matching the property name will be hidden. When the user checks the checkbox, the matching DataGridColumn again gets displayed.
Step 7: Run the application and the initial screen will be as below:
From the ListBox deselect the ‘DeptName’ and the result will be as shown below:
Select the DeptName column again and here’s the result:
