1
I am using the following solution for my grid: http://www.aspsnippets.com/Articles/Build-Master-Detail-GridView-using-jQuery-in-ASPNet.aspx
This solution makes a grid appear and unlearn as it is clicked on the image that causes the effect (expand and Collapse).
Until then everything works perfectly like the demo example of the aspsnippets site, the problem was when I added in my columns and in the sub grid the event for Sorting that needs to call the Databind() method to update the data in the sorting.
After I click on a column to sort it does the postback and closes the expand by searching again the sub grid.
I wonder if anyone knows how I can maintain the current state of the grid after postback, example I want what were open to remain open and what are open remain closed.
Note: The ordering works normal, the only problem is that it has the bother of opening the expand again, I have already used Updatepanel and also not solved.
Thank you.
Follow 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>
<script type="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 code of c#
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();
}
}
}
}
}
Could you please post your code there? @Mauricio Ferraz
– PauloHDSousa
Yes, I will prepare the code only the necessary and add it here in the post
– Mauricio Ferraz
@Paulohdsousa follows the complete code, if you can help I thank you. Hug.
– Mauricio Ferraz