This article describes for you the concept of Data Grid. It shows use a child grid inside of a Data Grid.
So here we go. First of all make a new Silverlight project and put a name and save location.
Image 1.
Now add a two new classes using Add new Item menu and put a suitable class name.
Customers.cs
Add a namespace on top of class.
using System.Collections.Generic;
public class Customers
{
/// <summary>
/// Represents the customer's id.
/// </summary>
public string CustomerID { get; set; }
/// <summary>
/// Represents the customer's company name.
/// </summary>
public string CompanyName { get; set; }
/// <summary>
/// Represents the customer's contact name.
/// </summary>
public string ContactName { get; set; }
/// <summary>
/// Represents the customer's contact title.
/// </summary>
public string ContactTitle { get; set; }
/// <summary>
/// Represents the customer's address.
/// </summary>
public string Address { get; set; }
/// <summary>
/// Represents the customer's city.
/// </summary>
public string City { get; set; }
/// <summary>
/// Represents the customer's region.
/// </summary>
public string Region { get; set; }
/// <summary>
/// Gets customer information
/// </summary>
public static List<Customers> GetCustomers()
{
return new List<Customers>
{
new Customers
{
CustomerID="ALFKI",
CompanyName = "Berglunds snabbköp",
ContactName = "Christina Berglund",
ContactTitle = "Order Administrator",
Address = "Berguvsvägen 8",
City = "Luleå",
Region = "WA"
},
new Customers
{
CustomerID="ANATR",
CompanyName = "Blauer See Delikatessen",
ContactName = "Hanna Moos",
ContactTitle = "Sales Representative",
Address = "Forsterstr. 57",
City = "Mannheim",
Region = "hgj"
},
new Customers
{
CustomerID="AROUT",
CompanyName = "Blondesddsl père et fils",
ContactName = "Frédérique Citeaux",
ContactTitle = "Marketing Manager",
Address = "24, place Kléber",
City = "Strasbourg",
Region = "hg"
},
new Customers
{
CustomerID="BERGS",
CompanyName = "Bólido Comidas preparadas",
ContactName = "Martà n Sommer",
ContactTitle = "Owner",
Address = "C/ Araquil, 67",
City = "Madrid",
Region = "jgk"
},
new Customers
{
CustomerID="BLAUS",
CompanyName = "Bottom-Dollar Markets",
ContactName = "Elizabeth Lincoln",
ContactTitle = "Accounting Manager",
Address = "23 Tsawassen Blvd.",
City = "Tsawassen",
Region = "BC"
},
new Customers
{
CustomerID="BLONP",
CompanyName = "Laughing Bacchus Wine Cellars",
ContactName = "Yoshi Tannamuri",
ContactTitle = "Marketing Assistant",
Address = "1900 Oak St.",
City = "Vancouver",
Region = "BC"
},
new Customers
{
CustomerID="BOLID",
CompanyName = "Lazy K Kountry Store",
ContactName = "John Steel",
ContactTitle = "Marketing Manager",
Address = "12 Orchestra Terrace",
City = "Walla Walla",
Region = "WA"
},
new Customers
{
CustomerID="BONAP",
CompanyName = "LILA-Supermercado",
ContactName = "Carlos González",
ContactTitle = "Accounting Manager",
Address = "Carrera 52 con Ave. Bolà var #65-98 Llano Largo",
City = "Barquisimeto",
Region = "Lara"
}
};
}
}
Here is my second class which is for child grid.
CustomerMoreDetails.cs
public class CustomerMoreDetails
{
/// <summary>
/// Represents the customer's id.
/// </summary>
public string CustomerID { get; set; }
/// <summary>
/// Represents the customer's postal code.
/// </summary>
public string PostalCode { get; set; }
/// <summary>
/// Represents the customer's country.
/// </summary>
public string Country { get; set; }
/// <summary>
/// Represents the customer's phone.
/// </summary>
public string Phone { get; set; }
/// <summary>
/// Represents the customer's fax number.
/// </summary>
public string Fax { get; set; }
public static List<CustomerMoreDetails> GetCustomerDetail()
{
return new List<CustomerMoreDetails>
{
new CustomerMoreDetails
{
CustomerID="ALFKI",
PostalCode = "12345",
Country = "Maxico",
Phone = "(5) 555-4729",
Fax = "(5) 555-4729"
},
new CustomerMoreDetails
{
CustomerID="ALFKI",
PostalCode = "12345",
Country = "Shri Lanka",
Phone = "(5) 555-4729",
Fax = "(5) 555-4729"
},
new CustomerMoreDetails
{
CustomerID="ALFKI",
PostalCode = "12345",
Country = "India",
Phone = "(5) 555-4729",
Fax = "(5) 555-4729"
},
new CustomerMoreDetails
{
CustomerID="ANATR",
PostalCode = "12345",
Country = "US",
Phone = "(5) 555-4729",
Fax = "(5) 555-4729"
},
new CustomerMoreDetails
{
CustomerID="AROUT",
PostalCode = "12345",
Country = "Canada",
Phone = "(5) 555-4729",
Fax = "(5) 555-4729"
},
new CustomerMoreDetails
{
CustomerID="BERGS",
PostalCode = "12345",
Country = "Australia",
Phone = "(5) 555-4729",
Fax = "(5) 555-4729"
},
new CustomerMoreDetails
{
CustomerID="BLAUS",
PostalCode = "12345",
Country = "ENgland",
Phone = "(5) 555-4729",
Fax = "(5) 555-4729"
},
new CustomerMoreDetails
{
CustomerID="BLONP",
PostalCode = "12345",
Country = "Pakistan",
Phone = "(5) 555-4729",
Fax = "(5) 555-4729"
},
new CustomerMoreDetails
{
CustomerID="BOLID",
PostalCode = "12345",
Country = "Brazil",
Phone = "(5) 555-4729",
Fax = "(5) 555-4729"
},
new CustomerMoreDetails
{
CustomerID="BONAP",
PostalCode = "12345",
Country = "Newzealand",
Phone = "(5) 555-4729",
Fax = "(5) 555-4729"
}
};
}
}
Now let's work on MailPage.xaml...
First of all a new reference of System.Windows.Controls.data and call that assembly on page.
xmlns:dataGrid="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
<Grid x:Name="LayoutRoot" Background="White">
<dataGrid:DataGrid Margin="5,5,5,0" x:Name="customersDataGrid" Width="800" GridLinesVisibility="Horizontal" AutoGenerateColumns="False"
VerticalAlignment="Top" RowDetailsVisibilityChanged="customersDataGrid_RowDetailsVisibilityChanged" IsReadOnly="True" >
<dataGrid:DataGrid.Columns>
<dataGrid:DataGridTextColumn Header="Customer ID" Width="Auto" Binding="{Binding CustomerID}" CanUserReorder="False"/>
<dataGrid:DataGridTextColumn Header="Company Name" Width="Auto" Binding="{Binding CompanyName}" CanUserReorder="False" />
<dataGrid:DataGridTextColumn Header="Contact Name" Width="Auto" Binding="{Binding ContactName}" CanUserReorder="False"/>
<dataGrid:DataGridTextColumn Header="Contact Title" Width="Auto" Binding="{Binding ContactTitle}" CanUserReorder="False"/>
<dataGrid:DataGridTextColumn Header="Address" Width="Auto" Binding="{Binding Address}" CanUserReorder="False"/>
<dataGrid:DataGridTextColumn Header="City" Width="Auto" Binding="{Binding City}" CanUserReorder="False"/>
<dataGrid:DataGridTextColumn Header="Region" Width="Auto" Binding="{Binding Region}" CanUserReorder="False"/>
</dataGrid:DataGrid.Columns>
This is Child grid
<dataGrid:DataGrid.RowDetailsTemplate>
<DataTemplate>
<dataGrid:DataGrid x:Name="customerDetail" Width="400" AutoGenerateColumns="False" HorizontalAlignment="Center" IsReadOnly="True" Grid.Row="1">
<dataGrid:DataGrid.Columns>
<dataGrid:DataGridTextColumn Header="Customer ID" Binding="{Binding CustomerID}"/>
<dataGrid:DataGridTextColumn Header="Postal Code" Binding="{Binding PostalCode}"/>
<dataGrid:DataGridTextColumn Header="Country" Binding="{Binding Country}"/>
<dataGrid:DataGridTextColumn Header="Phone" Binding="{Binding Phone}"/>
<dataGrid:DataGridTextColumn Header="Fax" Binding="{Binding Fax}"/>
</dataGrid:DataGrid.Columns>
</dataGrid:DataGrid>
</DataTemplate>
</dataGrid:DataGrid.RowDetailsTemplate>
Now bind these two grids.
List<CustomerMoreDetails> customerDetail = new List<CustomerMoreDetails>();
public MainPage()
{
InitializeComponent();
customersDataGrid.ItemsSource = Customers.GetCustomers();
customerDetail = CustomerMoreDetails.GetCustomerDetail();
}
private void customersDataGrid_RowDetailsVisibilityChanged(object sender, DataGridRowDetailsEventArgs e)
{
try
{
if (e.Row.DataContext != null)
{
var objFinalRecords = from tblCustomerDetail in customerDetail
where tblCustomerDetail.CustomerID == ((Customers)e.Row.DataContext).CustomerID
select tblCustomerDetail;
((DataGrid)e.DetailsElement).ItemsSource = objFinalRecords;
}
}
catch (Exception Ex)
{
MessageBox.Show(Ex.Message, "Error", MessageBoxButton.OK);
}
}
So finally run the application and see the result something like this.
Image 2.
When you click on a row then result should be like this.
Image 3.
Image 4.