Snowball - The Blog

The DataGrid is probably the most popular control in many business applications. Added in Silverlight 2, this control allows for easy displaying and editing of data in a tabular format. While already a very decent control, the DataGrid in Silverlight 2 and 3 still had some things that were missing or not working like you’d hope them to. In today’s post, we’ll look at the newly added changes to the control.

The first and probably biggest change is the auto-sizing option for columns. In previous versions, we could basically specify a column width or specify nothing at all, leaving it to Silverlight. What we could not do, was saying to a specific column: Take all the remaining space, similar to what we can do with the Grid control through the use of *.

Basically, there are now 5 options we have to specify how a column should behave (copied from the MSDN docs):

Let’s take a look at using these in an example. I created a random data generator (see sample code download), which generates Employee instances. These are stored in a generic list which is then set as the ItemsSource for a DataGrid. The result can be see below.

As you can see in the screenshot, the Address column is wider than the others. I actually specified it to be twice as wide as the FirstName and the LastName columns. The City column has a specific width set.

<data:DataGrid AutoGenerateColumns="False" x:Name="EmployeeDataGrid" 

    HeadersVisibility="All" Grid.Row="1">

    <data:DataGrid.Columns>

        <data:DataGridTextColumn Header="FirstName" Binding="{Binding FirstName}" Width="*"/>

        <data:DataGridTextColumn Header="LastName" Binding="{Binding LastName}" Width="*"/>

        <data:DataGridTextColumn Header="Address" Binding="{Binding Address}" Width="2*"/>

        <data:DataGridTextColumn Header="City" Binding="{Binding City}" Width="100" />

    </data:DataGrid.Columns>

</data:DataGrid>

We can also use the other options. By clicking on the Change button at the top, we switch the DataGrid to use another sizing option.

private void ChangeColumnsButton_Click(object sender, RoutedEventArgs e)

{

    EmployeeDataGrid.Columns[0].Width = new DataGridLength(1, 

        DataGridLengthUnitType.SizeToCells);

    EmployeeDataGrid.Columns[1].Width = new DataGridLength(1, 

        DataGridLengthUnitType.SizeToCells);

    EmployeeDataGrid.Columns[2].Width = new DataGridLength(1, 

        DataGridLengthUnitType.SizeToCells);

    EmployeeDataGrid.Columns[3].Width = new DataGridLength(1, 

        DataGridLengthUnitType.Star);

}

This results in the following:

The first three columns are sizing to their contents. The City column takes all the remaining space.

The second new feature concerning the DataGrid, is the ability to copy data from the DataGrid to Excel. This feature is really handy in business applications. Very often, we need to be able to export data from an application towards Excel. This can make this very easy to do.

When we start a copy by selecting one or more rows, we are shown a prompt, asking us if we want to allow access to the clipboard. If confirmed, the data is copied as textual information and can be pasted in Excel.

There’s an event fired per row that is copied to the clipboard, namely the CopyingRowClipboardContent event. In this event, we can see what data is being copied and if needed apply transformations on it.

private void EmployeeDataGrid_CopyingRowClipboardContent(object sender, 

    DataGridRowClipboardEventArgs e)

{

    // do something

}