Sunday 13 January 2013

Parent-Child Gridview/nested Gridview

Often We need nested gridview.



Like showing parent-child relationship in gridview.

I created 2 tables Customer(CustomerID as int,CustomerName as varchar(50)) and Order(Orderid as int,description as varchar(50),CustomerId as Foreign key to Customer).

Enter code into HTML source:
----------------------------------


        <asp:GridView ID="GridParent" runat="server" AutoGenerateColumns="False"
            OnRowDataBound="GridParent_RowDataBound" CellPadding="4" ForeColor="#333333"
            GridLines="None" Width="384px" Height="183px">
            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
            <Columns>
                <asp:TemplateField HeaderText="ID">
                    <ItemTemplate>
                        <asp:Label ID="lblID" Text='<%# Eval("CustomerID") %>' runat="server"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Customer Name">
                    <ItemTemplate>
                        <asp:Label ID="lblName" Text='<%# Eval("CustomerName") %>' runat="server"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Orders">
                    <ItemTemplate>
                        <asp:Label ID="lbltoggel" runat="server" >+Orders</asp:Label>
                        <asp:HiddenField ID="lblCustomerID" value='<%# Eval("CustomerID") %>' runat="server"></asp:HiddenField>
                        <asp:GridView ID="GridChild" runat="server" style="display:block" AutoGenerateColumns="false">
                         <Columns>
                                <asp:TemplateField HeaderText="Order No">
                                    <ItemTemplate>
                                        <asp:Label ID="lblOrderID" Text='<%# Eval("Orderid") %>' runat="server"></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Description">
                                    <ItemTemplate>
                                        <asp:Label ID="lblTotal" Text='<%# Eval("description") %>' runat="server"></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField>
                            </Columns>
                        </asp:GridView>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
</asp:gridview>
----------------------------------
Now create this javascript :(It is for expanding Show or Hide child grid/Order Details)
----------------------------------

 <script type="text/javascript" language="javascript">
         function toggle(toggeldivid, toggeltext)
          {
             var divelement = document.getElementById(toggeldivid);
             var lbltext = document.getElementById(toggeltext);
             if (divelement.style.display == "block")
             {
                 divelement.style.display = "none";
                 lbltext.innerHTML = "+ Show Orders";
             }
             else
             {
                 divelement.style.display = "block";
                 lbltext.innerHTML = "- Hide Orders";
             }
         }
</script>
--------------------------------------

Now write following code on server side:
--------------------------------------

namespace nestedGrid
{
    public partial class Form1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!this.IsPostBack)
            {
                LoadParentGrid();
            }

        }

        private void LoadParentGrid()
        {
     
                DataSet ds = GetDataSet("Select * from Customer");
                GridParent.DataSource = ds;
                GridParent.DataBind();
        }

        private DataSet GetDataSet(string query)
        {
            DataSet Ds = new DataSet();
            try
            {
                string strCon = @"Data Source=User-PC\SQLEXPRESS;Initial Catalog=Student;Integrated Security=True;";
                SqlConnection Con = new SqlConnection(strCon);
                SqlDataAdapter Da = new SqlDataAdapter(query, Con);
                Da.Fill(Ds);
            }
            catch (Exception) { }
            return Ds;
        }

        protected void GridParent_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                HiddenField custID = (HiddenField)e.Row.FindControl("lblCustomerID");
                Label lblToggle = (Label)e.Row.FindControl("lbltoggel");
                GridView gvChild = (GridView)e.Row.FindControl("GridChild");
                int customerid = Convert.ToInt32(custID.Value);
                LoadChildGrid(customerid, gvChild);
                lblToggle.Attributes.Add("onClick", "toggle('" + gvChild.ClientID + "' ,'" + lblToggle.ClientID + "');");
            }
        }

        private void LoadChildGrid(int custId, GridView gvChild)
        {
            try
            {
                DataSet Ds = GetDataSet("SELECT *  FROM [student].[dbo].[Order] where CustomerId=" + custId);
                gvChild.DataSource = Ds;
                gvChild.DataSourceID = null;
                gvChild.DataBind();
            }
            catch (Exception) { }
        }
    }
}






No comments:

Post a Comment