How To Expand and Collapse a row within the GridView control.

bysantosh •
0 

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
  string CreateID(object value)
  {
      return "Table_" + value.ToString();
  }

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">

  <script language="javascript" type="text/javascript">
      function OpenTable(table, img)
      {
          object = document.getElementById(table);
          if (object.style.display=="")
          {
              object.style.display = "none";
              img.src = "add.gif";
          }
          else
          {
              object.style.display = "";
              img.src = "up.gif";
          }

      }

  </script>

  <title>Untitled Page</title>
</head>
<body>
  <form id="form1" runat="server">
      <div>
          <asp:GridView ID="GridView1" runat="server" DataKeyNames="Id" AutoGenerateColumns="False"
              BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px"
              CellPadding="3">
              <Columns>
                  <asp:TemplateField SortExpression="Id" HeaderText="Id">
                      <ItemTemplate>
                          <a href="#" onclick='OpenTable("<%# CreateID(Eval("Id"))%>", this);' style="text-decoration: none;">
                              +</a>
                          <%--<img src="add.gif" onclick='OpenTable("<%# CreateID(Eval("Id"))%>", this);' alt="expand" />--%>
                          <asp:Label runat="server" Text='<%# Bind("Id") %>' ID="Label1"></asp:Label>
                          <br />
                          <table width="100%" style="display: none;" id='<%# CreateID(Eval("Id"))%>'>
                              <div style="background-color: Fuchsia; width: auto; height: 200px; display: none;"
                                  id="a">
                                  <tr>
                                      <td>
                                          <asp:Label runat="server" Text='<%# Bind("Column2") %>' ID="Label2"></asp:Label>
                                      </td>
                                      <td>
                                          <asp:Label runat="server" Text='<%# Bind("Column3") %>' ID="Label3"></asp:Label>
                                      </td>
                                      <td>
                                          <asp:Label runat="server" Text='<%# Bind("Column4") %>' ID="Label4"></asp:Label>
                                      </td>
                                      <td>
                                          <asp:Label runat="server" Text='<%# Bind("Column5") %>' ID="Label5"></asp:Label>
                                      </td>
                              </div>
                          </table>
                      </ItemTemplate>
                  </asp:TemplateField>
              </Columns>
              <FooterStyle BackColor="White" ForeColor="#000066" />
              <RowStyle ForeColor="#000066" />
              <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
              <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
              <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
          </asp:GridView>
      </div>
  </form>
</body>
</html>

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class Collapse : System.Web.UI.Page
{
  protected void Page_Load(object sender, EventArgs e)
  {
      if (!IsPostBack)
      {
          if (Session["Temp"] != null)
          {

              GridView1.DataSource = Session["s"] as DataTable;

              GridView1.DataBind();


          }
          else
          {
              GridView1.DataSource = GetCustomMadeDataTable();


              GridView1.DataBind();
          }
      }

  }
  public DataTable GetCustomMadeDataTable()
  {

      //Create a new DataTable object

      System.Data.DataTable objDataTable = new System.Data.DataTable();

      //Create three columns with string as their type

      objDataTable.Columns.Add("Id", typeof(string));
      objDataTable.Columns.Add("Column2", typeof(string));
      objDataTable.Columns.Add("Column3", typeof(string));
      objDataTable.Columns.Add("Column4", typeof(string));
      objDataTable.Columns.Add("Column5", typeof(string));

      //Adding some data in the rows of this DataTable
      objDataTable.Rows.Add(new string[] { "1", "R1C1 ", " Column3", "Test", "Test" });
      objDataTable.Rows.Add(new string[] { "2", "R1C1 ", " Column3", "Test", "Test" });
      objDataTable.Rows.Add(new string[] { "3", "R1C1 ", " Column3", "Test", "Test" });
      objDataTable.Rows.Add(new string[] { "4", "R1C1 ", " Column3", "Test", "Test" });
      objDataTable.Rows.Add(new string[] { "5", "R1C1 ", " Column3", "Test", "Test" });
      objDataTable.Rows.Add(new string[] { "6", "R1C1 ", " Column3", "Test", "Test" });
      objDataTable.Rows.Add(new string[] { "7", "R1C1 ", " Column3", "Test", "Test" });
      objDataTable.Rows.Add(new string[] { "8", "R1C1 ", " Column3", "Test", "Test" });
      objDataTable.Rows.Add(new string[] { "9", "R1C1 ", " Column3", "Test", "Test" });
      objDataTable.Rows.Add(new string[] { "10", "R1C1 ", " Column3", "Test", "Test" });
      objDataTable.Rows.Add(new string[] { "11", "R1C1 ", " Column3", "Test", "Test" });
      objDataTable.Rows.Add(new string[] { "12", "R1C1 ", " Column3", "Test", "Test" });
      objDataTable.Rows.Add(new string[] { "13", "R1C1 ", " Column3", "Test", "Test" });
      objDataTable.Rows.Add(new string[] { "14", "R1C1 ", " Column3", "Test", "Test" });
      objDataTable.Rows.Add(new string[] { "15", "R1C1 ", " Column3", "Test", "Test" });
      objDataTable.Rows.Add(new string[] { "16", "R1C1 ", " Column3", "Test", "Test" });
      objDataTable.Rows.Add(new string[] { "17", "R1C1 ", " Column3", "Test", "Test" });
      objDataTable.Rows.Add(new string[] { "18", "R1C1 ", " Column3", "Test", "Test" });
      objDataTable.Rows.Add(new string[] { "19", "R1C1 ", " Column3", "Test", "Test" });
      DataColumn[] dcPk = new DataColumn[1];
      dcPk[0] = objDataTable.Columns["Id"];
      objDataTable.PrimaryKey = dcPk;
      Session["Temp"] = objDataTable;


      return objDataTable;
  }

}
Tags:

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

Post a Comment (0)
Previous Post Next Post