Getting Started

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

• Setting up the app
• Adding the required Telerik references
• Adding RadDataGrid control
• Setting RadDataGrid ItemsSource

1. Setting up the app

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

• Setup app with Telerik UI for Xamarin on Windows
• Setup app with Telerik UI for Xamarin on Mac

2. Adding the required Telerik references

You have two options:

• Add the Telerik UI for Xamarin Nuget package following the instructions in Telerik NuGet package server topic.

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:

• Telerik UI for Xamarin Toolbox on Windows

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:

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

• Filtering
• Grouping
• Sorting