Display parent child data in GridView using usercontrol in asp.net

bysantosh •April 28, 2011

0

In this post I am going to show how to display parent child data in gridview using usercontrol.

Open Visual studio and create a new website
Right click on App_Code folder ,and add new class named Customer and add following code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;


public class Customer
{
    public Customer()
    {
        
    }
    public Customer(int id, string name)
    {
        this.CustomerID = id;
        this.CustomerName = name;
        PhoneList = new List<PhoneNumber>();
    }

    public int CustomerID { get; set; }
    public string CustomerName { get; set; }
    public List<PhoneNumber> PhoneList { get; set; }
}

Right click on App_Code folder and add a new class PhoneNumber and add following code into it

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

public class PhoneNumber
{
    public int ID { get; set; }
    public string Number { get; set; }
    public PhoneNumber()
    {
    }
    public PhoneNumber(int id, string number)
    {
        this.ID = id;
        this.Number = number;

    }
}

Right click on the website,and add an usercontrol named PhoneNumbers.ascx and add following code into it

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="PhoneNumbers.ascx.cs" Inherits="PhoneNumbers" %>
<asp:GridView ShowHeader="False" ID="GridView1" runat="server" GridLines="None"
    AutoGenerateColumns="False">
    <Columns>
        <asp:BoundField DataField="Number" HeaderText="Number" />
    </Columns>
</asp:GridView>

Open the code behind and add following code into it

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Collections;
using System.ComponentModel;

public partial class PhoneNumbers : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    private IEnumerable _data;
    [EditorBrowsable()]
    public IEnumerable DataSource
    {
        get { return _data; }
        set
        {
            _data = value;
            DataChange(value);
        }
    }
    private void DataChange(IEnumerable value)
    {
        GridView1.DataSource = value;
        GridView1.DataBind();
    }
}

Open Default.aspx page and add GridView control as below

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Src="PhoneNumbers.ascx" TagName="PhoneNumbers" TagPrefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    </div>
    <asp:GridView AutoGenerateColumns="False" ID="GridView1" runat="server" CellPadding="4"
        ForeColor="#333333" GridLines="None">
        <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
        <Columns>
            <asp:BoundField DataField="CustomerID" HeaderText="ID" />
            <asp:BoundField DataField="CustomerName" HeaderText="Customer Name" />
            <asp:TemplateField HeaderText="Phone Numbers">
                <ItemTemplate>
                    <uc1:PhoneNumbers ID="PhoneNumbers2" runat="server" DataSource='<%#Eval("PhoneList")%>' />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
        <EditRowStyle BackColor="#999999" />
        <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
        <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
        <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
        <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
        <SortedAscendingCellStyle BackColor="#E9E7E2" />
        <SortedAscendingHeaderStyle BackColor="#506C8C" />
        <SortedDescendingCellStyle BackColor="#FFFDF8" />
        <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
    </asp:GridView>
    </form>
</body>
</html>

Open Default.aspx.cs page and add following code on Page_Load event

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if(!IsPostBack)
        {
            List<Customer> list = new List<Customer>();
            list.Add(new Customer(1, "John"));
            list.Add(new Customer(2, "Joe"));
            list.Add(new Customer(3, "Don"));
            list[0].PhoneList.Add(new PhoneNumber(1, "555 - 555 - 555"));
            list[0].PhoneList.Add(new PhoneNumber(1, "666 - 555 - 555"));
            list[0].PhoneList.Add(new PhoneNumber(1, "111 - 555 - 555"));
            list[1].PhoneList.Add(new PhoneNumber(2, "222 - 555 - 555"));
            list[1].PhoneList.Add(new PhoneNumber(2, "333 - 555 - 555"));
            list[2].PhoneList.Add(new PhoneNumber(3, "444 - 555 - 555"));
            GridView1.DataSource = list;
            GridView1.DataBind(); 
        }
    }
}

Please do not post any spam link in the comment box😊

Display parent child data in GridView using usercontrol in asp.net

Contact Form