Edit this page

RadGridView

This tutorial will introduce the RadGridView control, part of the Telerik suite of XAML controls. You can jump ahead to these topics:

Setting up the Project

To begin, open Visual Studio and click on the Telerik menu option. Under UI For Silverlight click on Create New Telerik Project. Name your project, accept Silverlight 5 and in the Project Configuration Wizard dialog check GridView (notice that the dependent references are automatically checked as well), as shown in Figure 1.

Figure 1: In the Project Configuration Wizard, you can check GridView and the wizard is smart enough to also check dependent references.
xamlflix gridview 1

When you click Finish, the necessary assemblies are added to the project's References as shown in Figure 2

Figure 2: The Project Configuration Wizard added the References for the GridView.
xamlflix gridview 2

Your application will open to MainPage.xaml and, thanks to the Telerik Visual Studio extensions, the namespace telerik will already have been created in the XAML heading as shown in Example 1.

Example 1: After finishing the Project Configuration Wizard, the telerik namespace is added in the heading.


Drag RadGridView from the toolbox onto the design surface. If you look at the XAML for the GridView, you’ll see that Visual Studio set the alignments and margin to mark the placement of the Gridview where you happened to drop it.

<telerik:RadGridView HorizontalAlignment="Left" Margin="77,46,0,0" Name="radGridView1" VerticalAlignment="Top" />

You can clean that up by right-clicking on the GridView and choosing Reset Layout -> All, as shown in Figure 3,

Figure 3: You can clear the default alignment by resetting the layout of the GridView.
xamlflix gridview 3

Jump over to the code behind, and in the MainPage.xaml.cs file, below the closing brace for the class, let’s create a demonstration data class called DemoClass (Example 2)

Example 2: A simple class with a few values of different data types.

public class DemoClass
{
    public int ID { get; set; }
    public string Name { get; set; }
    public string Company { get; set; }
    public bool IsComplete { get; set; }
    public DateTime DueDate { get; set; }
}   

In the constructor, initialize a collection of these class instances.

var myDemoClasses = new ObservableCollection<DemoClass>();

You can now create a for-loop (Example 3) to populate 2000 instances and add them to the collection.

Example 3: populate your collection with some data.

for ( int x = 1; x <= 2000; x++)
{
    var dc = new DemoClass();
    dc.ID = x;
    dc.Name = "Person " + x.ToString();
    dc.Company = x % 2 == 0 ? 
        "Super Company " + x.ToString() : "Sub-par company " + x.ToString();
    dc.IsComplete = x % 4 == 0 ? true : false;
    dc.DueDate = DateTime.Today.AddDays(x);
    myDemoClasses.Add(dc);
}

Finally, we set the collection as the ItemsSource property for our GridView,

radGridView1.ItemsSource = myDemoClasses;

Run the application and you’ll see the 2000 records are displayed in the GridView. Note that the columns are not taking up the full width of the browser. If you prefer, you can set the columns to take the available space by setting the column width of the GridView in the XAML file to *.

<telerik:RadGridView Name="radGridView1" ColumnWidth="*" />

The columns now expand to fill the available width, as shown in Figure 4.

Figure 4: Setting the ColumnWidth to “*” causes the GridView to fill the available width.
xamlflix gridview 4

Built-in Functionality

A great deal of functionality is built into the RadGridView control. For example, sorting, grouping and reordering columns.

First, let's explore sorting. Just click on a column header to sort that column. Click the column header again to reverse sort that column. Try this with IsComplete or DueDate. You can sort on multiple columns by clicking on one column header, then holding Shift and clicking on a second column header. Advanced filtering is built in as well. To see this, click on the filter icon on any column. You’ll see the advanced filter dialog, as shown in Figure 5.

Figure 5: You can configure advanced filtering with a few clicks.
xamlflix gridview 5

RadGridView has a built-in support for grouping with simple dragging and dropping a column header into the top row. As an example, you can drag and drop the IsComplete column header into the grouping area and you'll see the results immediately sorted into the two groups, as shown in Figure 6.

Figure 6: Dragging the IsComplete column header into the Grouped by area immediately sorts the results into two groups.
xamlflix gridview 6

You can group by multiple columns by dragging additional columns into the grouping area. For example, click the DueDate column header and drag it into the Grouped by area after IsComplete. If you want to remove grouping, hover over the column heading in the Grouped by area and click the X to remove it, as shown in Figure 7.

Figure 7: Click the X on the column headings that you no longer want to use for grouping.
xamlflix gridview 7

RadGridView also allow you to reorder your columns using drag and drop, as shown in Figure 8, which shows dragging the ID column to a new position.

Figure 8: Clicking the ID column and moving it after the Name column will cause RadGridView to group by the IsComplete and DueDate columns and within that, sort by Name.
xamlflix gridview 8

For additional information you can check:

Exporting to Additional Formats

You can export your data from RadGridView into different formats:

  • Text

  • CSV

  • HTML

  • Excel XML

For this section on exporting, start a new project.

Drag a RadGridView onto the design surface, but this time let’s go to the XAML and add the attribute, AutoGenerateColumns, and set it to False.

<telerik:RadGridView Name="radGridView1" ColumnWidth="*" AutoGenerateColumns="False"/>

This tells RadGridView not to generate its columns based on the properties in the data class; rather, you’ll create the columns yourself using the XAML in Example 4.

Example 4: Manually defining columns for the fields in a RadGridView control and add the defined columns to the Columns collection.

<telerik:RadGridView Name="radGridView1" ColumnWidth="*" AutoGenerateColumns="False">
     <telerik:RadGridView.Columns>
         <telerik:GridViewDataColumn DataMemberBinding="{Binding LastName}" 
                   Header="Last Name" />
         <telerik:GridViewDataColumn DataMemberBinding="{Binding FirstName}"
                   Header="First Name" />
         <telerik:GridViewDataColumn DataMemberBinding="{Binding Age}" 
                   Header="Age" />
         <telerik:GridViewDataColumn DataMemberBinding="{Binding Married}" 
                   Header="Is Married?" />
     </telerik:RadGridView.Columns>
 </telerik:RadGridView>

Add a new class called Employee to your project in the file Employee.cs as shown in Example 5.

Example 5: The Employee class will use the same names as the column names you created in Example 4.

public class Employee
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public int Age { get; set; }
    public bool Married { get; set; }
}   

In MainPage.xaml.cs, in the Loaded event handler, you’ll set the ItemsSource property for the grid to the result of calling GetEmployees as shown in Example 6.

Example 6: Subscribing to the Loaded event of the MainPage and populate the GridView.

public MainPage()
{
    InitializeComponent();
    Loaded += new RoutedEventHandler(MainPage_Loaded);
}

void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    this.radGridView1.ItemsSource = EmployeeService.GetEmployees();
}

Run the application to ensure that the GridView properly displays the 15 records. Shut down the application and return to MainPage.xaml. In the design surface, drag the bottom of the grid up a bit to make room to add a button.

Set the content of the button to Export. Add a Click event for the button and return to the code behind to write the event handler (Example 7).

You will need to resolve a number of namespaces, or let JustCode do it for you.

Example 7: How to export data from RadGridView.

private void button1_Click(object sender, RoutedEventArgs e)
{
    string extension = "xls";
    SaveFileDialog dialog = new SaveFileDialog()
    {
        DefaultExt = extension,
        Filter = String.Format("{1} files (.{0})|.{0}|All files(.)|.", extension, "Excel"),
        FilterIndex = 1
    };

    if ( dialog.ShowDialog() == true)
    {
        using (Stream stream = dialog.OpenFile())
        {
            radGridView1.Export(stream,
                new GridViewExportOptions()
                {
                    Format = ExportFormat.ExcelML,
                    ShowColumnHeaders = true,
                    ShowColumnFooters = true,
                    ShowGroupFooters = false,

                });
        }
    }
}

The essence of this event handler is to create a standard SaveFileDialog (with the default extension of Excel), and then if True is returned from the dialog (the user clicks OK) to open a stream and to export to the Format specified. The key is the Format, which is set to one of the four enumerated ExportFormat values. Example 7 shows .xls while later in this section of the article (Example 8, and Figures 10 - 12), you'll see .html, .txt, and .csv.

Run the program and save the file to Employees.xls. Open the file in Excel and you’ll see that the columns and data appear as expected, as seen in Figure 9.

Figure 9: If the event handler code worked, the Employees.xls file should open.
xamlflix gridview 9

In Example 8, you'll modify the code from Example 7 to change the extension from “xls” to “htm” and change the name of the extension to HTML. Change the format to HTML as shown here.

Example 8: This event handler saves the Employees class as HTML.

string extension = "htm";
SaveFileDialog dialog = new SaveFileDialog()
{
    DefaultExt = extension,
    Filter = String.Format("{1} files (.{0})|.{0}|All files(.)|.", 
          extension, "HTML"),
    FilterIndex = 1
};

if ( dialog.ShowDialog() == true)
{
    using (Stream stream = dialog.OpenFile())
    {
        radGridView1.Export(stream,
            new GridViewExportOptions()
            {
                Format = ExportFormat.Html,
                ShowColumnHeaders = true,
                ShowColumnFooters = true,
                ShowGroupFooters = false,

            });

When you run the program and save the files to Employees.htm, the result is an HTML table that you can display in a browser as shown in Figure 10.

Figure 10: When you run Example 8, the data is in an HTML table that you can view in a browser.
xamlflix gridview 10

Similarly, change the event handler code in Example 8 to Text and you save a text file as seen in Figure 11 and if you change the event handler code in Example 8 to CSV you get a comma separated values file as shown in Figure 12.

Figure 11: The event handler code in Example 8 changed to Text.
xamlflix gridview 11

Figure 12: The event handler code in Example 8 changed to CSV.
xamlflix gridview 12

For additional information you can check RadGridView Export section.

Data Paging

There are certainly times when you do not want to send all of the possible records matching your search criteria to the client machine. While RadGridView is extremely fast and responsive, it can take a bit of time to transmit a lot of data, e.g., 100,000 records. If you have a large result set, you want to be able to let your user “page” through the data and perhaps see just 10 records at a time.

To support scenarios as this, you’ll use a second control, the RadDataPager. Open your XAML file to the last line of the RadGridView and add a RadDataPager as shown in Example 9.

Example 9: Add a RadDataPager to the XAML from Example 4.

<telerik:RadDataPager Name="xRadDataPager" Source="{Binding Items, ElementName=radGridView1}" PageSize="5" />

The source in this case is using element binding – that binds the RadDataPager to another element on the page, in this case the GridView. We are specifically binding to the Items in radGridView1. The PageSize attribute determines how many items will be in a given page. Example 9 sets this value to 5, and since this example has a total of 15 records, you’ll see three pages of data, as shown in Figure 13.

Figure 13: Adding a RadDataPager lets you restrict the number of items to view at one time and adds controls for navigating through the pages of results.
xamlflix gridview 13

Notice that the RadDataPager attaches itself to the bottom of the GridView. The default RadDataPager has four buttons on the left and a “jump” box on the right (which displays the page you are on and lets you type in the page number you want to jump to).

The four buttons are, left to right:

  • Go to first page

  • Go to previous page

  • Go to next page

  • Go to last page

RadDataPager will automatically enable and disable the various buttons (e.g, disable next page on the last page).

This, of course is the default display, but RadDataPager supports many alternatives. You can see this by entering DisplayMode in the XAML and IntelliSense will bring up a long list of options, as shown in Figure 14.

Figure 14: You can set different display modes for RadDataPager.
xamlflix gridview 14

Let’s scroll down and choose PreviousNextNumeric, as shown in Example 10.

Example 10: You set the DisplayMode of RadDataPager to PreviousNextNumeric.

<telerik:RadDataPager DisplayMode="PreviousNextNumeric" Name="xRadDataPager" Source="{Binding Items, ElementName=radGridView1}" PageSize="5" />

When you run the application, you’ll see that the visible buttons are previous, next and a numeric button for each page, as shown in Figure 15.

Figure 15: When you run the XAML from Example 10, the display mode of RadDataPager changes to five buttons.
xamlflix gridview 15

You can also manipulate the RadDataPager programmatically, as shown by IntelliSense in Figure 16.

Figure 16: Methods for manupulating RadDataPager programmatically shown by IntelliSence.
xamlflix gridview 16

For additional information you can check RadGridView Paging section.

Aggregate Functions

RadGridView provides seven modes of aggregate functions to provide aggregated data at the bottom of columns in the grid.

  • Average

  • Count

  • First / Last

  • Minimum / Maximum

  • Sum

Let’s return to our application (Example 4) but comment out the RadDataPager control (Examples 9 - 10). In the XAML, we’ll go up to the LastName GridViewDataColumn and open it up, adding in AggregateFunctions (Example 11).

Example 11: Defines AggregateFunctions for the GridViewDataColumn.

<telerik:GridViewDataColumn DataMemberBinding="{Binding LastName}" Header="Last Name" >
    <telerik:GridViewDataColumn.AggregateFunctions>

    </telerik:GridViewDataColumn.AggregateFunctions>
</telerik:GridViewDataColumn>

Inside the AggregateFunctions IntelliSense will show all the possible aggregations, as shown in Figure 17.

Figure 17: The seven AggregateFunctions supported by a GridViewDataColumn.
xamlflix gridview 17

This article will use the CountFunction (Example 12) and it wiill add an attribute for the caption to be associated with the count.

Example 12: Adding a Caption attribute to the CountFunction.

<telerik:GridViewDataColumn DataMemberBinding="{Binding LastName}" Header="Last Name" >
    <telerik:GridViewDataColumn.AggregateFunctions>
        <telerik:CountFunction Caption="Total # of records: " />         
    </telerik:GridViewDataColumn.AggregateFunctions>
</telerik:GridViewDataColumn>   

Before we go any further, we need to go up to the GridView itself and turn on ShowColumnFooters (Example 13).

Example 13: Setting ShowColumnFooters to true so the CountFunction will be visible.

<telerik:RadGridView Name="radGridView1" ColumnWidth="*" AutoGenerateColumns="False" Margin="0,0,0,72" ShowColumnFooters="True"> 

When you run the application, the total number of records is shown in the footer for the LastName column, as shown in Figure 18.

Figure 18: You can see the CountFunction in the footer that you just made visible.
xamlflix gridview 18

The most common column footer manipulates numeric data. Let’s find the average age of our 15 records. Example 14 shows how to add the AverageFunction and add a Caption attribute to the Age column.

Example 14: Using the AverageFunction to get an average of the records in the Age column.

<telerik:GridViewDataColumn DataMemberBinding="{Binding Age}" Header="Age">
    <telerik:GridViewDataColumn.AggregateFunctions>
        <telerik:AverageFunction Caption="Average age: " />
    </telerik:GridViewDataColumn.AggregateFunctions>
</telerik:GridViewDataColumn>

When you run the application, you should see, at the bottom of the age column, Average age: 30.4.

For additional information you can check RadGridView Aggregate Functions article.

Localization

Localization is the process of adapting a product to a particular language or culture. RadGridView has support for localization baked in.

Running the application (from Example 14) shows that there are various areas that are in English, as shown in Figure 19; now lets make changes to localize the application so that these are in Spanish.

Figure 19
xamlflix gridview 19

The first step (after stopping the application) is to unload the main project by right-clicking on it and choosing Unload Project.

Once unloaded, right-click on the project and choose Edit, as shown in Figure 20.

Figure 20: Edit the RadGridViewExport project.
xamlflix gridview 20

Find the element for SupportedCultures, and add es for Español (Spanish).

Save and close the file and then right-click on the project and click Reload Project from the shortcut menu.

Open App.xaml.cs and find Application_Startup.

private void Application_Startup(object sender, StartupEventArgs e)
{
    this.RootVisual = new MainPage();
}   

Before the first line of this method, you need to set the culture you’ll be using (Example 15).

Example 15: In the Application_Startup method, set the Culture.

Thread.CurrentThread.CurrentCulture = new CultureInfo("es");
Thread.CurrentThread.CurrentUICulture = new CultureInfo("es");  

Run the application and Hey! Presto! All the strings that are not hard-coded into your application are now in Spanish, as shown in Figure 21.

Figure 21: The various areas highlighted are now in Spanish.
xamlflix gridview 21

If you want the headings and footers to be in Spanish as well, you’ll need to create resources for those strings.

For additional information you can check RadGridView Localization section.

Validation

Validation is intended to support user input – validating the user’s data locally on the client. Example 16 will demostrate how to use validation in a RadGridView to validate the age using the CellValidating event, which is always raised before the CellValidated event.

CellValidating lets you stop the commit process on a cell if the data is invalid.

Open MainPage.xaml and find the declaration of the GridView. Add an event for CellValidating.

Example 16: Add a CellValidating event to the GridView (all of the next few code snippets).

<telerik:RadGridView Name="radGridView1" CellValidating="radGridView1_CellValidating" ColumnWidth="*" AutoGenerateColumns="False" Margin="0,0,0,72" ShowColumnFooters="True">

Switch to the code behind and find the stub for the event handler.

private void radGridView1_CellValidating(
    object sender, GridViewCellValidatingEventArgs e)
 {
 }

We only want (for now) to validate the Age column, so begin with an if statement.

if ( e.Cell.Column.UniqueName == "Age" )

Inside the if statement we’ll place the logic for our validation. Example 17 shows the complete event handler.

Example 17: The event handler logic for the Age validation for the GridView.

private void radGridView1_CellValidating(
     object sender, GridViewCellValidatingEventArgs e)
 {
     if ( e.Cell.Column.UniqueName == "Age" )
     {
         var newValue = Int32.Parse(e.NewValue.ToString());
         if (newValue < 0 || newValue > 130)
         {
             e.IsValid = false;
             e.ErrorMessage = "The entered value for age must be between 0 and 130.";
         }
     }
 }

Run the application and change one of the ages to 500. Notice that the cell turns red and if you place the mouse on the red triangle, the error message appears next to the cell, as shown in Figure 22.

Figure 22: Thomas cannot be 500 years old. Cell validation will prevent the user from saving this value.
xamlflix gridview 22

In addition to cell validating there is also a row validating event that occurs before the row is committed. You can see this by adding the RowValidating event (Example 17) and a handler (Example 18) to the GridView.

Example 17: Adding a RowValidating event to the GridView.

<telerik:RadGridView 
    Name="radGridView1" 
    CellValidating="radGridView1_CellValidating"
    RowValidating="radGridView1_RowValidating"
    ColumnWidth="*" 
    AutoGenerateColumns="False" 
    Margin="0,0,0,72" 
    ShowColumnFooters="True">

In the event handler (Example 18), we’ll stub out a message box to indicate that the RowValidating event fired.

Example 18: Stub out a message box in the event handler so you’ll know when the event occurs.

private void radGridView1_RowValidating(
    object sender, GridViewRowValidatingEventArgs e)
{
    MessageBox.Show("Row Validating");
}   

To see this at work, change a cell in the row, and then notice the Row-Commit indicator in the left margin. Click on that, as shown in Figure 23, to see the message box.

Figure 23: The message box fires when a cell in a row is changed.
xamlflix gridview 23

For additional information you can check:

Copy and Paste to Excel

The ability to copy and paste values and rows to and from RadGridView greatly enhances the interoperability of your application with Microsoft Excel.

This example uses the MainPage.xaml from Example 17 and adds four attributes.

Example 19: Adding four attributes to add copy and paste and selection functionality to the GridView.

<telerik:RadGridView 
    Name="radGridView1" 
    CellValidating="radGridView1_CellValidating"
    RowValidating="radGridView1_RowValidating"
    ColumnWidth="*" 
    AutoGenerateColumns="False" 
    Margin="0,0,0,72" 
    ShowColumnFooters="True"
    ClipboardCopyMode="All"
    ClipboardPasteMode="Default"
    SelectionMode="Extended"
    SelectionUnit="Cell">

The four attributes determine how much will be copied to the clipboard and how entries on the clipboard will be pasted back into the grid. You can get a good idea of what the copy options are through IntelliSense as shown in Figure 24, and of the paste options as well, as shown in Figure 25.

Figure 24: The available copy attributes for a GridView.
xamlflix gridview 24

Figure 25: The available paste attributes for a GridView.
xamlflix gridview 25

You can now make selections in the GridView and copy them to the clipboard and paste them to Excel. You can do this by row or by cell, or by using Ctrl-click you can copy noncontiguous cells.

Figure 26 shows a user has used Ctrl-click to select a number of cells, and then hit Ctrl-C to copy and then Ctrl-P to paste them into Excel. The pasted cells are placed in Excel in the appropriate rows and columns, and because the example selected All from the ClipboardCopyMode property (Figure 24); the headers and footers are copied and pasted as well.

Figure 26: The cells are copied from GridView and pasted into Excel, including the header and footer.
xamlflix gridview 26

You can edit cells in Excel and when you copy and then paste them back, the modified values will be shown in the RadGridView.

For additional information you can check RadGridView Clipboard section.

Was this article helpful? Yes No

Give article feedback

Tell us how we can improve this article

Dummy