Expand the nested display in the gridview, and expand the nested display in the gridview.

Expand the nested display in the gridview, and expand the nested display in the gridview.

I have been too busy recently. I haven't updated my blog for several months. Recently, the projects require the use of GRIDVIEW nesting. I would like to share with you here. If you have a better solution, please paste it out. In ASP. NET, the nested GridView displays the selected parent record and its subrecords. For example, you can create a list of management projects for the corresponding project according to the conditions, and expand the project to view the current stage of the project. (For example)

The basic technology used is to create a GridView for the parent table, and each row of it is embedded in a GridView. These child GridView uses TemplateField to insert it into the parent GridView. The only thing to note is that the child GridView cannot be bound when the parent GridView is bound, because the parent row is not created yet. The child GridView needs to wait for the DataBound time of the parent GridView to occur.
In this example, the parent GridView defines the automatically generated columns (AutoGenerateColumns = "True"). Here I actually use two child GridView.

 <asp:TemplateColumn HeaderText="OPHist">                            <HeaderStyle Width="40px" CssClass="12-head-pt"></HeaderStyle>                                <ItemTemplate>                                    <asp:Image ID="XXX" runat="server" ImageUrl="../image/plus.gif" AlternateText="ProjectHistory">                                    </asp:Image>                                    <asp:DataGrid ID="grdOPHistory" Style="left: 50px" runat="server" AutoGenerateColumns="True"                                        BorderColor="MintCream" BorderWidth="1px" BackColor="White" CellPadding="1" ForeColor="Black">                                        <SelectedItemStyle ForeColor="GhostWhite" BackColor="#CCCCCC"></SelectedItemStyle>                                        <HeaderStyle Font-Bold="True" Width="40px" ForeColor="White" BackColor="#ff6666"></HeaderStyle>                                                                           </asp:DataGrid>                                </ItemTemplate>                            </asp:TemplateColumn>                            <asp:TemplateColumn HeaderText="Status">                                <HeaderStyle Width="40px" CssClass="12-head-pt"></HeaderStyle>                                <ItemTemplate>                                    <asp:Image ID="SHOW" runat="server" ImageUrl="../image/plus.gif" AlternateText="ProjectDetail">                                    </asp:Image>                                     <asp:DataGrid ID="grdProjectDetail1"  onitemdatabound="grdProjectDetail1_ItemDataBound"  Style="left: 50px" runat="server" AutoGenerateColumns="True">                                        <ItemStyle BackColor="#B3D7F1"></ItemStyle>                                        <HeaderStyle Font-Bold="True" Font-Size="10" Height="20px" ForeColor="black" CssClass="A"                                            BackColor="#4791C5"></HeaderStyle>                                                                           </asp:DataGrid>                                </ItemTemplate>                            </asp:TemplateColumn>

None of these GRIDVIEW data sources are directly specified. It is implemented in the form of programming. The DataBound event of the parent GRIDVIEW is pasted below.

  private void grdProject_ItemDataBound(object sender, DataGridItemEventArgs e)        {            if (e.Item.DataItem is DataRowView)            {                string bindSql = @"EXEC SSM_SP_GETDTL @PROJECTNUM='" + ((Label)e.Item.FindControl("PROJECTNUM")).Text.Trim() + "', @REV='" + ((Label)e.Item.FindControl("REV")).Text.Trim() + "'";                base.doDataBind((DataGrid)e.Item.FindControl("grdProjectDetail1"), bindSql);                ((DataGrid)e.Item.FindControl("grdProjectDetail1")).Style.Add("display", "none");                bindSql = @"EXEC SSM_SP_GETOPHIST @PROJECTNUM='" + ((Label)e.Item.FindControl("PROJECTNUM")).Text.Trim() + "', @REV='" + ((Label)e.Item.FindControl("REV")).Text.Trim() + "'";                base.doDataBind((DataGrid)e.Item.FindControl("grdOPHistory"), bindSql);                ((DataGrid)e.Item.FindControl("grdOPHistory")).Style.Add("display", "none");                if (e.Item.FindControl("SHOW") != null)                {                    ((Image)e.Item.FindControl("SHOW")).Attributes.Add("onclick", "HierarGrid_toggleRow(this,'grdProjectDetail1')");                }                if (e.Item.FindControl("XXX") != null)                {                    ((Image)e.Item.FindControl("XXX")).Attributes.Add("onclick", "HierarGrid_toggleRow(this,'grdOPHistory')");                }                if ((e.Item.ItemType == ListItemType.Item) || (e.Item.ItemType == ListItemType.AlternatingItem))                {                    string str2 = ((Label)e.Item.FindControl("PROJECTNUM")).Text.Trim();                    string str3 = ((Label)e.Item.FindControl("REV")).Text.Trim();                    ImageButton image = (ImageButton)e.Item.FindControl("btnEdit");                    image.Attributes.Add("onclick", "window.open('SSMProjectDetail.aspx?PROJECTNUM=" + str2 + "&REV=" + str3 + "&Mode=Edit','_blank','top=10,left=10,width=1100,height=900,scrollbars=yes,resizable=yes')");                                   }            }        }

 

In fact, it is not difficult to say it is not difficult, but it is not easy to say it. The key is how to write HierarGrid_toggleRow in the foreground. Post the Code. If you have any questions, please leave a message. If you have any help, please give a thumbs up.

Function HierarGrid_toggleRow (sender, grd) {if (sender = null) return; var state = 1; // if the hidden row has not already been generated, clone the panel into a new row var existingRow = too many Doc ument. getElementById (sender. id + "showRow"); if (existingRow = null) {// getting a reference to the table var table = GetParentElementByTagName (sender, "TABLE "); var index = GetParentElementByTagName (s Ender, "TR "). sectionRowIndex + 1; // concatenate name of hidden panel => replace "Icon" from sender. id with "Panel" \ n if (grd = "grdProjectDetail1") {rowDivName = HierarGrid_ReplaceStr (sender. id, "SHOW", grd);} else {rowDivName = HierarGrid_ReplaceStr (sender. id, "XXX", grd);} var rowDiv = invalid argument Doc ument. getElementById (rowDivName); // adding new row to table var newRow = table. insertRow (index ); NewRow. id = sender. id + "showRow"; // adding new cell to row var newTD = document. createElement ("TD"); if (table. rows [0]. cells [0]. colSpan> 1) newTD. colSpan = table. rows [0]. cells [0]. colSpan; else newTD. colSpan = table. rows [0]. cells. length; var myTD = newRow. appendChild (newTD); // clone Panel into new cell var copy = rowDiv; copy. style. display = ""; myTD. innerHTML = copy. outerHTML; rowDiv. parentNode. RemoveChild (rowDiv); sender. src = HierarGrid_ReplaceStr (sender. src, "plus", "minus"); state = 1 ;}else {if (existingRow. style. display = "none") {existingRow. style. display = ""; sender. src = HierarGrid_ReplaceStr (sender. src, "plus", "minus"); state = 1 ;}else {existingRow. style. display = "none"; sender. src = HierarGrid_ReplaceStr (sender. src, "minus", "plus"); state = 0 ;}// ChangeRowState (Sender, state);} function HierarGrid_ReplaceStr (orgString, findString, replString) {pos = orgString. lastIndexOf (findString); return orgString. substr (0, pos) + replString + orgString. substr (pos + findString. length);} function GetParentElementByTagName (element, tagName) {var element = element; while (element. tagName! = TagName) element = element. parentNode; return element ;}View Code