You’ve downloaded Telerik RadControls for Windows 8 XAML, but what to do next?  After reading this blog post you’ll be able to build an app that contains a grid which is able to perform all the basic data operations such as grouping, sorting and filtering.

To begin, open Visual Studio (this blog post will use VS 2012) and note that one of the menu choices is Telerik.  Click on Telerik, then on RadControls for Windows 8 XAML and then finally on Create New Telerik Project as shown in the illustration (highlighting added)

TelerikProject

The New project wizard will open and notice on the left that Telerik is highlighted, and on the right C# RadControls Windows 8 XAML Application is chosen. That is what we want, so give it a name and a location and click OK. (I named mine StarterGrid ).

The Project Configuration Wizard will appear.  You can add the Extension SDK or the Binaries.  Adding the Binaries will not provide you with the source but will make your solution a bit smaller.  Click Next.

The second page of the Project Configuration Wizard appears and asks you which components you want to add.  We’re going to be adding a RadDataGrid, so let’s open the Win 8 chm (help) file and see what it says about what components are needed.  GettingStartedRadDataGrid

Under RadDataGrid, Getting Started I find that I need Telerik.Core.dll, Telerik.UI.XAML.Primitives.dll and Telerik.UI.XAML.Grid.dll.  Check these in the dialog and click Finish.

You should now be in the Solution in Visual Studio.  Open MainPage.xaml and add two namespaces to the top of the page

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

The Buttons

We’re going to add buttons to a top row and the RadDataGrid to the rest of the page. To make this simple, we’ll start with the buttons in a StackPanel.  An inner-StackPanel will lay out the two buttons side by side,

<Grid Background=
"{StaticResource ApplicationPageBackgroundThemeBrush}"
Width="400"
<StackPanel>
<StackPanel Orientation="Horizontal">
<Button Name="ApplyFilter"
Content="Just Jetsons"
Click="ApplyFilter_Click"
Margin="5"/>
<Button Name="RemoveFilter"
Content="All"
Click="RemoveFilter_Click"
Margin="5" />
</StackPanel>

Creating the DataGrid

Notice that the buttons have event handlers, we’ll return to that shortly, when we discuss programmatic filtering of the contents of the DataGrid.  For now, let’s add our RadDataGrid to the Grid, just below the StackPanel,

<Grid:RadDataGrid 
Name="TheJetsons"
SelectionUnit="Row"
SelectionMode="Single"
AutoGenerateColumns="False">

 

There are a number of things to notice here.  First, the SelectionUnit is Row; the alternative is Cell.  Second, I’ve set the SelectionMode to Single so that only one row can be selected at a time.  Finally, and perhaps most important, I’ve set AutoGenerateColumns to false.  If this were set to true the Grid would create one column for each property in the data source, using the property names as headings.

Before we go any further let’s look at the data,

Underlying Data

The DataGrid would normally get its data from a database or a web server, but for purposes of this blog post, we’ll hard code the data. We start by declaring the Person class,

public class Person
{
public string FirstName { get; set; }
public string LastName { get; set; }
public int Age { get; set; }

 

We then add a static method to generate some sample data,

 public static ObservableCollection<Person> GetPeople()
{
var people = new ObservableCollection<Person>();
people.Add( new Person() { FirstName = "George",
LastName = "Jetson", Age = 40 } );
people.Add( new Person() { FirstName = "Jane",
LastName = "Jetson", Age = 33 } );
people.Add( new Person() { FirstName = "Judy",
LastName = "Jetson", Age = 15 } );
people.Add( new Person() { FirstName = "Elroy",
LastName = "Jetson", Age = 6 } );
people.Add( new Person() { FirstName = "Mr.",
LastName = "Spacely", Age = 65 } );
people.Add( new Person() { FirstName = "Mr.",
LastName = "Cogswell", Age = 70 } );
return people;
}

 

This ObservableCollection will serve as the ItemsSource to our DataGrid as we’ll see when we look at the Code behind.

The Columns

Returning to the DataGrid, we add the columns, setting the PropertyName (corresponding to the property of the Person object) and the Header (which will appear in the DataGrid),

<Grid:RadDataGrid.Columns>
<Grid:DataGridTextColumn PropertyName="FirstName"
Header="First Name" />
<Grid:DataGridTextColumn PropertyName="LastName"
Header="Last Name" />
<Grid:DataGridNumericalColumn PropertyName="Age"
Header="Age" />
</Grid:RadDataGrid.Columns>

 

Grouping

Next, we set the GroupDescriptors to group the entries by LastName.  The user can group (and ungroup and regroup) interactively, but this demonstrates how to do so declaratively,

<Grid:RadDataGrid.GroupDescriptors>
<Grid:PropertyGroupDescriptor PropertyName="LastName" />
</Grid:RadDataGrid.GroupDescriptors>

Sorting

Similarly, we set the SortDescriptors to declare sorting declaratively, even though the user can re-sort interactively,

<Grid:RadDataGrid.SortDescriptors>
<Grid:PropertySortDescriptor PropertyName="Age" />
</Grid:RadDataGrid.SortDescriptors>

 

With the closing tags, that concludes the DataGrid.  Let’s turn to the code-behind.

Code Behind

Everything we are doing in the CodeBehind we could have done in a ViewModel, or we could have done declaratively in the XAML. It is simpler to put it in the code-behind for such a simple sample, and it is interesting to see how these settings can be applied programmatically.

First, we set the ItemsSource in the OnNavigatedTo method so that it will bind when the page is loaded,

protected override void OnNavigatedTo(NavigationEventArgs e)
{
TheJetsons.ItemsSource = Person.GetPeople();
}

Filtering

Next, we create the event handlers for the two buttons.  When the user clicks the button labeled “Just Jetsons” we want to filter out all the names that don’t begin with “Jet.”  To do so,  we add a TextFilterDescriptor, tell it which property to look at and how to evaluate that property,

private void ApplyFilter_Click( 
object sender, RoutedEventArgs e )
{
var filter = new TextFilterDescriptor();
filter.PropertyName = "LastName";
filter.Operator = TextOperator.StartsWith;
filter.Value = "Jet";
filter.IsCaseSensitive = false;
TheJetsons.FilterDescriptors.Add( filter );
}

 

The remove filter button handler is much simpler, it just clears the FilterDescriptors in the DataGrid,

private void RemoveFilter_Click( 
object sender, RoutedEventArgs e )
{
TheJetsons.FilterDescriptors.Clear();
}

 

The net effect of all this is that when the grid comes up it is grouped by name and sorted by age, and when the user pushes the first button, only the Jetsons are shown. 

DataGridJetsons

 

If you haven’t tried RadControls for Windows 8 yet, you can download the 30 day trial, giving you access to all product functionality, as well as dedicated support. RadControls also features flexible licensing, allowing developers with different budgets to benefit from the productivity gains the suites have to offer.

 

Win8_Download (2)

About the author

Jesse Liberty

Jesse Liberty

Jesse Liberty is a Technical Evangelist for Telerik and has three decades of experience writing and delivering software projects. He is the author of 2 dozen books as well as courses on Pluralsight on Windows 8 and WPF. Jesse 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 and his Telerik blog or follow him on twitter


jesseLiberty
About the Author

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

Comments

Comments are disabled in preview mode.