I'm using the following solution for my grid: link
This solution causes a grid to appear and unravel as it is clicked on the image that causes the effect (expand and collapse).
So everything works perfectly the demo example of the aspsnippets site, the problem was when I added in my columns and in the sub grid the sorting event that needs to call the DataBind () method to update the data in the sort order.
After I click on a column to sort it, it does the postback and closes the expand by subturning the sub grid again.
I would like to know if anyone knows how I can maintain the current state of the grid after the postback, example I want the ones that were open to remain open and the ones that are closed remain closed.
Thank you.
Here is the complete code: Aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm001.aspx.cs" Inherits="WebApplication0001.WebForm001" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><scripttype="text/javascript">
$("[src*=plus]").live("click", function () {
$(this).closest("tr").after("<tr><td></td><td colspan = '2'>" + $(this).next().html() + "</td></tr>")
$(this).attr("src", "images/minus.png");
});
$("[src*=minus]").live("click", function () {
$(this).attr("src", "images/plus.png");
$(this).closest("tr").next().remove();
});
</script>
<style>
.Principal th {
background-color: Gray;
}
.Detalhe {
margin: 10px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" />
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:GridView ID="gvPrincipal" runat="server" AutoGenerateColumns="false" CssClass="Principal"
DataKeyNames="Codigo" OnRowDataBound="gvPrincipal_RowDataBound"
OnSorting="gvPrincipal_Sorting" AllowSorting="true">
<Columns>
<asp:TemplateField ItemStyle-Width="50">
<ItemTemplate>
<img alt="" style="cursor: pointer" src="plus" />
<asp:Panel ID="pnlDetalhe" runat="server" Style="display: none">
<asp:GridView ID="gvDetalhe" runat="server" AutoGenerateColumns="false" CssClass="Detalhe"
OnSorting="gvDetalhe_Sorting" AllowSorting="true">
<Columns>
<asp:BoundField ItemStyle-Width="150px" DataField="Principal.Codigo" HeaderText="Principal.Codigo" />
<asp:BoundField ItemStyle-Width="150px" DataField="Codigo" HeaderText="Codigo" SortExpression="Codigo" />
<asp:BoundField ItemStyle-Width="150px" DataField="Descricao" HeaderText="Descricao" SortExpression="Descricao" />
</Columns>
</asp:GridView>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField ItemStyle-Width="150px" DataField="Codigo" HeaderText="Codigo" SortExpression="Codigo" />
<asp:BoundField ItemStyle-Width="150px" DataField="Descricao" HeaderText="Descricao" SortExpression="Descricao" />
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
Follow the complete C # code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApplication0001
{
public class Principal
{
public int Codigo { get; set; }
public string Descricao { get; set; }
}
public class Detalhe
{
public int Codigo { get; set; }
public string Descricao { get; set; }
public Principal Principal { get; set; }
}
public partial class WebForm001 : System.Web.UI.Page
{
public static List<Principal> LstPrincipal;
public static List<Detalhe> LstDetalhe;
public static SortDirection SortDirecaoPrincipal;
public static SortDirection SortDirecaoDetalhe;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
PreenchePrincipal();
PreencheDetalhe();
gvPrincipal.DataSource = LstPrincipal;
gvPrincipal.DataBind();
}
}
private void PreenchePrincipal()
{
List<Principal> lstPrincipal = new List<Principal>()
{
new Principal(){ Codigo = 1, Descricao = "Principal 01"},
new Principal(){ Codigo = 2, Descricao = "Principal 02"}
};
LstPrincipal = new List<Principal>();
LstPrincipal = lstPrincipal;
}
private void PreencheDetalhe()
{
List<Detalhe> lstDetalhe = new List<Detalhe>()
{
new Detalhe(){ Codigo = 1, Descricao = "Detalhe 01", Principal = new Principal() { Codigo = 1}},
new Detalhe(){ Codigo = 2, Descricao = "Detalhe 02", Principal = new Principal() { Codigo = 1}},
new Detalhe(){ Codigo = 3, Descricao = "Detalhe 03", Principal = new Principal() { Codigo = 2}},
new Detalhe(){ Codigo = 4, Descricao = "Detalhe 04", Principal = new Principal() { Codigo = 2}},
new Detalhe(){ Codigo = 5, Descricao = "Detalhe 05", Principal = new Principal() { Codigo = 2}}
};
LstDetalhe = new List<Detalhe>();
LstDetalhe = lstDetalhe;
}
protected void gvPrincipal_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
int codigo = Convert.ToInt32(gvPrincipal.DataKeys[e.Row.RowIndex].Value);
GridView gvDetalhe = e.Row.FindControl("gvDetalhe") as GridView;
gvDetalhe.DataSource = LstDetalhe.Where(p => p.Principal.Codigo == codigo).ToList();
gvDetalhe.DataBind();
}
}
protected void gvPrincipal_Sorting(object sender, GridViewSortEventArgs e)
{
if (e.SortExpression == "Codigo")
{
if (SortDirecaoPrincipal == SortDirection.Ascending)
{
SortDirecaoPrincipal = SortDirection.Descending;
gvPrincipal.DataSource = LstPrincipal.OrderBy(p => p.Codigo).ToList();
gvPrincipal.DataBind();
}
else
{
SortDirecaoPrincipal = SortDirection.Ascending;
gvPrincipal.DataSource = LstPrincipal.OrderByDescending(p => p.Codigo).ToList();
gvPrincipal.DataBind();
}
}
else if (e.SortExpression == "Descricao")
{
if (SortDirecaoPrincipal == SortDirection.Ascending)
{
SortDirecaoPrincipal = SortDirection.Descending;
gvPrincipal.DataSource = LstPrincipal.OrderBy(p => p.Descricao).ToList();
gvPrincipal.DataBind();
}
else
{
SortDirecaoPrincipal = SortDirection.Ascending;
gvPrincipal.DataSource = LstPrincipal.OrderByDescending(p => p.Descricao).ToList();
gvPrincipal.DataBind();
}
}
}
protected void gvDetalhe_Sorting(object sender, GridViewSortEventArgs e)
{
GridView gvDetalhe = (GridView)sender;
int principalCodigo = Convert.ToInt32(gvDetalhe.Rows[0].Cells[0].Text);
if (e.SortExpression == "Codigo")
{
if (SortDirecaoDetalhe == SortDirection.Ascending)
{
SortDirecaoDetalhe = SortDirection.Descending;
gvDetalhe.DataSource = LstDetalhe.Where(p => p.Principal.Codigo == principalCodigo).ToList().OrderBy(p => p.Codigo).ToList();
gvDetalhe.DataBind();
}
else
{
SortDirecaoDetalhe = SortDirection.Ascending;
gvDetalhe.DataSource = LstDetalhe.Where(p => p.Principal.Codigo == principalCodigo).ToList().OrderByDescending(p => p.Codigo).ToList();
gvDetalhe.DataBind();
}
}
else if (e.SortExpression == "Descricao")
{
if (SortDirecaoDetalhe == SortDirection.Ascending)
{
SortDirecaoDetalhe = SortDirection.Descending;
gvDetalhe.DataSource = LstDetalhe.Where(p => p.Principal.Codigo == principalCodigo).ToList().OrderBy(p => p.Descricao).ToList();
gvDetalhe.DataBind();
}
else
{
SortDirecaoDetalhe = SortDirection.Ascending;
gvDetalhe.DataSource = LstDetalhe.Where(p => p.Principal.Codigo == principalCodigo).ToList().OrderByDescending(p => p.Descricao).ToList();
gvDetalhe.DataBind();
}
}
}
}
}