Expandable GridView with simple JavaScript
In this article I'm trying to explain how to expand gridview when there is nested information with simple JavaScript code. Previously I post few articles for the same by using Jquery now I written by using JavaScript. This will help you those who are looking for the same.
Expandable GridView with simple JavaScript:
Description :
In this article I'm trying to explain how to expand gridview when there is nested information with simple JavaScript code. Previously I post few articles for the same by using Jquery now I written by using JavaScript. This will help you those who are looking for the same.JavaScript Script :
<script language="javascript" type="text/javascript">
function Expand_Collapse(divId) {
var divId = document.getElementById(divId);
var imgId = document.getElementById('img' + divId);
if (divId.style.display == "none") {
divId.style.display = "inline";
imgId.src = "Images/minus.png";
} else {
divId.style.display = "none";
imgId.src = "Images/plus.png";
}
}
</script>
Source Code :
<div id="Div1" style="clear: both; width: 100%;">
<table id="GirdViewTable" width="99%">
<tr>
<td class="firstCell" align="center" colspan="5">
<asp:GridView ID="gvContract_Admin" runat="server" Height="100%" GridLines="None"AutoGenerateColumns="False" Width="100%"
<b><h3>OnRowDataBound="gvContract_Admin_OnRowDataBound"</b></h3>
>
<AlternatingRowStyle BackColor="#FFFFFF" Height="16px" />
<FooterStyle BackColor="White" ForeColor="Black" Height="100%" />
<HeaderStyle BackColor="#0066CC" Font-Bold="True" ForeColor="White" Height="20px" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<RowStyle BackColor="#D3DFEE" ForeColor="Black" Height="16px" />
<SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F1F1F1" />
<SortedAscendingHeaderStyle BackColor="#0000A9" />
<SortedDescendingCellStyle BackColor="#CAC9C9" />
<SortedDescendingHeaderStyle BackColor="#000065" />
<Columns>
<asp:TemplateField HeaderText="Contract Status" SortExpression="Contract_Status">
<ItemTemplate>
<asp:LinkButton ID="lnkContract_Status" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"Contract_Status") %>'
CommandName="Contract" CommandArgument='<%#DataBinder.Eval(Container.DataItem,"Contract_Admin_Id") %>'></asp:LinkButton>
</ItemTemplate>
<ItemStyle HorizontalAlign="Left" />
</asp:TemplateField>
<asp:BoundField DataField="Contract_Effective_Date" HeaderText="Contract Effective Date"
SortExpression="Contract_Effective_Date" DataFormatString="{0:MM/dd/yyyy}" ItemStyle-HorizontalAlign="Center" />
<asp:BoundField DataField="Contract_Exp_Date" HeaderText="Contract Expiry Date" SortExpression="Contract_Exp_Date"
DataFormatString="{0:MM/dd/yyyy}" ItemStyle-HorizontalAlign="Center" />
<asp:BoundField DataField="Extended_Exp_Date" HeaderText="Extended Expiry Date" SortExpression="Extended_Exp_Date"
DataFormatString="{0:MM/dd/yyyy}" ItemStyle-HorizontalAlign="Center" />
<asp:TemplateField HeaderText="Primary Segment Name" SortExpression="Primary_Segment_Name">
<ItemTemplate>
<asp:LinkButton ID="lnkPrimary_Segment_Name" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"Primary_Segment_Name") %>'
CommandName="Contract" CommandArgument='<%#DataBinder.Eval(Container.DataItem,"Contract_Admin_Id") %>'></asp:LinkButton>
</ItemTemplate>
<ItemStyle HorizontalAlign="Left" />
</asp:TemplateField>
<asp:BoundField DataField="Created_On" HeaderText="Created On" SortExpression="Created_On"
DataFormatString="{0:MM/dd/yyyy}" />
<b><h3><asp:TemplateField>
<ItemTemplate>
<a href="<b><h3>JavaScript: Expand_Collapse('div<%# Eval("Contract_Admin_Id") %>');" </b></h3>>
<<b><h3>img id="imgdiv<%# Eval("Contract_Admin_Id") %>" width="25px" border="0" src="Images/plus.png"</b></h3> />
</a>
<tr>
<td colspan="100%">
<<b><h3>div id="div<%# Eval("Contract_Admin_Id") %>" style="display: none; position: relative;
left: 15px; overflow: auto"</b></h3>>
<table width="100%">
<tr>
<td align="left" style="color: Blue; font-weight: bold;">
Amendments :
</td>
</tr>
<tr>
<td>
<asp:GridView Height="100%" runat="server" ID="gvAmendments" AutoGenerateColumns="False"
EmptyDataText="No Records Found" HeaderStyle-BackColor="#DADADA" ShowHeaderWhenEmpty="True"
Width="95%" BackColor="White" BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px"
CellPadding="4" GridLines="Vertical" ForeColor="Black" OnRowCommand="gvClm_OnRowCommand"
DataKeyNames="Contract_Admin_Id" OnRowDataBound="gvAmendments_OnRowDataBound">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField HeaderText="Contract Caption">
<ItemTemplate>
<asp:LinkButton ID="lnkCaption" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"Contract_Caption") %>'
CommandName="Amendments" CommandArgument='<%#DataBinder.Eval(Container.DataItem,"Contract_Admin_Id") %>'></asp:LinkButton>
</ItemTemplate>
<HeaderStyle Width="25%" />
<ItemStyle Width="25%" HorizontalAlign="Left" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Contract Status">
<ItemTemplate>
<asp:LinkButton ID="lnkContract_Status" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"Contract_Status") %>'
CommandName="Amendments" CommandArgument='<%#DataBinder.Eval(Container.DataItem,"Contract_Admin_Id") %>'></asp:LinkButton>
</ItemTemplate>
<ItemStyle Width="25%" HorizontalAlign="Left" />
<HeaderStyle Width="25%" />
</asp:TemplateField>
<asp:BoundField DataField="Effective_Date" DataFormatString="{0:M/dd/yyyy}" HeaderText="Contract Effective Date"
HeaderStyle-Width="25%" ItemStyle-Width="25%" />
<asp:BoundField DataField="Expiry_Date" DataFormatString="{0:M/dd/yyyy}" HeaderText="Contract Expiry Date"
HeaderStyle-Width="20%" ItemStyle-Width="20%" />
</Columns>
<FooterStyle BackColor="white" />
<HeaderStyle BackColor="#139EEE" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
<RowStyle BackColor="#F7F7F7" Height="20px" />
<SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#FBFBF2" />
<SortedAscendingHeaderStyle BackColor="#848384" />
<SortedDescendingCellStyle BackColor="#EAEAD3" />
<SortedDescendingHeaderStyle BackColor="#575357" />
</asp:GridView>
</table>
</div>
</td>
</tr>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</td>
</tr>
</table>
</div>Code Behind :
protected void Page_Load(object sender, EventArgs e)
{
If(!IsPostBack)
{
BindContract_Grid();
}
}
Protected void BindContract_Grid()
{
DataSet ds=//get data from database;
gvContract_Admin.DataSource=ds;
gvContract_Admin.DataBind();
}
protected void gvContract_Admin_OnRowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
string Contract_Admin_Id = gvContract_Admin.DataKeys[e.Row.RowIndex].Value.ToString();
DataSet dsAmendment = obj.Get_Ammendments_Vendors(Contract_Admin_Id, "203110000");
GridView gvAmendment = e.Row.FindControl("gvAmendments") as GridView;
gvAmendment.DataSource = dsAmendment;
gvAmendment.DataBind();
}
}Output:
Conclusion :
This article will help you those who are looking for the same.
Follow