| RELATED VIDEOS |
| In this video, see how easy it is to get started using Telerik RadGridView for Silverlight and how you can start using it in Visual Studio 2010.(Runtime: 04:24)
|
| In this recorded webinar, you will learn basic tips and tricks for optimizing RadGridView for Silverlight. Learn how to efficiently configure RadGridView and move data between the client and server.(Runtime: 1:19:35)
|
This tutorial will walk you through the creation of a sample application that contains RadGridView and will show you how to:
The final result should look like this:
 Note |
|---|
In order to use the RadGridView control in your projects you have to add references to the following assemblies:
- Telerik.Windows.Controls
- Telerik.Windows.Controls.GridView
- Telerik.Windows.Controls.Input
- Telerik.Windows.Data
|
For the purpose of this example, you will need to create an empty Silverlight Application project and open it in Visual Studio.
Adding RadGridView to the Project
- Create a new Silverlight project.
- Now add a RadGridView control to the user control. You can add the grid control by dragging it from the Toolbox and dropping it over the XAML or do it manually by writing the XAML code that is shown below.
CopyXAML
<UserControl x:Class="RadGridView_SL4_AR_26.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
mc:Ignorable="d" d:DesignHeight="700" d:DesignWidth="700">
<Grid x:Name="LayoutRoot" Background="White">
<telerik:RadGridView x:Name="radGridView" />
</Grid>
</UserControl>
Two lines of code are important here:
- First is the import of the Telerik schema.
CopyXAML
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
- And second is the declaration of the RadGridView control inside the Grid.
CopyXAML
<telerik:RadGridView x:Name="radGridView" />
- Now if you run the application you will see an empty grid with no columns and rows.
Binding RadGridView
- In order to populate your grid view control with some sample data, you should create a new class named "Employee" and add several properties to it.
CopyC#
public class Employee
{
public string FirstName
{
get;
set;
}
public string LastName
{
get;
set;
}
public int Age
{
get;
set;
}
public bool Married
{
get;
set;
}
}CopyVB.NET
Public Class Employee
Private _FirstName As String
Public Property FirstName() As String
Get
Return _FirstName
End Get
Set(ByVal value As String)
_FirstName = value
End Set
End Property
Private _LastName As String
Public Property LastName() As String
Get
Return _LastName
End Get
Set(ByVal value As String)
_LastName = value
End Set
End Property
Private _Age As Integer
Public Property Age() As Integer
Get
Return _Age
End Get
Set(ByVal value As Integer)
_Age = value
End Set
End Property
Private _Married As Boolean
Public Property Married() As Boolean
Get
Return _Married
End Get
Set(ByVal value As Boolean)
_Married = value
End Set
End Property
End Class| Note |
|---|
Note that if you want to support two way binding your Employee class should implement the INotifyPropertyChanged interface and rise the PropertyChanged event every time a property value changes. |
- Create "EmployeeService" class and implement a static method GetEmployees. For the purpose of this tutorial it will return an observable collection containing several hard-coded employees.
CopyC#
public class EmployeeService
{
public static ObservableCollection<Employee> GetEmployees()
{
ObservableCollection<Employee> employees = new ObservableCollection<Employee>();
Employee employee = new Employee();
employee.FirstName = "Maria";
employee.LastName = "Anders";
employee.Married = true;
employee.Age = 24;
employees.Add( employee );
employee = new Employee();
employee.FirstName = "Ana";
employee.LastName = "Trujillo";
employee.Married = true;
employee.Age = 44;
employees.Add( employee );
employee = new Employee();
employee.FirstName = "Antonio";
employee.LastName = "Moreno";
employee.Married = true;
employee.Age = 33;
employees.Add( employee );
employee = new Employee();
employee.FirstName = "Thomas";
employee.LastName = "Hardy";
employee.Married = false;
employee.Age = 13;
employees.Add( employee );
employee = new Employee();
employee.FirstName = "Hanna";
employee.LastName = "Moos";
employee.Married = false;
employee.Age = 28;
employees.Add( employee );
employee = new Employee();
employee.FirstName = "Frederique";
employee.LastName = "Citeaux";
employee.Married = true;
employee.Age = 67;
employees.Add( employee );
employee = new Employee();
employee.FirstName = "Martin";
employee.LastName = "Sommer";
employee.Married = false;
employee.Age = 22;
employees.Add( employee );
employee = new Employee();
employee.FirstName = "Laurence";
employee.LastName = "Lebihan";
employee.Married = false;
employee.Age = 32;
employees.Add( employee );
employee = new Employee();
employee.FirstName = "Elizabeth";
employee.LastName = "Lincoln";
employee.Married = false;
employee.Age = 9;
employees.Add( employee );
employee = new Employee();
employee.FirstName = "Victoria";
employee.LastName = "Ashworth";
employee.Married = true;
employee.Age = 29;
employees.Add( employee );
return employees;
}
}CopyVB.NET
Public Class EmployeeService
Public Shared Function GetEmployees() As ObservableCollection(Of Employee)
Dim employees As New ObservableCollection(Of Employee)()
Dim employee As New Employee()
employee.FirstName = "Maria"
employee.LastName = "Anders"
employee.Married = True
employee.Age = 24
employees.Add(employee)
employee = New Employee()
employee.FirstName = "Ana"
employee.LastName = "Trujillo"
employee.Married = True
employee.Age = 44
employees.Add(employee)
employee = New Employee()
employee.FirstName = "Antonio"
employee.LastName = "Moreno"
employee.Married = True
employee.Age = 33
employees.Add(employee)
employee = New Employee()
employee.FirstName = "Thomas"
employee.LastName = "Hardy"
employee.Married = False
employee.Age = 13
employees.Add(employee)
employee = New Employee()
employee.FirstName = "Hanna"
employee.LastName = "Moos"
employee.Married = False
employee.Age = 28
employees.Add(employee)
employee = New Employee()
employee.FirstName = "Frederique"
employee.LastName = "Citeaux"
employee.Married = True
employee.Age = 67
employees.Add(employee)
employee = New Employee()
employee.FirstName = "Martin"
employee.LastName = "Sommer"
employee.Married = False
employee.Age = 22
employees.Add(employee)
employee = New Employee()
employee.FirstName = "Laurence"
employee.LastName = "Lebihan"
employee.Married = False
employee.Age = 32
employees.Add(employee)
employee = New Employee()
employee.FirstName = "Elizabeth"
employee.LastName = "Lincoln"
employee.Married = False
employee.Age = 9
employees.Add(employee)
employee = New Employee()
employee.FirstName = "Victoria"
employee.LastName = "Ashworth"
employee.Married = True
employee.Age = 29
employees.Add(employee)
Return employees
End Function
End Class- Now after you have prepared the needed sample data, it's time to bind your RadGridView to it. For that purpose you have to set the RadGridView's ItemSource property to the collection of employees returned by the static method EmployeeService.GetEmployees(). Open the code-behind of the GettingStarted class and add the following line of code after the call to InitializeComponent() in your constructor.
CopyC#
this.radGridView.ItemsSource = EmployeeService.GetEmployees();
CopyVB.NET
Me.radGridView.ItemsSource = EmployeeService.GetEmployees()
Now run your application and see the result.
You can read more about DataBinding here.
Grid Columns
The grid from the above example contains four columns, per one for each of the properties of the employee class. These columns are generated automatically by the RadGridView control. If you want to stop the columns auto generation, set the RadGridView property AutoGenerateColumns to False. In that case you will have to manually describe the columns you wish to be shown.
CopyXAML
<telerik:RadGridView x:Name="radGridView" AutoGenerateColumns="False">
<telerik:RadGridView.Columns>
<telerik:GridViewDataColumn DataMemberBinding="{Binding LastName}" Header="Last Name"/>
<telerik:GridViewDataColumn DataMemberBinding="{Binding Married}" Header="Is Married"/>
</telerik:RadGridView.Columns>
</telerik:RadGridView>The XAML declaration of your RadGridView contains two columns. The first one named "Last Name" is bound to the property LastName and "Is Married" is bound respectively to IsMarried. As a result your grid control will have only two columns and no other column will be added because the property AutoGenerateColumns is set to False.
You can read more about Grid Columns here.
Sorting, Grouping and Filtering
Sorting, Grouping and Filtering of RadGridView are enabled by default.
-
You can disable sorting for a specific column by setting its IsSortable property to False.
- You can disable filtering for a specific column by setting its IsFilterable property to False or the IsFilteringAllowed property of RadGridView to False.
- You can disable grouping for a specific column by setting its IsGroupable property to False.
See Also