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

Getting Started

This article will guide you through the steps needed to add a basic RadDataGrid control in your application.

1. Setting up the app

Take a look at these articles and follow the instructions to setup your app:

2. Adding the required Telerik references

You have two options:

If you don't want to add the all Telerik.UI.for.Xamarin nuget package, you have the option to add a separate nuget package. For RadDataGrid control you have to install the Telerik.UI.for.Xamarin.DataGrid nuget package. This nuget will automatically refer the Telerik.UI.for.Xamarin.Common, Telerik.UI.for.Xamarin.Primitives, Telerik.UI.for.Xamarin.Input, Telerik.UI.for.Xamarin.DataControls and Telerik.UI.for.Xamarin.SkiaSharp nuget packages.

  • Add the references to Telerik assemblies manually, check the list below with the required assemblies for RadDataGrid component:
Platform Assemblies
Portable Telerik.XamarinForms.Common.dll
Telerik.XamarinForms.DataGrid.dll
Telerik.XamarinForms.SkiaSharp.dll
Android Telerik.Xamarin.Android.Common.dll
Telerik.Xamarin.Android.Data.dll
Telerik.Xamarin.Android.Input.dll
Telerik.Xamarin.Android.List.dll
Telerik.Xamarin.Android.Primitives.dll
Telerik.XamarinForms.Common.dll
Telerik.XamarinForms.DataControls.dll
Telerik.XamarinForms.DataGrid.dll
Telerik.XamarinForms.Input.dll
Telerik.XamarinForms.Primitives.dll
Telerik.XamarinForms.SkiaSharp.dll
iOS Telerik.XamarinForms.Common.dll
Telerik.XamarinForms.DataGrid.dll
Telerik.XamarinForms.SkiaSharp.dll
UWP Telerik.XamarinForms.Common.dll
Telerik.XamarinForms.DataGrid.dll
Telerik.XamarinForms.SkiaSharp.dll

RadDataGrid is rendered via the SkiaSharp graphics library so you need to install also SkiaSharp and SkiaSharp.Views.Forms in all projects of the Xamarin solution (portable, android, ios, etc).

3. Adding RadDataGrid control

You could use one of the following approaches:

Drag the control from the Toolbox.

Take a look at the following topics on how to use the toolbox:

Create the control definition in XAML:

The snippet below shows a simple RadDataGrid definition:

    <telerikDataGrid:RadDataGrid x:Name="DataGrid"/>

In addition to this, you need to add the following namespace:

    xmlns:telerikDataGrid="clr-namespace:Telerik.XamarinForms.DataGrid;assembly=Telerik.XamarinForms.DataGrid"

RadDataGrid control provides UI virtualization, so it requires its visual parent to provide vertical or horizontal space for the control to fill into. The following scenarios will measure the control with infinity and the virtualization will not work:

  • positioning the DataGrid control inside StackLayout which is wrapped in ScrollView.
  • positioning the DataGrid inside ScrollView.

For additional information, please check the Controls are not Apppearing article.

Now that you have added the control to your view, you need to make sure that is properly loaded with the required data.

4. Setting RadDataGrid ItemsSource

By default, the RadDataGrid control will autogenerate rows depending on the number of objects in the collection set as its ItemsSource.

Binding to a collection of objects

The collection of custom objects, then assigned to the ItemsSource property of the control:

     this.DataGrid.ItemsSource = new List<Data>
     {
        new Data { Country = "India", Capital = "New Delhi"},
        new Data { Country = "South Africa", Capital = "Cape Town"},
        new Data { Country = "Nigeria", Capital = "Abuja" },
        new Data { Country = "Singapore", Capital = "Singapore" } 
     };

And the simple business model used:

    public class Data
    {
        public string Country { get; set; }

        public string Capital { get; set; }
    }

Here is the result:

datagrid-itemssource

Binding to a DataTable

  1. The ViewModel used:
public class DataTableViewModel : NotifyPropertyChangedBase
{
    private DataTable data;

    public DataTable Data
    {
        get { return this.data; }
        set
        {
            this.UpdateValue(ref this.data, value);
        }
    }

    public DataTableViewModel()
    {
        this.Data = this.GetData();
    }

    private DataTable GetData()
    {

        DataTable country = new DataTable();
        country.TableName = "Cities";
        country.Columns.Add("Id", typeof(int));
        country.Columns.Add("City", typeof(string));
        country.Columns.Add("Population", typeof(int));
        country.Columns.Add("Visited On", typeof(DateTime));
        country.Columns.Add("IsVisited", typeof(bool));

        country.Rows.Add(0, "Sofia", 2000000, new DateTime(2012, 10, 1), true);
        country.Rows.Add(1, "New York", 8419000, null, false);
        country.Rows.Add(2, "London", 8982000, new DateTime(2019, 02, 11), true);
        country.Rows.Add(3, "Los Angeles", 3967000, null, false);
        country.Rows.Add(3, "Budapest", 1765000, new DateTime(2013, 02, 1), true);
        country.Rows.Add(3, "Tokyo", 9375104, new DateTime(2015, 09, 1), true);

        return country;
    }
}

Where the DataTable namespace is using System.Data;

  1. DataGrid definition:
<telerikDataGrid:RadDataGrid ItemsSource="{Binding Data}">
    <telerikDataGrid:RadDataGrid.BindingContext>
        <local:DataTableViewModel/>
    </telerikDataGrid:RadDataGrid.BindingContext>
</telerikDataGrid:RadDataGrid>

Add the namespace:

xmlns:telerikDataGrid="clr-namespace:Telerik.XamarinForms.DataGrid;assembly=Telerik.XamarinForms.DataGrid"

Check our DataGrid DataTable support article for more information about this feature.

SDK Browser and QSF applications contain different examples that show RadDataGrid's main features. You can find the applications in the Examples and QSF folders of your local Telerik UI for Xamarin installation.

See Also

In this article