Taking Control Of Columns In RadDataGrid

As part of our Q1 2013 release of RadControls for Windows 8, we released a new flagship control: the RadDataGrid.  This is the first in a series of blog posts on getting the most out of this very powerful control, and applying it to real-world situations.

At its simplest, the RadDataGrid is incredibly easy to use; just drag it onto the XAML surface, give it a name, and hook up a collection to its ItemsSource property.  Let’s start with a simple demo app that does just that. 

Create a new blank application and name it RadDataGridControl. Open MainPage.xaml and make sure the Toolbox is visible.  Drag a RadDataGrid onto the XAML between the opening and closing grid. Notice that the namespace you need is automatically added for you at the top of the file,

xmlns:Grid="using:Telerik.UI.Xaml.Controls.Grid"
 

Name your DataGrid PersonGrid so that your code looks like this,

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
  <Grid:RadDataGrid Name="PersonGrid"/>
</Grid>
 

Now let’s create some data for the RadDataGrid.  Create a new class Person and give it four properties like this,

public string FirstName { get; set; }
public string LastName { get; set; }
public string City { get; set; }
public string Title { get; set; }
 

We’ll also give it a static method to create instance of people. For that, we’ll first create four private arrays of random first names, last names, cities and titles (with an intentional emphasis on the title developer),

private static readonly string[] firstNames = 
  { "Adam", "Bob", "Carl", "David", "Edgar", "Frank", 
    "George", "Harry", "Isaac", "Jesse", "Ken", "Larry" };
private static readonly string[] lastNames = 
  { "Aaronson", "Bobson", "Carlson", "Davidson", "Enstwhile", 
    "Ferguson", "Harrison", "Isaacson", "Jackson", 
    "Kennelworth", "Levine" };
private static readonly string[] cities = 
   { "Boston", "New York", "LA", "San Francisco", "Phoenix", 
     "San Jose", "Cincinnati", "Bellevue" };
private static readonly string[] titles = 
   { "Developer", "Developer", "QA", "CTO", "CEO", 
     "President", "Program Manager", "Project Manager", 
      "Developer", "Software Engineer" };

Our static method creates a person by randomly combining these values,

 

All we need to do now is to create a collection of person objects and assign that to the ItemsSource property of the RadDataGrid; which we do in MainPage.xaml.cs,

protected override void OnNavigatedTo(NavigationEventArgs e)
{
   PersonGrid.ItemsSource = Person.CreatePeople( 15 );
}
 

The result is a perfectly fine grid, except that there are a few aesthetic difficulties:

• Each column is 1/4 the total width of the screen
• Each column is named for the property it holds (e.g., LastName) which is not very professional looking.

As you might imagine, we can easily take control of the columns, and set their headers and, for that matter, set the color of the column and other properties.

The first step is to turn of AutoGenerateColumns, which is on by default. To do so, return to the declaration of the RadDataGrid and add the one necessary property,

<Grid:RadDataGrid Name="PersonGrid"
                  AutoGenerateColumns="False" />
 

It is now  your responsibility to create the columns. This allows you to pick which columns you want, and how big they are.  Let’s create a column with an appropriate header for each row,

<Grid:RadDataGrid Name="PersonGrid"
                  AutoGenerateColumns="False">
   <Grid:RadDataGrid.Columns>
      <Grid:DataGridTextColumn PropertyName="FirstName"
                               Header="First"
                               SizeMode="Auto" />
      <Grid:DataGridTextColumn PropertyName="LastName"
                               Header="Last"
                               SizeMode="Auto" />
      <Grid:DataGridTextColumn PropertyName="City"
                               Header="City"
                               SizeMode="Auto" />
      <Grid:DataGridTextColumn PropertyName="Title"
                               Header="Title"
                               SizeMode="Auto" />
   </Grid:RadDataGrid.Columns>
</Grid:RadDataGrid>
 

This produces a much nicer looking grid; with each column header set appropriately, and the columns only as wide as they need to be.  We can go a step further; let’s say we want the Last Name column to stand out, and we’d like it to be yellow.  All we need to do is add an inline style to that column, as follows,

<Grid:DataGridTextColumn PropertyName="LastName"
                         Header="Last"
                         SizeMode="Auto">
   <Grid:DataGridTextColumn.CellContentStyle>
      <Style TargetType="TextBlock">
         <Setter Property="Foreground"
                 Value="Yellow" />
         <Setter Property="HorizontalAlignment"
                 Value="Center" />
         <Setter Property="VerticalAlignment"
                 Value="Center" />
      </Style>
   </Grid:DataGridTextColumn.CellContentStyle>
 
</Grid:DataGridTextColumn>
 

Notice that the Style itself is very standard; you assign the TargetType and then you use Setters, assigning Properties and corresponding values.  The result is that the last name column is yellow, as we intended (see first figure, above) 

You can go further with this, and set a columns color conditionally; such as setting the title to red if it is a Developer and to white if it is anything else. We’ll look at that in my next posting.