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".
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:
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.