Show Child Grid inside Grid in Silverlight


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.


Similar Articles