Reader Level:
Article

Show Child Grid inside Grid in Silverlight

By Raj Kumar Beniwal on Sep 16, 2010
This article describes you the concept of Data Grid. It shows how use a child grid inside of a Data Grid.

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.

Image1.jpg 

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.

Image2.jpg 

Image 2.

When you click on a row then result should be like this.

Image3.jpg 

Image 3.

Image4.jpg 

Image 4.

Raj Kumar Beniwal
Raj Kumar Beniwal

Raj Kumar Beniwal is two time Microsoft MVP(Client App Dev) and four time C# Corner MVP,  working as project manager with lots of hands on experience using ASP.NET 2.0/3.5, AJAX, MVC, C#, Visual Basic .NET, SQL Serv... Read more

COMMENT USING