In the previous article I described how to bind Silverlight data grid with different data sources. In this article I will try to explain what different column types are supported in data grid and how to change binding of columns in code behind….

There are three types of columns in data grid.

1. DataGridTextColumn
2. DataGridCheckBoxColumn
3. DataGridTemplateColumn

DataGridTextColumn

DataGridTextColumn can be used to display plain text. This is the default column when AutoGenerateColumns is marked as True.It uses a TextBlock to display it’s data and Texbox to allowing editing of data.

<sdk:DataGrid AutoGenerateColumns="False" Name="dataGrid1" 
    <sdk:DataGrid.Columns>
        <sdk:DataGridTextColumn CanUserReorder="True" CanUserResize="True" CanUserSort="True"
          Width="Auto" Binding="{Binding ItemNumber}" 
          Header="ItemNumber"/>
    </sdk:DataGrid.Columns>
</sdk:DataGrid>

The code above is doing a few things:

1. It creates the Columns collection using the <sdk:DataGrid.Columns> tag.
2. Inside that collection it creates a new DataGridTextColumn
3. The content that you see in the column header is set to "ItemNumber" using the Header property
4. The column is data bound to the ItemNumber property using the Binding property. 

DataGridCheckBoxColumn

DataGridCheckBoxColumn is used to display the value of a Boolean property.It provides a read-only CheckBox for displaying a boolean or nullable boolean value, and a normal CheckBox to allow editing of that value.

<sdk:DataGrid AutoGenerateColumns="False" Name="dataGrid1" 
    <sdk:DataGrid.Columns>
        <sdk:DataGridCheckBoxColumn Header="Available" Binding="{Binding IsAvailable}" />
    </sdk:DataGrid.Columns>
</sdk:DataGrid>

DataGridTemplateColumn

DataGridTemplateColumn is used to add any Silverlight control like... Button, Link Button, Hyperlink, Date Picker, Textbox… we want to add in the column.

<sdk:DataGrid AutoGenerateColumns="False" Name="dataGrid1" 
<sdk:DataGrid.Columns>
<sdk:DataGridTemplateColumn Header="Invoice Date">
      <sdk:DataGridTemplateColumn.CellTemplate>
               <DataTemplate>
                    <TextBox Text="{Binding InvoiceDate}" 
                               FontFamily="Verdana"  
                               FontSize="11" 
                               Margin="5,5,5,5">
                            </TextBox>
               </DataTemplate> 
              </sdk:DataGridTemplateColumn.CellTemplate>   
         </sdk:DataGridTemplateColumn>
    </sdk:DataGrid.Columns>
</sdk:DataGrid>

In DataGridTextColumn and in DataGridCheckBoxColumn the cell editing behavior is predefined but in DataGridTemplateColumn we can also define the Cell Editing behavior to whatever we want... let say when InvoiceDate column is being edited we want to display a date picker instead of textbox…

<sdk:DataGrid AutoGenerateColumns="False" Name="dataGrid1" 
    <sdk:DataGrid.Columns>
        <sdk:DataGridTemplateColumn Header="Last Invoice Date">
           <sdk:DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding LastInvoiceDate}" 
                        FontFamily="Verdana"  
                        FontSize="11" 
                        Margin="5,5,5,5">
                    </TextBlock>
                </DataTemplate> 
           </sdk:DataGridTemplateColumn.CellTemplate>   
           <sdk:DataGridTemplateColumn.CellEditingTemplate>
                <DataTemplate>
                    <sdk:DatePicker SelectedDate="{Binding LastInvoiceDate, Mode=TwoWay}" />
                </DataTemplate> 
           </sdk:DataGridTemplateColumn.CellEditingTemplate>   
        </sdk:DataGridTemplateColumn>
    </sdk:DataGrid.Columns>
</sdk:DataGrid>

The code above is doing a few things:

1. A DataGridTemplateColumn is being added to the Columns collection with its header being set to "Last Invoice Date".
2. The CellTemplate property, which takes a DataTemplate, is being used to define the UI that cells in the column will use to display the data.
3. In this instance, the content of that DataTemplate is a TextBlock that has its Text property bound to the "LastInvoiceDate" property on the Data Item
4. In addition to the CellTemplate the DataGridTemplateColumn's CellEditingTemplate property is also being set.  This property is also a DataTemplate and defines the UI that cells in the column will display during edit mode.
5. In this instance, the content of the CellEditingTemplate's DataTemplate is a DatePicker control that has its SelectedDate property also bound to the "LastInvoiceDate" property.

<sdk:DataGrid AutoGenerateColumns="False" HorizontalAlignment="Left" Margin="85,45,0,247" Name="dataGrid2" Width="506">
    <sdk:DataGrid.Columns>
        <sdk:DataGridTextColumn Binding="{Binding ItemNumber}" 
                CanUserReorder="True" CanUserResize="True" CanUserSort="True" 
                Header="ItemNumber" Width="Auto" />
        <sdk:DataGridTextColumn Binding="{Binding ItemDescription}" 
                CanUserReorder="True" CanUserResize="True" CanUserSort="True"
                Header="ItemDescription" Width="Auto" />
        <sdk:DataGridTextColumn Binding="{Binding Quantity}" 
                CanUserReorder="True" CanUserResize="True" CanUserSort="True"
                Header="Quantity" Width="Auto" />
        <sdk:DataGridTemplateColumn Header="Last Invoice Date">
            <sdk:DataGridTemplateColumn.CellEditingTemplate>
                <DataTemplate>
                    <sdk:DatePicker SelectedDate="{Binding LastInvoiceDate, Mode=TwoWay}" />
                </DataTemplate>
            </sdk:DataGridTemplateColumn.CellEditingTemplate>
            <sdk:DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <TextBlock FontFamily="Verdana" FontSize="11" Margin="5,5,5,5" Text="{Binding LastInvoiceDate}" />
                </DataTemplate>
            </sdk:DataGridTemplateColumn.CellTemplate>
        </sdk:DataGridTemplateColumn>
        <sdk:DataGridCheckBoxColumn Binding="{Binding IsAvailable}" Header="Available" />
    </sdk:DataGrid.Columns>        
</sdk:DataGrid>

So far we saw how to and when to use different columns of data grid…But we added the column in XAML... What if we want to add column to data grid in code behind...So let’s see that…

We can add DataGridTextColumn and DataGridCheckBoxColumn easily. Add the code below in the constructor method of the page…

For DataGridTextColumn

DataGridTextColumn ItemNumber = new DataGridTextColumn();
ItemNumber.Header = "ItemNumber";
ItemNumber.Binding = new Binding("ItemNumber");
dataGrid1.Columns.Add(ItemNumber);

For DataGridCheckBoxColumn

DataGridCheckBoxColumn Available = new DataGridCheckBoxColumn();
Available.Header = "Available";
Available.Binding = new Binding("IsAvailable");
dataGrid1.Columns.Add(Available);

To generate DataGridTemplateColumn there are two methods.

1. Resource Method
2. XAMLReader Method

Resource Method

This method creates the DataTemplate for CellTemplate and CellEditingTemplate in XAML and stores them as named resources.  Then when the column is created the DataTemplates are used.

<UserControl.Resources>
    <DataTemplate x:Key="LastInvoiceDateCellTemplate">
        <TextBlock FontFamily="Verdana" FontSize="11" Margin="5,5,5,5" 
                Text="{Binding LastInvoiceDate}" />
    </DataTemplate>
    <DataTemplate x:Key="LastInvoiceDateCellEditTemplate">
        <sdk:DatePicker SelectedDate="{Binding LastInvoiceDate, Mode=TwoWay}" />
    </DataTemplate>
</UserControl.Resources> 

Then TemplateColumn can be added to the datagrid as following:

DataGridTemplateColumn LastInvoiceDate = new DataGridTemplateColumn();
LastInvoiceDate.Header = "Last Invoice Date";
LastInvoiceDate.CellTemplate = this.Resources["LastInvoiceDateCellTemplate"] as DataTemplate;
LastInvoiceDate.CellEditingTemplate = this.Resources["LastInvoiceDateCellEditTemplate"] as DataTemplate;
dataGrid1.Columns.Add(LastInvoiceDate);

XAML Reader Method

This method creates the DataTemplate inline using the XamlReader class.  This class takes a string and parses it to try to build a visual tree. This method is considerably more difficult than the resources method. This method is especially useful if the DataTemplate itself has to be dynamic.

DataGridTemplateColumn LastInvoiceDate = new DataGridTemplateColumn();
LastInvoiceDate.Header = "Last Invoice Date";
StringBuilder CellTemp = new StringBuilder();
CellTemp.Append("<DataTemplate ");
CellTemp.Append("xmlns='http://schemas.microsoft.com/winfx/");
CellTemp.Append("2006/xaml/presentation' ");
CellTemp.Append("xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' >");

CellTemp.Append("<Grid>");
CellTemp.Append("<TextBlock ");
CellTemp.Append("Text = '{Binding LastInvoiceDate}' ");
CellTemp.Append("Margin='4'/>");
CellTemp.Append("</Grid>");
CellTemp.Append("</DataTemplate>");

StringBuilder CellETemp = new StringBuilder();
CellETemp.Append("<DataTemplate ");
CellETemp.Append("xmlns='http://schemas.microsoft.com/winfx/");
CellETemp.Append("2006/xaml/presentation' ");
CellETemp.Append("xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' ");
            CellETemp.Append("xmlns:sdk='http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk' >");
CellETemp.Append("<sdk:DatePicker ");
CellETemp.Append("SelectedDate='{Binding LastInvoiceDate, Mode=TwoWay}' />");
CellETemp.Append("</DataTemplate>");

LastInvoiceDate.CellTemplate =(DataTemplate)XamlReader.Load(CellTemp.ToString());
LastInvoiceDate.CellEditingTemplate =(DataTemplate)XamlReader.Load(CellETemp.ToString());
dataGrid1.Columns.Add(LastInvoiceDate);

Some points to be remembered for using this method:

1. You will need to declare any XAML namespace that is used in the data template
2. Any custom XAML namespace needs to specify both the clr-namespace and the assembly
3. You cannot have white space between the xmlns: and the name of your namespace
4. External resources cannot be referenced, they need to be declared inline
5. The entire template is a single line, so if you get a XAML Parse exception, it will always say line 1, however the character is fairly accurate if you were to concatenate all of your lines.
6. When using the StringBuilder approach shown below, make sure that you have the correct white space at the end of a line so that it is correctly separated when concatenated with the next line.

Recently I came across a problem when the number of columns in the data grid is fixed but I need to toggle the Binding property of a specific column… Let’s do that in our Item Grid example…

Let’s add two radio buttons for “View Item Name” and “View Item Number” on selection on that radio buttons we need to toggle the Binding column for first column in the data grid. See below image…

<RadioButton Content="ItemNumber" Height="16" HorizontalAlignment="Left"
        Margin="341,130,0,0" Name="radioButton1" 
        VerticalAlignment="Top" Checked="radioButton1_Checked"  />
<RadioButton Content="ItemDescription" Height="16" HorizontalAlignment="Left"
        Margin="466,133,0,0" Name="radioButton2" 
        VerticalAlignment="Top" Checked="radioButton2_Checked" />
<sdk:DataGrid AutoGenerateColumns="False" 
       Height="218" HorizontalAlignment="Left" Margin="341,152,0,0"
       Name="dataGrid4" VerticalAlignment="Top" Width="332"
       ItemsSource="{Binding}" Loaded="dataGrid4_Loaded"  >
    <sdk:DataGrid.Columns>
        <sdk:DataGridTextColumn CanUserReorder="True" CanUserResize="True" 
               CanUserSort="True" Width="Auto" 
               Header="ItemDescription"  />
        <sdk:DataGridTextColumn CanUserReorder="True" CanUserResize="True" 
               CanUserSort="True" Width="Auto" 
               Header="Quantity"/>
    </sdk:DataGrid.Columns>
</sdk:DataGrid>

To implement that you can change the binding of the column on the data grid’s Loaded Event.

private void dataGrid4_Loaded(object sender, RoutedEventArgs e)
{
   Binding d;
   if (radioButton1.IsChecked == true)
      d = new Binding("ItemNumber");
   else
      d = new Binding("ItemDescription");

   d.Mode =  BindingMode.OneWay;
   (dataGrid4.Columns[0] as DataGridTextColumn).Binding = d;
   (dataGrid4.Columns[0] as DataGridTextColumn).Header = d.Path.Path.ToString();  
   (dataGrid4.Columns[1] as DataGridTextColumn).Binding = new Binding("Quantity");
}

private void radioButton2_Checked(object sender, RoutedEventArgs e)
{
   dataGrid4_Loaded(sender,e); 
}

private void radioButton1_Checked(object sender, RoutedEventArgs e)
{
   dataGrid4_Loaded(sender, e); 
}