Three Steps to Work With Telerik RadDataGrid in XAML Based Windows Store Application

Recently I was talking to Windows Store App developers. When I showed them a demo of a RadDataGrid, they all got very excited. One of the managers asked me to show how to work with a RadDataGrid in the simplest way. In this article we will have a look at working with RadDataGrid in three simple steps.

Step 1: Add Rad Controls for Windows 8 reference

Go ahead and launch Visual Studio and create a new Windows Store Application. Select the "Blank App" project template to create the application. After the project has been created, add a Rad Controls for the Windows 8 reference in the project. To add the reference, right-click on "Reference" in the project and select "Add Reference".

Add-Rad-Controls-for-Windows-8-reference.jpg

After adding the reference on XAML add the namespace to work with RadDataGrid:

xmlns:telerik="using:Telerik.UI.Xaml.Controls.Grid"

Step 2: Create Business object

Next you need to create a business object. Let us create business objects for "Product":

    public class Product
    {
      
       
public string ProductName { get; set; }
       
public double ProductPrice { get; set; }
       
public string ProductType { get; set; }
       
public bool InStock { get; set; }
    }

We will display the Products in the RadDataGrid. In a real-world scenario a list of Products will be fetched from Services. For the purpose of this article let us create a list of Products as a collection locally.

 

  private List<Product> GetProducts()

        {

            List<Product> lstProduct = new List<Product>

            {

                new Product

                {

                    ProductName ="Pen",

                    ProductPrice = 100,

                    ProductType = "Education",

                    InStock = true

                },

                new Product

                {

                    ProductName ="Pencil",

                    ProductPrice = 50,

                    ProductType = "Education",

                    InStock = false

                },

                new Product

                {

                    ProductName ="Math Book",

                    ProductPrice = 345,

                    ProductType = "Education",

                    InStock = true

                },

                new Product

                {

                    ProductName ="Ball",

                    ProductPrice = 23,

                    ProductType = "Sports",

                    InStock = true

                },

                new Product

                {

                    ProductName ="Cricket Bat",

                    ProductPrice = 560,

                    ProductType = "Sports",

                    InStock = true

                },

                new Product

                {

                    ProductName ="Baseball Bat",

                    ProductPrice = 550,

                    ProductType = "Sports",

                    InStock = false

                },

            };

 

            return lstProduct;

        }


Step 3: Create RadDataGrid and bind with the datasource

In the last step you need to put RadDataGrid in XAML and bind it to the data source. A RadDataGrid can be created as in the following:
 

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <telerik:RadDataGrid x:Name="ProductGrid" />

    </Grid>

Next you need to bind the RadDataGrid to the list of Products. You can do that as in the following:

this.ProductGrid.ItemsSource = GetProducts();

Run Application

On running Application you will find the RadDataGrid. You will notice that by default RadDataGrid supports sorting on columns; see:

Run-Rad-Controls-for-Windows-8-reference.jpg

In these 3 simple steps you can begin working with RadDataGrid in a XAML based Windows Store Application. In further articles we will get deeper into the RadDataGrid. I hope you find this article useful. Thanks for reading.