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,
public
static
IEnumerable<Person> CreatePeople(
int
count )
{
var people =
new
List<Person>();
var r =
new
Random();
for
(
int
i = 0; i < count; i++ )
{
var p =
new
Person()
{
FirstName = firstNames[r.Next( firstNames.Length )],
LastName = lastNames[r.Next( lastNames.Length )],
City = cities[r.Next( cities.Length )],
Title = titles[r.Next( titles.Length )]
};
people.Add( p );
}
return
people;
}
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:
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,
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)<
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
>
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.
Jesse Liberty has three decades of experience writing and delivering software projects. He is the author of 2 dozen books and has been a Distinguished Software Engineer for AT&T and a VP for Information Services for Citibank and a Software Architect for PBS. You can read more on his personal blog or follow him on twitter