.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> ASP.NET >> Post New Resource Bookmark and Share   

 Subscribe to Articles

How to expand and collapse a row inside a grid view in ASP.NET

Posted By:Ashutosh Jha       Posted Date: March 30, 2014    Points: 200    Category: ASP.NET    URL: http://www.dotnetspark.com  

In this article i am going to explain how we can create expand/collapse functionality inside grid view. With this we can see the details of the particular row with good looking too !!
 

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

Use javascript for expand/collapse functionality inside a gridview.

  <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>

And the gridview of .aspx page will be like below-

<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>               

And the aspx.cs page will be like below-

 

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();          

        }

    }

 


 Subscribe to Articles

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend