In this article I’m going to explain how to create GridView inside DetailsView with expand collapse in ASP.NET

          I have already written few articles for creating nested GridView and Multilevel nested GridView with expand collapse functionality in ASP.NET. Please follow these links given below

            Nested GridView in ASP.NET

            Multilevel nested GridView in ASP.NET

          Here I’ll explain how to create GridView inside DetailsView with expand collapse functionality.

DetailsView displays the values of a single record from a data source in a table, where each data row represents a field of the record. So I have used DetailsView to display single record against parent row in GridView.  

In this demo I have used Northwind database. You can download Northwind database by follow the link given below

http://northwinddatabase.codeplex.com/releases/view/71634

 In Northwind database we have tables [Order] and [Order Details].

Table Design [Order] :):

Column Name

Data Type

OrderID

Int

CustomerID

nchar(5)

OrderDate

Datetime

ShippedDate

Datetime

ShipName

varchar(50)

 

Table Design [Order Details] :):

Column Name

Data Type

OrderID

Int

ProductID

Int

UnitPrice

Money

Quantity

Smallint

Discount

Real

 

 Expand Collapse:

         I’ve used JavaScript function for expand collapse functionality to the GridView. Sample code is given below

    <script language="javascript" type="text/javascript">

        function divexpandcollapse(divname) {

            var div = document.getElementById(divname);

            var img = document.getElementById('img' + divname);

            if (div.style.display == "none") {

                div.style.display = "inline";

                img.src = "Images/minus.gif";

            } else {

                div.style.display = "none";

                img.src = "Images/plus.gif";

            }

        }

    </script>

In we.config  file we have to set connection string

Sample code: 

<connectionStrings>

        <add name="ConnectionString" connectionString="Data Source=localhost;   Initial Catalog=Demo; Integrated Security=True"/>

</connectionStrings>

Designer source code:

 

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

<!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 runat="server">

    <title>Gridview inside DetailsView</title>

    <script language="javascript" type="text/javascript">

        function divexpandcollapse(divname) {

            var div = document.getElementById(divname);

            var img = document.getElementById('img' + divname);

            if (div.style.display == "none") {

                div.style.display = "inline";

                img.src = "Images/minus.gif";

            } else {

                div.style.display = "none";

                img.src = "Images/plus.gif";

            }

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>    

        <asp:GridView ID="gvOrders" runat="server" AutoGenerateColumns="false" Width="600px"

             OnRowDataBound="gvOrders_OnRowDataBound">

            <Columns>

                <asp:TemplateField ItemStyle-Width="20px">

                    <ItemTemplate>

                        <a href="JavaScript:divexpandcollapse('div<%# Eval("OrderID") %>');">

                            <img id="imgdiv<%# Eval("OrderID") %>" width="9px" border="0" src="Images/plus.gif"

                                alt="" /></a>                       

                    </ItemTemplate>

                    <ItemStyle Width="20px" VerticalAlign="Middle"></ItemStyle>

                </asp:TemplateField>

                <asp:TemplateField HeaderText="Order ID">

                <ItemTemplate>

                 <asp:Label ID="lblorderID" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "OrderID") %>'></asp:Label>

                </ItemTemplate>

                </asp:TemplateField>               

                <asp:BoundField DataField="CustomerID" HeaderText="Customer ID" />

                <asp:BoundField DataField="OrderDate" HeaderText="Order Date" />

                <asp:BoundField DataField="ShippedDate" HeaderText="Shipped Date" />               

                <asp:BoundField DataField="ShipName" HeaderText="Ship Name" />                          

                <asp:TemplateField>

                    <ItemTemplate>

                        <tr>

                           <td colspan="100%" style="background:#F5F5F5">

                             <div id="div<%# Eval("OrderID") %>"  style="overflow:auto; display:none; position: relative; left: 15px; overflow: auto">

                               <asp:DetailsView id="DetailsView1" DataKeyNames="OrderID" Runat="server" Width="300px" Font-Names="Calibri"/>                              

                            </td>

                        </tr>

                    </ItemTemplate>

                </asp:TemplateField>

            </Columns>             

            <HeaderStyle BackColor="#3E3E3E" ForeColor="White" Font-Names="Calibri"/>

            <RowStyle Font-Names="Calibri"/>

        </asp:GridView>                

        </div>

    </form>

</body>

</html>

 

C# code:

 

using System;

using System.Collections.Generic;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.Data.SqlClient;

using System.Configuration;

 

public partial class _Default : System.Web.UI.Page

{

    SqlConnection conn = new SqlConnection (ConfigurationManager.ConnectionStrings["ConnectionString"].ToString());

    protected void Page_Load(object sender, EventArgs e)

    {      

        if (!IsPostBack)

        {           

            BindGrid();

        }

    }

 

    protected void BindGrid()

    {

        DataSet ds = new DataSet();       

        conn.Open();

        string cmdstr = "Select OrderID,CustomerID,convert(varchar(10),OrderDate,103) OrderDate,convert(varchar(10),ShippedDate,103) ShippedDate,ShipName from Orders";

        SqlCommand cmd = new SqlCommand(cmdstr, conn);

        SqlDataAdapter adp = new SqlDataAdapter(cmd);

        adp.Fill(ds);       

        conn.Close();

        gvOrders.DataSource = ds;

        gvOrders.DataBind();

      

    }

    protected void gvOrders_OnRowDataBound(object sender, GridViewRowEventArgs e)

    {

        if (e.Row.RowType == DataControlRowType.DataRow)

        {

            Label lblorderID = (Label)e.Row.FindControl("lblorderID");

            DetailsView DetailsView1 = (DetailsView)e.Row.FindControl("DetailsView1");

            string orderID = lblorderID.Text;

            DataSet ds = new DataSet();

            conn.Open();

            string cmdstr = "Select * from [Order Details] where OrderID=@OrderID";

            SqlCommand cmd = new SqlCommand(cmdstr, conn);

            cmd.Parameters.AddWithValue("@OrderID", orderID);

            SqlDataAdapter adp = new SqlDataAdapter(cmd);

            adp.Fill(ds);

            cmd.ExecuteNonQuery();

            conn.Close();

            DetailsView1.DataSource = ds;

            DetailsView1.DataBind();           

        }

    }

}

 

cytotec abortion

abortion pill online buy abortion pills online
medical abortion pill online abortion pill abortion pill


View demo Download
http://www.dotnetfox.com/Document/1085/0Demo1.gif

If you enjoyed this article, get email updates (it's free).


Related Articles
  • How to add edit delete update records in Grid view ASP.NET Introduction: In this article i'm going to explain how to add delete edit records in Grid view. Description: If we want to add delete edit records in grid view we should use following grid view events, 1. onrowcommand 2. onrowdeleting 3. onrowupdating 4. onrowcancelingedit 5. onrowediting Also we should use following template field in Grid View. 1.ItemTemplate : ItemTemplate is used to display rec...
  • How to insert edit delete update records in Grid view using WCF In this article i'm going to explain how to insert records using WCF. Windows Communication Foundation (WCF) is an extension of the .NET framework to build and run connected systems. Windows Communication Foundation provides a unified framework for building secure and reliable transacted Web services. Windows Communication Foundation combines and extends the capabilities of Distributed System...
  • File Upload in Gridview ASP.NETIn this article I’m going to explain how to use file upload control in grid view for uploading images or files to the server. The FileUpload control allows you to provide users with a way to send a file from their computer to the server. The control is useful for allowing users to upload images, text files or other files. Here I’ll show you how to use file upload control in gridview to upload the ...
  • Check or Uncheck all check box in ASP.NET Gridview using JavaScriptIn this article I’m going to explain how to add CheckBox control in Gridview to Check or Uncheck all checkbox using JavaScript. To implement this concept we have to add one Checkbox control in Gridview header template and one more checkbox control in Gridview item template. here we need to use javascript to avoid postback and change gridview row color if checkbox was checked or unchecked.
  • Insert delete update records in XML file -ASP.NET using c# In this article I’m going to explain how to insert delete update records in XML file using ASP.NET and C#. XML was created to structure, store and transport data. What is XML? XML stands for EXtensible Markup Language XML is a markup language much like HTML XML was designed to carry data, not to display data XML tags are not predefined. You must define your own tags
  • How to use DropDownList control to GridView in ASP.NET using c# In this article I’m going to explain how to use DropDownList control in ASP.NET using C#. ASP.NET allows you to use any server controls in GridView. In this article I’ll show you how to use DropDownList control in GridView. DropDownList can be used to select only one item at a time item. It’s very easy to use DropDownList control in GridView. We need to use OnRowDataBound event to bind DropDownLis...
  • Export GridView data to excel using ASP.NET and c# In this article I’m going to explain how to export GridView data to excel using ASP.NET and C#. Sometimes we need to export gridview data to excel. Here I’ll show you how to export GridView data to Excel by using RkLib ExportData. RKLib ExportData is a class library used to export data to excel. So here we have to create table and fetch the records to DataTable and we can export to excel.
  • How to use Ajax CalenderExtender in ASP.NET GridViewIn this article I’m going to explain how to use Ajax CalenderExtender in ASP.NET GridView. Today one of my blog subscriber asked me a question that’s how to use Ajax CalenderExtender in ASP.NET GridView. I hope you already know how to use Ajax CalenderExtender in normal page. There is no different to use Ajax CalenderExtender in normal page and GridView.
  • Create dynamic GridView or programmatically create ASP.NET GridView with dynamic BoundField In this article I’m going to explain how to create dynamic GridView or programmatically create GridView with dynamic BoundField in ASP.NET using C#. In some scenario it is necessary to create dynamic GridView with BoundField instead of static one. Here I’ll explain how to create dynamic GridView which includes dynamic BoundFiled, apply custom styles to header row and data row. After creating dyna...
  • How to export GridView data to PDF document in ASP.NET with C# using iTextSharpIn this article I’m going to explain how to export GridView to PDF document. Other articles related to iTextSharp. iTextSharp is a C# port of iText, and open source Java library for PDF generation and manipulation. It can be used to create PDF documents from scratch, to convert XML to PDF (using the extra XFA Worker DLL), to fill out interactive PDF forms, to stamp new content on existing PDF doc...

Comments
comments powered by Disqus

Thanks for downloading..!!

×
Subscribe via Email
    
message to display in fancybox