Often We need nested gridview.
Like showing parent-child relationship in gridview.
I created 2 tables Customer(CustomerID as int,CustomerName as varchar(50)) and Order(Orderid as int,description as varchar(50),CustomerId as Foreign key to Customer).
Enter code into HTML source:
----------------------------------
<asp:GridView ID="GridParent" runat="server" AutoGenerateColumns="False"
OnRowDataBound="GridParent_RowDataBound" CellPadding="4" ForeColor="#333333"
GridLines="None" Width="384px" Height="183px">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<Columns>
<asp:TemplateField HeaderText="ID">
<ItemTemplate>
<asp:Label ID="lblID" Text='<%# Eval("CustomerID") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Customer Name">
<ItemTemplate>
<asp:Label ID="lblName" Text='<%# Eval("CustomerName") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Orders">
<ItemTemplate>
<asp:Label ID="lbltoggel" runat="server" >+Orders</asp:Label>
<asp:HiddenField ID="lblCustomerID" value='<%# Eval("CustomerID") %>' runat="server"></asp:HiddenField>
<asp:GridView ID="GridChild" runat="server" style="display:block" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="Order No">
<ItemTemplate>
<asp:Label ID="lblOrderID" Text='<%# Eval("Orderid") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Description">
<ItemTemplate>
<asp:Label ID="lblTotal" Text='<%# Eval("description") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:gridview>
----------------------------------
Now create this javascript :(It is for expanding Show or Hide child grid/Order Details)
----------------------------------
<script type="text/javascript" language="javascript">
function toggle(toggeldivid, toggeltext)
{
var divelement = document.getElementById(toggeldivid);
var lbltext = document.getElementById(toggeltext);
if (divelement.style.display == "block")
{
divelement.style.display = "none";
lbltext.innerHTML = "+ Show Orders";
}
else
{
divelement.style.display = "block";
lbltext.innerHTML = "- Hide Orders";
}
}
</script>
--------------------------------------
Now write following code on server side:
--------------------------------------
namespace nestedGrid
{
public partial class Form1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
LoadParentGrid();
}
}
private void LoadParentGrid()
{
DataSet ds = GetDataSet("Select * from Customer");
GridParent.DataSource = ds;
GridParent.DataBind();
}
private DataSet GetDataSet(string query)
{
DataSet Ds = new DataSet();
try
{
string strCon = @"Data Source=User-PC\SQLEXPRESS;Initial Catalog=Student;Integrated Security=True;";
SqlConnection Con = new SqlConnection(strCon);
SqlDataAdapter Da = new SqlDataAdapter(query, Con);
Da.Fill(Ds);
}
catch (Exception) { }
return Ds;
}
protected void GridParent_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
HiddenField custID = (HiddenField)e.Row.FindControl("lblCustomerID");
Label lblToggle = (Label)e.Row.FindControl("lbltoggel");
GridView gvChild = (GridView)e.Row.FindControl("GridChild");
int customerid = Convert.ToInt32(custID.Value);
LoadChildGrid(customerid, gvChild);
lblToggle.Attributes.Add("onClick", "toggle('" + gvChild.ClientID + "' ,'" + lblToggle.ClientID + "');");
}
}
private void LoadChildGrid(int custId, GridView gvChild)
{
try
{
DataSet Ds = GetDataSet("SELECT * FROM [student].[dbo].[Order] where CustomerId=" + custId);
gvChild.DataSource = Ds;
gvChild.DataSourceID = null;
gvChild.DataBind();
}
catch (Exception) { }
}
}
}
Like showing parent-child relationship in gridview.
I created 2 tables Customer(CustomerID as int,CustomerName as varchar(50)) and Order(Orderid as int,description as varchar(50),CustomerId as Foreign key to Customer).
Enter code into HTML source:
----------------------------------
<asp:GridView ID="GridParent" runat="server" AutoGenerateColumns="False"
OnRowDataBound="GridParent_RowDataBound" CellPadding="4" ForeColor="#333333"
GridLines="None" Width="384px" Height="183px">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<Columns>
<asp:TemplateField HeaderText="ID">
<ItemTemplate>
<asp:Label ID="lblID" Text='<%# Eval("CustomerID") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Customer Name">
<ItemTemplate>
<asp:Label ID="lblName" Text='<%# Eval("CustomerName") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Orders">
<ItemTemplate>
<asp:Label ID="lbltoggel" runat="server" >+Orders</asp:Label>
<asp:HiddenField ID="lblCustomerID" value='<%# Eval("CustomerID") %>' runat="server"></asp:HiddenField>
<asp:GridView ID="GridChild" runat="server" style="display:block" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="Order No">
<ItemTemplate>
<asp:Label ID="lblOrderID" Text='<%# Eval("Orderid") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Description">
<ItemTemplate>
<asp:Label ID="lblTotal" Text='<%# Eval("description") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:gridview>
----------------------------------
Now create this javascript :(It is for expanding Show or Hide child grid/Order Details)
----------------------------------
<script type="text/javascript" language="javascript">
function toggle(toggeldivid, toggeltext)
{
var divelement = document.getElementById(toggeldivid);
var lbltext = document.getElementById(toggeltext);
if (divelement.style.display == "block")
{
divelement.style.display = "none";
lbltext.innerHTML = "+ Show Orders";
}
else
{
divelement.style.display = "block";
lbltext.innerHTML = "- Hide Orders";
}
}
</script>
--------------------------------------
Now write following code on server side:
--------------------------------------
namespace nestedGrid
{
public partial class Form1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
LoadParentGrid();
}
}
private void LoadParentGrid()
{
DataSet ds = GetDataSet("Select * from Customer");
GridParent.DataSource = ds;
GridParent.DataBind();
}
private DataSet GetDataSet(string query)
{
DataSet Ds = new DataSet();
try
{
string strCon = @"Data Source=User-PC\SQLEXPRESS;Initial Catalog=Student;Integrated Security=True;";
SqlConnection Con = new SqlConnection(strCon);
SqlDataAdapter Da = new SqlDataAdapter(query, Con);
Da.Fill(Ds);
}
catch (Exception) { }
return Ds;
}
protected void GridParent_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
HiddenField custID = (HiddenField)e.Row.FindControl("lblCustomerID");
Label lblToggle = (Label)e.Row.FindControl("lbltoggel");
GridView gvChild = (GridView)e.Row.FindControl("GridChild");
int customerid = Convert.ToInt32(custID.Value);
LoadChildGrid(customerid, gvChild);
lblToggle.Attributes.Add("onClick", "toggle('" + gvChild.ClientID + "' ,'" + lblToggle.ClientID + "');");
}
}
private void LoadChildGrid(int custId, GridView gvChild)
{
try
{
DataSet Ds = GetDataSet("SELECT * FROM [student].[dbo].[Order] where CustomerId=" + custId);
gvChild.DataSource = Ds;
gvChild.DataSourceID = null;
gvChild.DataBind();
}
catch (Exception) { }
}
}
}
No comments:
Post a Comment