Getting Started
This Section starts with Assemblies deployment, Subsequent sections that take you through the structure of SfDataGrid and explains how to create Simple application with SfDataGrid, how to apply grouping, sorting and filtering SfDataGrid.
Assemblies Deployment
This topic describes assembly that is required in your WinRT application when you want to use SfDataGrid.Certain assemblies are deployed in your application, whereas others that offer additional functionality like exporting is deployed optionally based on your requirements. The assemblies that are added are in same version.
The following is the list of assemblies.
| Demanded Assemblies | Description |
|---|---|
| Syncfusion.Data.WinRT | Covers basic processing on data like sorting, grouping, paging and filtering. |
| Syncfusion.SfGrid.WinRT | Covers SfDataGrid and other elements included. |
| Syncfusion.SfInput.WinRT | Covers editors like, SfNumericTextBox, SfDatePicker,SfNumericUpDown |
| Optional Assemblies | Description |
| Syncfusion.SfGridConverter.WinRT | Covers classes for exporting Grid to excel. |
| Syncfusion.XlsIO.WinRT | Covers base classes for exporting data. |
| Syncfusion.Pdf.WinRT | Covers base classes for exporting Grid to PDF |
Control Structure
The following screenshot displays you the elements in SfDataGrid.
Create a Simple Application with SfDataGrid
Following steps demonstrate how to create a SfDataGrid and bind data to it:
- Create new WinRT application in Visual Studio.
-
Open the Visual Studio tool box. Navigate to “Syncfusion Controls” tab, and drag the SfDataGrid toolbox item to the Designer window. Now, rename the SfDataGrid to “SfGrid”.
When you drag the SfDataGrid toolbox item to the window, it automatically adds the required references to the current application.
To add the SfDataGrid using code, you can add the following assemblies to the project.
- Syncfusion.Data.WinRT
- Syncfusion.SfGrid.WinRT
- Now, create a simple data source as shown in the following code example. Add the following code example in a newly created class files and save it as__OrderInfo.cs file.
public class OrderInfo
{
int orderID;
string customerId;
string country;
string customerName;
string shippingCity;
public int OrderID
{
get { return orderID; }
set { orderID = value; }
}
public string CustomerID
{
get { return customerId; }
set { customerId = value; }
}
public string CustomerName
{
get { return customerName; }
set { customerName = value;}
}
public string Country
{
get { return country; }
set { country = value; }
}
public string ShipCity
{
get { return shippingCity; }
set { shippingCity = value; }
}
public OrderInfo(int orderId, string customerName, string country, string
customerId,string shipCity)
{
this.OrderID = orderId;
this.CustomerName = customerName;
this.Country = country;
this.CustomerID = customerId;
this.ShipCity = shipCity;
}
}4.Add the following code example in a newly created class file and save it as OrderInfoRepository.cs file.
public class OrderInfoRepository
{
ObservableCollection<OrderInfo> orderCollection;
public ObservableCollection<OrderInfo> OrderInfoCollection
{
get { return orderCollection; }
set { orderCollection = value; }
}
public OrderInfoRepository()
{
orderCollection = new ObservableCollection<OrderInfo>();
this.GenerateOrders();
}
private void GenerateOrders()
{
orderCollection.Add(new OrderInfo(1001, "Maria Anders", "Germany", "ALFKI", "Berlin"));
orderCollection.Add(new OrderInfo(1002, "Ana Trujillo", "Mexico", "ANATR", "Mexico D.F."));
orderCollection.Add(new OrderInfo(1003, "Antonio Moreno", "Mexico", "ANTON", "Mexico D.F."));
orderCollection.Add(new OrderInfo(1004, "Thomas Hardy", "UK", "AROUT", "London"));
orderCollection.Add(new OrderInfo(1005, "Christina Berglund", "Sweden", "BERGS", "Lula"));
orderCollection.Add(new OrderInfo(1006, "Hanna Moos", "Germany", "BLAUS", "Mannheim"));
orderCollection.Add(new OrderInfo(1007, "Frederique Cite", "France", "BLONP", "Strasbourg"));
orderCollection.Add(new OrderInfo(1008, "Martin", "Spain", "BOLID", "Madrid"));
orderCollection.Add(new OrderInfo(1009, "Laurence", "France", "BONAP", "Marseille"));
orderCollection.Add(new OrderInfo(1010, "Elizabeth Lincoln", "Canada", "BOTTM", "Tsawassen"));
}
}5.You can add Syncfusion names space in XAML to make use of SfDataGrid. Here, your sample namespace uses your model to set data context to Grid or to Page.
<Page x:Class="SimpleApplication.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:SimpleApplication"
xmlns:syncfusion="using:Syncfusion.UI.Xaml.Grid">6.You need to set data context for (Page or Grid) or you can set it using Resource also. You can bind data to SfDataGrid by using the SfDataGrid.ItemsSource property. When you set it using data context then you can refer the following code example.
<Page.DataContext>
<local:OrderInfoRepository />
</Page.DataContext>You can bind the data using the following code example.
<syncfusion:SfDataGrid ColumnSizer="Auto" ItemsSource="{Binding OrderInfoCollection}" />To set the data context using Resource, you can refer the following code example.
<Page.Resources>
<local:OrderInfoRepository x:Key="data" />
</Page.Resources>You can bind the data using the following code example.
<syncfusion:SfDataGrid ColumnSizer="Auto" ItemsSource="{Binding OrderInfoCollection, Source={StaticResource data}}" />7.By default, the SfDataGrid automatically creates columns for all fields in a data source.
8.Execute the application to render the following output.
9.You can also define the columns manually by setting the SfDataGrid.AutoGenerateColumns property to ‘false’, and add the GridColumn object to the SfDataGrid.Columns collection. The following code example illustrates this.
<syncfusion:SfDataGrid AutoGenerateColumns="False"
ColumnSizer="Auto"
ItemsSource="{Binding OrderInfoCollection}">
<syncfusion:SfDataGrid.Columns>
<syncfusion:GridTextColumn HeaderText="Order ID" MappingName="OrderID" />
<syncfusion:GridTextColumn HeaderText="Customer ID" MappingName="CustomerID" />
<syncfusion:GridTextColumn HeaderText="Ship Country" MappingName="ShipCountry" />
<syncfusion:GridTextColumn HeaderText="Ship City" MappingName="ShipCity" />
</syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>10.Execute the application to render the following output.
11.SfDataGrid allows you to group its data by dragging a column and drop it in GroupDrop area. To apply grouping with mouse pointer, you can enable ShowGroupDropArea and AllowGrouping. The following code example illustrates this.
<syncfusion:SfDataGrid ColumnSizer="Star"
AllowGrouping="True"
ItemsSource="{Binding OrderInfoCollection,
Source={StaticResource data}}"
ShowGroupDropArea="True" />12.Execute the application and drag Order ID Column and drop it in GroupDrop area. It displays the following output.
13.SfDataGrid allows you to apply sorting on its data by setting AllowSorting to ‘true’. The following code example illustrates this.
<syncfusion:SfDataGrid AllowSorting="True"
ColumnSizer="Star"
ItemsSource="{Binding OrderInfoCollection,
Source={StaticResource data}}" />14.Execute the application and click header cell to sort the data and the following output is displayed.
15.SfDataGrid allows you to apply filtering on its data by setting AllowFiltering to ‘true’. The following code example illustrates this.
<syncfusion:SfDataGrid AllowFiltering="True"
ColumnSizer="Star"
ItemsSource="{Binding OrderInfoCollection,
Source={StaticResource data}}" />16.Execute the application; you can see that filter toggle button is loaded.
17.When you click filter toggle button, you can get a filter pop-up window as displayed in the following screenshot.
Create Master-Details view DataGrid
Master Detail View DataGrid displays a hierarchical data in a tree format. This section explains you a simple procedure to create Master Detail View DataGrid.
-
Create New WinRT Project in Visual Studio.
-
Add required assemblies as mentioned in Getting Started.
-
Now, create simple Data Source.
-
Data Source is created in a hierarchical model. It is similar to normal Observable collection (Parent Collection) that has another collection (as other properties defined in it) used as ChildGrid.
-
The ChildGrid collection has one of the properties from Parent Collection that acts as a key to group data under same collection.
-
In the following code example ProductDetails are defined as a normal property that returns a collection. Order ID is the key property that is defined in both Parent Collection OrderInfo class and ProductInfo class.
4.The Model is like Parent Collection.
Add the following code example in a newly created class file and save it as OrderInfo.cs
public class OrderInfo
{
int orderID;
string customerId;
string country;
string customerName;
string shippingCity;
List<ProductInfo> productDetails;
public int OrderID
{
get { return orderID; }
set { orderID = value; }
}
public string CustomerID
{
get { return customerId; }
set { customerId = value; }
}
public string CustomerName
{
get { return customerName; }
set { customerName = value; }
}
public string Country
{
get { return country; }
set { country = value; }
}
public string ShipCity
{
get { return shippingCity; }
set { shippingCity = value; }
}
public List<ProductInfo> ProductDetails
{
get { return productDetails; }
set { productDetails = value; }
}
public OrderInfo(int orderId, string customerName, string country, string
customerId, string shipCity, List<ProductInfo> productDetails)
{
this.OrderID = orderId;
this.CustomerName = customerName;
this.Country = country;
this.CustomerID = customerId;
this.ShipCity = shipCity;
this.ProductDetails = productDetails;
}
}The ProductDetails that returns Product Info collection defined as normal property in parent collection is the Child Collection.
Add the following code example in a newly created class file and save it as ProductInfo.cs file
public class ProductInfo
{
int orderId;
string productName;
public int OrderID
{
get { return orderId; }
set { orderId = value; }
}
public string ProductName
{
get { return productName; }
set { productName = value; }
}
}NOTE
Both parent collection and child collection have key property OrderID.
5.Now, load data for prepared collection.
Add the following code example in a newly created class file and save it as OrderInfoRepository.cs file.
public class OrderInfoRepository
{
ObservableCollection<OrderInfo> orderCollection;
public ObservableCollection<OrderInfo> OrderInfoCollection
{
get { return orderCollection; }
set { orderCollection = value; }
}
public OrderInfoRepository()
{
orderCollection = new ObservableCollection<OrderInfo>();
this.GenerateProducts();
OrderInfoCollection = GenerateOrders();
}
public ObservableCollection<OrderInfo> GenerateOrders()
{
ObservableCollection<OrderInfo> orders = new ObservableCollection<OrderInfo>();
orders.Add(new OrderInfo(1001, "Maria Anders", "Germany", "ALFKI", "Berlin", GetOrder(1001)));
orders.Add(new OrderInfo(1002, "Ana Trujillo", "Mexico", "ANATR", "Mexico D.F.", GetOrder(1002)));
orders.Add(new OrderInfo(1003, "Antonio Moreno", "Mexico", "ANTON", "Mexico D.F.", GetOrder(1003)));
orders.Add(new OrderInfo(1004, "Thomas Hardy", "UK", "AROUT", "London", GetOrder(1004)));
orders.Add(new OrderInfo(1005, "Christina Berglund", "Sweden", "BERGS", "Lula", GetOrder(1005)));
orders.Add(new OrderInfo(1006, "Hanna Moos", "Germany", "BLAUS", "Mannheim", GetOrder(1006)));
orders.Add(new OrderInfo(1007, "Frederique Cite", "France", "BLONP", "Strasbourg", GetOrder(1007)));
orders.Add(new OrderInfo(1008, "Martin", "Spain", "BOLID", "Madrid", GetOrder(1008)));
orders.Add(new OrderInfo(1009, "Laurence", "France", "BONAP", "Marseille", GetOrder(1009)));
orders.Add(new OrderInfo(1010, "Elizabeth Lincoln", "Canada", "BOTTM", "Tsawassen", GetOrder(1010)));
return orders;
}
List<ProductInfo> prod = new List<ProductInfo>();
public void GenerateProducts()
{
prod.Add(new ProductInfo() { OrderID = 1001, ProductName = "Bike1" });
prod.Add(new ProductInfo() { OrderID = 1001, ProductName = "Bike2" });
prod.Add(new ProductInfo() { OrderID = 1001, ProductName = "Bike2" });
prod.Add(new ProductInfo() { OrderID = 1002, ProductName = "Bike2" });
prod.Add(new ProductInfo() { OrderID = 1002, ProductName = "Bike1" });
prod.Add(new ProductInfo() { OrderID = 1002, ProductName = "Bike3" });
prod.Add(new ProductInfo() { OrderID = 1003, ProductName = "Bike2" });
prod.Add(new ProductInfo() { OrderID = 1003, ProductName = "Bike1" });
prod.Add(new ProductInfo() { OrderID = 1004, ProductName = "Bike2" });
prod.Add(new ProductInfo() { OrderID = 1004, ProductName = "Bike2" });
prod.Add(new ProductInfo() { OrderID = 1005, ProductName = "Bike3" });
prod.Add(new ProductInfo() { OrderID = 1005, ProductName = "Bike4" });
prod.Add(new ProductInfo() { OrderID = 1005, ProductName = "Bike5" });
prod.Add(new ProductInfo() { OrderID = 1006, ProductName = "Bike1" });
prod.Add(new ProductInfo() { OrderID = 1006, ProductName = "Bike2" });
prod.Add(new ProductInfo() { OrderID = 1007, ProductName = "Bike1" });
prod.Add(new ProductInfo() { OrderID = 1008, ProductName = "Bike4" });
prod.Add(new ProductInfo() { OrderID = 1008, ProductName = "Bike6" });
prod.Add(new ProductInfo() { OrderID = 1008, ProductName = "Bike7" });
}
public List<ProductInfo> GetOrder(int i)
{
List<ProductInfo> product = new List<ProductInfo>();
foreach (var or in prod)
if (or.OrderID == i)
product.Add(or);
return product;
}
}6.Now open XAML page in your application. Add namespace for SfDataGrid and create simple application with SfDataGrid.
7.SfDataGrid.DetailsViewDefinition creates Master Detail DataGrid and RelationalColumn property creates Associate ChildGrid data with Parent Grid Data.
8.Create Details View Grid as in the following code example. As in main Grid, you can also create columns for ChildGrid. There are some limitations for DetailsView Grid that is referred using Master-Details View Section.
<Page x:Class="SimpleApplication.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:SimpleApplication"
xmlns:syncfusion="using:Syncfusion.UI.Xaml.Grid"
Title="MainWindow"
Width="525"
Height="350">
<Page.DataContext>
<local:OrderInfoRepository />
</Page.DataContext>
<Grid>
<syncfusion:SfDataGrid AutoGenerateColumns="True"
ColumnSizer="Star"
ItemsSource="{Binding OrderInfoCollection}">
<syncfusion:SfDataGrid.DetailsViewDefinition>
<syncfusion:GridViewDefinition RelationalColumn="ProductDetails" />
</syncfusion:SfDataGrid.DetailsViewDefinition>
</syncfusion:SfDataGrid>
</Grid>
</Page>9.Execute the application; Grid is loaded with Master Details Grid. Click the first record’s expander to render the following output.
