(X) Hide this
    • Login
    • Join
      • Generate New Image
        By clicking 'Register' you accept the terms of use .

The DataGrid Column types

(3 votes)
Martin Mihaylov
>
Martin Mihaylov
Joined Oct 29, 2007
Articles:   50
Comments:   70
More Articles
3 comments   /   posted on Sep 16, 2008
Categories:   Controls

This article is compatible with the latest version of Silverlight.

This is my third article about the DataGrid control in Silverlight. The first one was a brief introduction to the control and the second one was focused on some basic customizations of it. This one will discuss the column types that are present in the DataGrid control. There are three column types - TextColumn, CheckBoxColumn and a TemplateColumn.

Text column type

The DataGridTextColumn can be used for displaying plain text. It also gives the possibility to style the text with the standard properties FontFamily, FontSize, Foreground etc. Here is how we can define a Text column in both Xaml and C#:

Xaml

<my:DataGrid x:Name="Foods" AutoGenerateColumns="False">
    <my:DataGrid.Columns>
        <my:DataGridTextColumn Binding="{Binding Group}" Header="Group"></my:DataGridTextColumn>
    </my:DataGrid.Columns>
</my:DataGrid>

C#

DataGridTextColumn textColumn1 = new DataGridTextColumn();
textColumn1.Header = "Group";
textColumn1.Binding = new Binding( "Group" );
Foods.Columns.Add( textColumn1 );

 

CheckBox column type

This column type can be used to display a check box in the cells of the column. It can be used to display the value of a boolean property. The following code shows how to define such a column in both Xaml and code behind:

Xaml

<my:DataGrid x:Name="Foods" AutoGenerateColumns="False">
    <my:DataGrid.Columns>
        <my:DataGridCheckBoxColumn Binding="{Binding IsAvailable}" Header="Available?"></my:DataGridCheckBoxColumn>
    </my:DataGrid.Columns>
</my:DataGrid>

C#

DataGridCheckBoxColumn checkboxColumn1 = new DataGridCheckBoxColumn();
checkboxColumn1.Header = "Available?";
checkboxColumn1.Binding = new Binding( "IsAvailable" );
Foods.Columns.Add( checkboxColumn1 );

 

Template column type

The template column type uses a template in order to display the information of the cell. Using this type of a column we can display any information, not only boolean or text data. Using this column type we can have more than one binding in a cell. The Template column also gives us more possibilities for styling as we can style each control used in the template. Here is how we can define a column of this type:

<my:DataGrid x:Name="Foods" AutoGenerateColumns="False">
    <my:DataGrid.Columns>
        <my:DataGridTemplateColumn Header="Quantity">
            <my:DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Quantity}" 
                               FontFamily="Trebuchet MS" 
                               FontSize="11" 
                               Margin="5,5,5,5"></TextBlock>
                </DataTemplate>
            </my:DataGridTemplateColumn.CellTemplate>
        </my:DataGridTemplateColumn>
    </my:DataGrid.Columns>
</my:DataGrid>

In this case we duplicate the behavior of the Text column using a Template column with a TextBlock in it. Much more cool things can be done with the Template column, but that's up to your imagination.

The Text column type has a default EditingTemplate and the CheckBox column uses one template, but for the Template column type we have also to define a CellEditingTemplate, else the CellTemplate will be used as CellEditingTemplate:

<my:DataGrid x:Name="Foods" AutoGenerateColumns="False">
   <my:DataGrid.Columns>
       <my:DataGridTemplateColumn Header="Quantity">
           <my:DataGridTemplateColumn.CellTemplate>
               <DataTemplate>
                   <TextBlock Text="{Binding Quantity}" FontFamily="Trebuchet MS" FontSize="11" Margin="5,5,5,5"></TextBlock>
               </DataTemplate>
           </my:DataGridTemplateColumn.CellTemplate>
           <my:DataGridTemplateColumn.CellEditingTemplate>
               <DataTemplate>
                   <TextBox Text="{Binding Quantity}" FontFamily="Trebuchet MS" FontSize="11" Margin="5,5,5,5"></TextBox>
               </DataTemplate>
           </my:DataGridTemplateColumn.CellEditingTemplate>
       </my:DataGridTemplateColumn>
   </my:DataGrid.Columns>
</my:DataGrid>

A TextBox is used in the DataTemplate, so we can edit the value of the TextBlock.

If we want to define the column from the code behind we must have the template and the editing template defined as Resources. Here it is:

<UserControl.Resources>
    <DataTemplate x:Key="PlainTextColumnTemplate">
        <TextBlock Text="{Binding Quantity}" FontFamily="Trebuchet MS" FontSize="11" Margin="5,5,5,5"></TextBlock>
    </DataTemplate>
    <DataTemplate x:Key="PlainTextColumnEditingTemplate">
        <TextBox Text="{Binding Quantity}" FontFamily="Trebuchet MS" FontSize="11" Margin="5,5,5,5"></TextBox>
    </DataTemplate>
</UserControl.Resources>

And in the code behind we have:

DataGridTemplateColumn templateColumn = new DataGridTemplateColumn();
templateColumn.Header = "Quantity";
templateColumn.CellTemplate = this.Resources[ "PlainTextColumnTemplate" ];
templateColumn.CellEditingTemplate = this.Resources[ "PlainTextColumnEditingTemplate" ];
Foods.Columns.Add( templateColumn );

As you can see the Template column type can provide us with a lot of possibilities to customize our grid, because in the Template we can use every Silverlight control. For example we can define a column which cells contain a picture and a date or define a column with a date picker.

Summary

That was all about the column types. I'm sure that I left a lot of questions unanswered, but the answers are coming with the next articles. For example today we mentioned the Edit mode of the DataGrid. The next article will be focused on it and will give some explanations of how it works, which events are raised and answer the questions that are related to the EditingTemplates. So stay tuned.


Subscribe

Comments

  • -_-

    RE: The DataGrid Column types


    posted by mingliangli on Sep 17, 2008 09:13

    Is there Group Header?
    I want to have two columns share one header.

  • Enrai

    RE: The DataGrid Column types


    posted by Enrai on Sep 18, 2008 08:05

    No, there is no Group header, at least for now. You can use the Template colum to create an illusion that there are two columns under one header. ;)

  • -_-

    RE: The DataGrid Column types


    posted by Avtar on May 19, 2009 02:30
    Hi Enrai,

    can we use DataGridTemplateColumn to generate column at run time?

    for example i have following class.

    List<Employee> employees = new List<Employee>() {

    new Employee() { Name="aaa", PhoneNumbers=new List<string> { "111", "222" } },

    new Employee() { Name="bbb", PhoneNumbers=new List<string> { "333", "444" } },

    new Employee() { Name="ccc", PhoneNumbers=new List<string> { "555", "666" } },

    };

     

    I want my Name property to be first column and rest column of datagrid would be the list of phone number.

    Count of Phone number is decided at run time only, but remain static across all object.

     for example if first user have 4 phone number then remaining all will have 4 phone number.

     I am able to achieve this functionality by code behind, but is their any way to achieve the same with template.

     

     

     

Add Comment

Login to comment:
  *      *