New to Telerik UI for WinUI? Download free 30-day trial

Getting Started

This article demonstrates how to create a sample application containing a RadDataGrid.

Assembly References

In order to use the RadDataGrid control in your projects, you have to add references to the following assembly:

  • Telerik.WinUI.Controls.dll

Adding RadDataGrid to the Project

After you have included the necessary references, you can add the "Telerik.UI.Xaml.Controls.Grid" namespace and define the RadDataGrid in xaml.

Example 1: Adding RadDataGrid in XAML

<Page 
    x:Class="GettingStarted.MainPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:GettingStarted" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:telerikGrid="using:Telerik.UI.Xaml.Controls.Grid" 
    mc:Ignorable="d" 
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <Grid> 
        <telerikGrid:RadDataGrid x:Name="dataGrid" /> 
    </Grid> 
</Page> 
If you run the application at this point, you will see an empty grid with no columns and rows. Read the next sections to learn how to display some data.

Defining the Model and ViewModel

Since the RadDataGrid is a data-bound control, you have to create a data model and set the ItemsSource of the control to a collection of those models. Example 2 demonstrates a sample implementation of a model and viewmodel.

Example 2: Defining model and viewmodel

public class Club : ViewModelBase 
{ 
    private string name; 
    private DateTime established; 
    private int stadiumCapacity; 
 
    public Club(string name, DateTime established, int stadiumCapacity) 
    { 
        this.name = name; 
        this.established = established; 
        this.stadiumCapacity = stadiumCapacity; 
    } 
 
    public string Name 
    { 
        get { return this.name; } 
        set 
        { 
            if (value != this.name) 
            { 
                this.name = value; 
                this.OnPropertyChanged("Name"); 
            } 
        } 
    } 
 
    public DateTime Established 
    { 
        get { return this.established; } 
        set 
        { 
            if (value != this.established) 
            { 
                this.established = value; 
                this.OnPropertyChanged("Established"); 
            } 
        } 
    } 
 
    public int StadiumCapacity 
    { 
        get { return this.stadiumCapacity; } 
        set 
        { 
            if (value != this.stadiumCapacity) 
            { 
                this.stadiumCapacity = value; 
                this.OnPropertyChanged("StadiumCapacity"); 
            } 
        } 
    } 
} 
 
public class MyViewModel : ViewModelBase 
{ 
    private ObservableCollection<Club> clubs; 
 
    public ObservableCollection<Club> Clubs 
    { 
        get 
        { 
            if (this.clubs == null) 
            { 
                this.clubs = this.CreateClubs(); 
            } 
 
            return this.clubs; 
        } 
    } 
 
    private ObservableCollection<Club> CreateClubs() 
    { 
        ObservableCollection<Club> clubs = new ObservableCollection<Club>(); 
        Club club; 
 
        club = new Club("Liverpool", new DateTime(1892, 1, 1), 45362); 
        clubs.Add(club); 
 
        club = new Club("Manchester Utd.", new DateTime(1878, 1, 1), 76212); 
        clubs.Add(club); 
 
        club = new Club("Chelsea", new DateTime(1905, 1, 1), 42055); 
        clubs.Add(club); 
 
        return clubs; 
    } 
} 

The ViewModelBase class is located in the "Telerik.Core" namespace and provides an implementation of the INotifyPropertyChanged interface.

Populating with Data

Each row in RadDataGrid represents an object in the data source and each column shows the value for one property of the bound object. Examples 3 and 4 demonstrate how to display the sample data from Example 2 by setting the DataContext of the Page and the ItemsSource of the RadDataGrid.

Example 3: Setting the ItemsSource in xaml

<Page 
    x:Class="GettingStarted.MainPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:GettingStarted" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:telerikGrid="using:Telerik.UI.Xaml.Controls.Grid" 
    mc:Ignorable="d" 
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <Page.DataContext> 
        <local:MyViewModel /> 
    </Page.DataContext> 
    <Grid> 
        <telerikGrid:RadDataGrid x:Name="dataGrid" ItemsSource="{Binding Clubs}"/> 
    </Grid> 
</Page> 

Example 4: Setting the ItemsSource in code

public sealed partial class MainPage : Page 
{ 
    public MainPage() 
    { 
        this.InitializeComponent(); 
 
        this.dataGrid.ItemsSource = new MyViewModel().Clubs; 
    } 
} 

Figure 1: Result from Example 3

RadDataGrid populated with data

Merge the Generic.xaml ResourceDictionary

In order for the RadDataGrid and any other controls to receive their styles, you have to merge the Generic.xaml ResourceDictionary in App.xaml.

Example 5: Merge the Generic.xaml ResourceDictionary

<Application.Resources> 
    <ResourceDictionary> 
        <ResourceDictionary.MergedDictionaries> 
            <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" /> 
            <ResourceDictionary Source="ms-appx:///Telerik.WinUI.Controls/Themes/Generic.xaml"/> 
            <!-- Other merged dictionaries here --> 
        </ResourceDictionary.MergedDictionaries> 
        <!-- Other app resources here --> 
    </ResourceDictionary> 
</Application.Resources> 

Columns

The RadGridView from the examples above contains three automatically generated columns, one for each of the properties of the Club class. The type of the generated column depends on the type property of the bound object. If you want to stop the columns auto generation and define the columns manually, set the AutoGenerateColumns property to False.

Example 6: Defining columns manually

<telerikGrid:RadDataGrid x:Name="dataGrid" AutoGenerateColumns="False" ItemsSource="{Binding Clubs}"> 
    <telerikGrid:RadDataGrid.Columns> 
        <telerikGrid:DataGridTextColumn PropertyName="Name" /> 
        <telerikGrid:DataGridDateColumn PropertyName="Established" /> 
    </telerikGrid:RadDataGrid.Columns> 
</telerikGrid:RadDataGrid> 

Read the Columns article to learn about the different types of columns that are available.

Selection

By default, the entire row is selected when the user clicks on the grid. You can set the SelectionUnit property to specify whether rows or cells can be selected and the SelectionMode property to choose between single and multiple selection. Learn more about that feature in the Selection article.

Sorting, Grouping and Filtering

Sorting, Grouping and Filtering are enabled by default. You can disable each feature by setting the UserSortMode/UserFilterMode/UserGroupMode properties of the RadDataGrid or the CanUserSort/CanUserGroup/CanUserFilter property of the corresponding column.

See Also

In this article
Not finding the help you need?