Skip to main content

Editing Child GridView in Nested GridView


Editing Child GridView in Nested GridView

In this article we will explore how to edit child gridview in the nested gridview.

 

Let''s write some code.

Step 1: Add scriptmanager in the aspx page.

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager
>


Step 2: Add below stylesheet for modal popup.

<style type="text/css">
      .modalBackground
      
{
            background-color: Gray;
            filter: alpha(opacity=80);
            opacity: 0.5;
      }

      .ModalWindow
      
{
            border: solid1px#c0c0c0;
            background: #f0f0f0;
            padding: 0px10px10px10px;
            position: absolute;
            top: -1000px;
      }

</style>

Step 3:  Create an aspx page and add a Gridview with another gridview in the last TemplateField. The last templatefield will also contain a lable which will be used as last column in the parent gridview.

<asp:UpdatePanel runat="server" ID="updTest" UpdateMode="Conditional">
      
<ContentTemplate
>
            
<asp:GridView ID="gvParent" runat="server" AutoGenerateColumns="False" OnRowDataBound="gvParent_RowDataBound"CellPadding="4" ForeColor="#333333" ShowHeader="True" DataKeyNames
="EmployeeId">
                  
<Columns
>
                        
<asp:TemplateField ItemStyle-Width
="20px">
                              
<ItemTemplate
>
                                    
<asp:Image runat="server" ID="img1" ImageUrl="images/Collapse.GIF" 
/>
                              
</ItemTemplate
>
                        
</asp:TemplateField
>
                        
<asp:BoundField HeaderText="Employee Id" DataField
="EmployeeId">
                              
<ItemStyle HorizontalAlign="Center" Width="160px" 
/>
                        
</asp:BoundField
>
                        
<asp:BoundField HeaderText="Employee Name" DataField
="EmployeeName">
                              
<ItemStyle HorizontalAlign="Center" Width="160px" 
/>
                        
</asp:BoundField
>
                        
<asp:BoundField HeaderText="Designation" DataField
="Designation">
                              
<ItemStyle HorizontalAlign="Center" Width="160px" 
/>
                        
</asp:BoundField
>
                        
<asp:TemplateField HeaderText
="Location">
                              
<ItemTemplate
>
                                    
<asp:Label ID="lblEmpName" runat="server" Text=''<%# Eval("Location")%>
''>
                                    </
asp:Label
>
                                    
<asp:Literal runat="server" ID="lit1" Text="</td><tr id=''trCollapseGrid'' style=''display:none'' ><td colspan=''5''>" 
/>
                                    
<asp:GridView ID="gvChild" AutoGenerateColumns="False" runat="server" EnableViewState="False"DataKeyNames="EmployeeId" ForeColor="#333333" PageSize="2" AllowPaging="True"OnPageIndexChanging="gvChild_PageIndexChanging" OnRowCancelingEdit="gvChild_RowCancelingEdit"OnRowDeleting="gvChild_RowDeleting" OnRowEditing="gvChild_RowEditing" OnRowUpdating
="gvChild_RowUpdating">
                                          
<RowStyle BackColor="#EFF3FB" 
/>
                                          
<AlternatingRowStyle BackColor="White" 
/>
                                          
<Columns
>
                                                
<asp:BoundField HeaderText="Skill ID" DataField="SkillID" ReadOnly
="True">
                                                      
<ItemStyle HorizontalAlign="Center" Width="80px" 
/>
                                                
</asp:BoundField
>
                                                
<asp:BoundField HeaderText="Employee Id" DataField="EmployeeId" ReadOnly
="True">
                                                      
<ItemStyle HorizontalAlign="Center" Width="100px" 
/>
                                                
</asp:BoundField
>
                                                
<asp:TemplateField HeaderText
="SkillSet">
                                                      
<ItemStyle HorizontalAlign="Center" Width="100px" 
/>
                                                      
<ItemTemplate
>
                                                            
<%# Eval("SkillSet"
)%>
                                                      </ItemTemplate
>
                                                      
<EditItemTemplate
>
                                                            
<asp:TextBox ID="txtEditSkillSet" runat="server" Text='' <%# Eval("SkillSet")%>''Width="100px"></asp:TextBox
>
                                                      
</EditItemTemplate
>
                                                
</asp:TemplateField
>
                                                
<asp:TemplateField HeaderText
="Remarks">
                                                      
<ItemStyle HorizontalAlign="Center" Width="100px" 
/>
                                                      
<ItemTemplate
>
                                                            
<%# Eval("Remarks"
)%>
                                                      </ItemTemplate
>
                                                      
 <EditItemTemplate
>
                                                            
<asp:TextBox ID="txtEditRemarks" runat="server" Text='' <%# Eval("Remarks")%>''Width="100px"></asp:TextBox
>
                                                      
</EditItemTemplate
>
                                                
</asp:TemplateField
>
                                                
<asp:CommandField ButtonType="Button" EditText="Edit" HeaderText="Edit"ShowEditButton="true" 
/>
                                                
<asp:CommandField ButtonType="Button" DeleteText="Delete" HeaderText="Delete"ShowDeleteButton="true" 
/>
                                          
</Columns
>
                                          
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" 
/>
                                    
</asp:GridView
>
                                    
<asp:Literal runat="server" ID="lit2" Text="</td></tr>" 
/>
                              
</ItemTemplate
>
                        
</asp:TemplateField
>
                  
</Columns
>
                  
<RowStyle BackColor="#EFF3FB" 
/>
                  
<AlternatingRowStyle BackColor="White" 
/>
            </asp:GridView
>
            
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="hidProcessing"PopupControlID="panEdit" BackgroundCssClass="modalBackground" PopupDragHandleControlID
="panEdit">
            
</ajaxToolkit:ModalPopupExtender
>
            
<asp:Panel ID="panEdit" runat="server" CssClass
="ModalWindow">
                  
<div style="background-color
White">
                        
<img src="images/processing.gif" alt="Processing" 
/>
                        
Processing......
                  </div
>
            
</asp:Panel
>
            
<asp:HiddenField ID="hidProcessing" runat="server" 
/>
      
</ContentTemplate
>
      
<Triggers
>
            
<asp:AsyncPostBackTrigger ControlID="btnExpandRow"
 EventName="Click" 
/>
      
</Triggers
>
</asp:UpdatePanel>

 
Step 4: Add a button and three hidden fields in the aspx page.

 
<asp:Button ID="btnTest" runat="server" OnClick="btnTest_Click" Style="display: none" />
<asp:HiddenField ID="hidRowId" runat="server" 
/>
<asp:HiddenField ID="hidImgId" runat="server" 
/>
<asp:HiddenField ID="hidRowIndex" runat="server" />


Step 5: Add below javascript in the aspx.
 
<script language="javascript" type="text/javascript">
      
function
 OpenTable(trRow, imgId, ID) {
            document.getElementById(''<%=hidRowIndex.ClientID %>''
).value = ID;
            document.getElementById(''<%=hidRowId.ClientID %>''
).value = trRow;
            document.getElementById(''<%=hidImgId.ClientID %>''
).value = imgId;
            __doPostBack("<%=btnExpandRow.ClientID%>"""
);
      }
</script>

 
Step 6: Add below javascript in the aspx to get processing image whenever server calls happen.
 
<script language="javascript" type="text/javascript">
      
// Reference of PageRequestManager.
      
var
 prm = Sys.WebForms.PageRequestManager.getInstance();
      prm.add_initializeRequest(InitializeRequest);
      prm.add_endRequest(EndRequest);
      
// Async postback starts.
      
function
 InitializeRequest(sender, args) {
            var modalPopupBehavior = $find(''<%=ModalPopupExtender1.ClientID %>''
);
            modalPopupBehavior.show();
      }
      
// Async postback ends.
      
function
 EndRequest(sender, args) {
            var modalPopupBehavior = $find(''<%=ModalPopupExtender1.ClientID %>''
);
            modalPopupBehavior.hide();
      }
</script>

 
Step 7: Create a method GetParentTableData which will return datatable. Bind the datatable returned by GetParentTableData  with parent gridview on page load.
 
private DataTable GetParentTableData()
{
      
DataTable table = new DataTable
();
      table.Columns.Add(
"EmployeeId"typeof(string
));
      table.Columns.Add(
"EmployeeName"typeof(string
));
      table.Columns.Add(
"Designation"typeof(string
));
      table.Columns.Add(
"Location"typeof(string
));

      table.Rows.Add(100, 
"Andy""S/W Engg""NY"
);
      table.Rows.Add(200, 
"James""S/W Engg""NJ"
);
      table.Rows.Add(300, 
"Ramesh""Sr. S/W Engg""Bangalore"
);
      table.Rows.Add(400, 
"George""Architect""London"
);
      table.Rows.Add(500, 
"Lisa""Manager""Washington"
);
      
return
 table;
}


 
protected void Page_Load(object sender, EventArgs e)
{
      if
 (!Page.IsPostBack)
      {
            DataTable
 dtParentData = GetParentTableData();
            gvParent.DataSource = dtParentData;
            gvParent.DataBind();
            GridViewChildPageIndex();
      }
}


Step 8: Create a method GetChildTableData which will return datatable. The datatable returned by GetChildTableData will bind to child gridview. EmployeeId of parent and childgridview will be same. It will act as foreign key.


private DataTable GetChildTableData()
{
      
DataTable table = new DataTable
();
      table.Columns.Add(
"SkillID"typeof(string
));
      table.Columns.Add(
"EmployeeId"typeof(string
));
      table.Columns.Add(
"SkillSet"typeof(string
));
      table.Columns.Add(
"Remarks"typeof(string
));
      table.Rows.Add(
"1""100""ASP.NET""Remarks1"
);
      table.Rows.Add(
"2""100""SQL""Remarks2"
);
      table.Rows.Add(
"1""200""ASP.NET""Remarks1"
);
      table.Rows.Add(
"2""200""SQL""Remarks2"
);
      table.Rows.Add(
"3""200""WCF""Remarks3"
);
      table.Rows.Add(
"4""300""PHP""Remarks1"
);
      table.Rows.Add(
"5""300""Oracle""Remarks2"
);
      table.Rows.Add(
"6""300""Javascipt""Remarks3"
);
      table.Rows.Add(
"7""400""J2EE""Remarks1"
);
      table.Rows.Add(
"5""400""Oracle""Remarks2"
);
      table.Rows.Add(
"8""400""Struts""Remarks3"
);
      table.Rows.Add(
"9""500""Estimation""Remarks1"
);
      table.Rows.Add(
"10""500""Project Plan""Remarks2"
);
      table.Rows.Add(
"11""500""Resource Loading""Remarks3"
);
      table.Rows.Add(
"12""500""Resource allocation""Remarks4"
);
      return
 table;
}
Step 9: btnExpandRow_Click will be invoked whenever the row will be expanded.

protected void btnExpandRow_Click(object sender, EventArgs e)
{
      DataTable dtParentData = GetParentTableData();
      gvParent.DataSource = dtParentData;
      gvParent.DataBind();
}

 
Step 10: gvParent_RowDataBound will bind the child gridview. It also contains the logic of expanding and collapsing child gridview.
 
protected void gvParent_RowDataBound(object sender, GridViewRowEventArgs e)
{
      if (e.Row.RowType == DataControlRowType
.DataRow)
      {
            string
 strID = gvParent.DataKeys[e.Row.RowIndex].Value.ToString();
            Image img = (Image)e.Row.Cells[0].FindControl("img1"
);
            Literal ltrl = (Literal)e.Row.FindControl("lit1"
);
            ltrl.Text = ltrl.Text.Replace("trCollapseGrid""trCollapseGrid"
 + e.Row.RowIndex.ToString());
            string str = "trCollapseGrid"
 + e.Row.RowIndex.ToString();
            e.Row.Cells[0].Attributes.Add("OnClick""return OpenTable(''" + str + "'',''" + img.ClientID + "'',''" + strID + "'')"
);
            e.Row.Cells[0].RowSpan = 1;
            System.Web.UI.WebControls.GridView gvChild = (System.Web.UI.WebControls.GridView)e.Row.FindControl("gvChild"
);
            if (Session["ChildPageIndex"] != null
)
            {
                  DataTable dtPageIndex = (DataTable)Session["ChildPageIndex"
];
                  gvChild.PageIndex = Convert
.ToInt16(dtPageIndex.Rows[e.Row.RowIndex][0]);
            }
            if
 (hidRowIndex.Value.Equals(strID))
            {
                  BindChildgvwChildView(strID, gvChild);
                  if (!ClientScript.IsStartupScriptRegistered("ChildGrid"
))
                  {
                        string javScript = "document.getElementById(''" + hidRowId.Value + "'').style.display = '';"
;
                        javScript = javScript + "document.getElementById(''" + hidImgId.Value + "'').src = ''images/Expand.gif'';"
;
                        ScriptManager.RegisterStartupScript(Page, Page.GetType(), "ChildGrid", javScript, true
);
                  }
            }
      }
}

 
Step 11: BindChildgvwChildView will bind child gridview.

private void BindChildgvwChildView(string empId, System.Web.UI.WebControls.GridView gvChild)
{
      DataTable
 dtChildTable = GetChildTableData();
      DataTable
 dtCloneChildTable = dtChildTable.Clone();
      DataRow[] gvChildRows = dtChildTable.Select("EmployeeId = "
 + empId);
      foreach (DataRow gvChildRow in
 gvChildRows)
      {
            dtCloneChildTable.ImportRow(gvChildRow);
      }
      gvChild.DataSource = dtCloneChildTable;
      gvChild.DataBind();
}

 
Step 12: gvChild_PageIndexChanging will handle paging in the child gridview.
 
protected void gvChild_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
      System.Web.UI.WebControls.GridView gvwChild = ((System.Web.UI.WebControls.GridView
)sender);
      GridViewRow gvRowParent = ((System.Web.UI.WebControls.GridView)sender).Parent.Parent as GridViewRow
;
      gvwChild.PageIndex = e.NewPageIndex;
      if (Session["ChildPageIndex"] != null
)
      {
            DataTable dtPageIndex = (DataTable)Session["ChildPageIndex"
];
            dtPageIndex.Rows[gvRowParent.RowIndex][0] = e.NewPageIndex;
      }
      KeepExpanded(gvwChild, sender);
}

 
Step 13: KeepExpanded will be called whenever there is any postback from child gridview will occur.
 
protected void KeepExpanded(System.Web.UI.WebControls.GridView gvwChild, object sender)
{
      GridViewRow gvRowParent = ((System.Web.UI.WebControls.GridView)sender).Parent.Parent as GridViewRow
;
      BindChildgvwChildView(gvParent.DataKeys[gvRowParent.RowIndex].Value.ToString(), gvwChild);
      if (!ClientScript.IsStartupScriptRegistered("ChildGridIndex"
))
      {
            ScriptManager.RegisterStartupScript(Page, Page.GetType(), "ChildGridIndex""document.getElementById(''" + hidRowId.Value + "'').style.display = '';"true
);
      }
}

 
Step 14: Below four methods will handle Editing, Updating, Deleting and CancelEditing in child gridview.
 
protected void gvChild_RowEditing(object sender, GridViewEditEventArgs e)
{
      System.Web.UI.WebControls.GridView gvwChild = ((System.Web.UI.WebControls.GridView
)sender);
      gvwChild.EditIndex = e.NewEditIndex;
      KeepExpanded(gvwChild, sender);
}


protected void gvChild_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
      System.Web.UI.WebControls.GridView gvwChild = ((System.Web.UI.WebControls.GridView
)sender);
      TextBox txtRemarks = ((TextBox)(gvwChild.Rows[e.RowIndex].FindControl("txtEditRemarks"
)));
      TextBox txtSkillSet = ((TextBox)(gvwChild.Rows[e.RowIndex].FindControl("txtEditSkillSet"
)));
      
//Code to update table
      
gvwChild.EditIndex = -1;
      KeepExpanded(gvwChild, sender);
}

protected void gvChild_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
      System.Web.UI.WebControls.GridView gvwChild = ((System.Web.UI.WebControls.GridView
)sender);
      
//Code to delete data from table
      
KeepExpanded(gvwChild, sender);
}

protected void gvChild_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
      System.Web.UI.WebControls.GridView gvwChild = ((System.Web.UI.WebControls.GridView
)sender);
      gvwChild.EditIndex = -1;
      KeepExpanded(gvwChild, sender);
}

This ends the article of editing child gridview of nested gridview
 
Live Demo
Like us if you find this post useful. Thanks! 
Shibashish mohanty
Download Code 

Comments

Popular posts from this blog

GRIDVIEW GROUPING

When displaying data, we sometimes would like to group data for better user experience or when displaying long list of hierarchal data, we would want to display them in a tree view kind of structure. There is more than way of doing this, but I am going to explain achieving this functionality using  AJAX Collapsible Panel Extender Control . Overview: I am going to use  Adventure Works  as datasource. Every product in  Production.Product  table belongs to a product sub category. We fetch handful of products and the sub categories they belong to from the database. Our objective is to list all the available sub categories and allow user to  expand/collapse  to look/hide the list of products belonging to each subcategory. Database Connection Added following entry under  connectionStrings  element in  web.config . < add   name = "Sql"   connectionString="Data Source=(local); Initial  Catalog = AdventureWorks ...

GRIDVIEW ZOOM IMAGE

When you have images in your  GridView , you would most likely show them as thumbnails so as to not distort the whole layout. However user would want to look at the full image by clicking on the image or just hovering his mouse over it. In today’s applications, this is a basic requirement and there are just so many third party controls or plugins which would support this functionality. I am going do this conventional way using  javascript  way in this article.  On top of it, I am also going to explain how to get images from database using  HttpHandlers . Example: I am using  Adventure Works  as datasource. We fetch handful of products and bind them to the grid. When page is initially loaded, we retrieve products from Production . Product  table and bind them to the grid. We display some product attributes such as Product ID, Product Number, Product Name, List Price and product’s thumbnail. When user hover his mouse on the page, we fetch the f...