Have you ever needed to nest controls within gridviews
Its actually pretty simple these days. At first i was a bit stuck but having now successfully nested many types of controls within a gridview im fairly confident its possible to nest anything, and likely down to an infinite nest tree.
So lets keep it simple
What we are going to do is have a primary gridview (grid1), with a few button controls on each row (btnexpand btnselect btndelete), a nested gridview with a couple of buttons (btnselect btndelete) and a nested control within it.
I will show you how to wire up events to handle the nested controls.
You are most likely better served by copying this code out into your favorite editor, visual studio – scite whichever your preference.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
<asp:GridView ID="Grid1" runat="server" SelectedRowStyle-Font-Bold="true" DataKeyNames="UID" DataSourceID="linq2SQLData" AllowPaging="true" AllowSorting="True" Width="100%" AutoGenerateColumns="false" > <RowStyle /> <Columns> <asp:TemplateField ControlStyle-Width="20px" ItemStyle-Width="20px"> <ItemTemplate> <asp:Button runat="server" style="text-decoration: none;Color:Blue" ID="btnExpand" CommandName="Expand" Text='+' ></asp:Button> </ItemTemplate> </asp:TemplateField> <asp:templatefield ControlStyle-Width="50px" ItemStyle-Width="50px"> <itemtemplate> <asp:Button runat="server" style="text-decoration: none;Color:Blue" ID="btnSelect" CommandName="Select" Text='Select' ></asp:Button> </itemtemplate> </asp:templatefield> <asp:templatefield ControlStyle-Width="50px" ItemStyle-Width="50px"> <itemtemplate> <asp:Button runat="server" style="text-decoration: none;Color:Blue" ID="btndelete" CommandName="Delete" Text='Delete' ></asp:Button> </itemtemplate> </asp:templatefield> <asp:BoundField DataField="Field1" HeaderText="Field1" /> <asp:BoundField DataField="Field2" HeaderText="Field2" /> <asp:TemplateField> <ItemTemplate> </td></tr> <tr> <td colspan="100%" > <asp:Panel ID="pnlctlEmbeded" runat="server" Visible="false" style="float:left;width:100%; border:1px solid #DCCFFD;"> <table border="0" width="100%"> <tr><td width="10px"> </td> <td><uc1:ctlAdminEnquiry ID="ctlEmbeded2" runat="server" /></td> </tr></table> </asp:Panel> </ItemTemplate> </asp:TemplateField> <asp:TemplateField> <ItemTemplate> </td></tr> <tr> <td colspan="100%" > <asp:Panel ID="pnlEmbed" runat="server" Visible="false" style="float:left;width:90%; border:1px solid #DCCFFD;"> <asp:Label ID="lblEmbed" runat="server" Text="Label">There are no responses to this enquiry</asp:Label> <table id="tblTrail" runat="server" border="0" width="100%"> <tr> <td width="10px"> </td> <td> <asp:GridView ID="GridEmbeded" runat="server" Width="100%" SelectedRowStyle-Font-Bold="true" DataKeyNames="UID" AllowPaging="true" AllowSorting="false" AutoGenerateColumns="False"> <Columns> <asp:templatefield ControlStyle-Width="50px" ItemStyle-Width="50px"> <itemtemplate> <asp:Button runat="server" style="text-decoration: none;Color:Blue;" ID="btnSelect" OnCommand="GDEmbededCommand" CommandName="Select" Text='Select' CommandArgument='<%# Eval("UID")%>' ></asp:Button> </itemtemplate> </asp:templatefield> <asp:templatefield ControlStyle-Width="50px" ItemStyle-Width="50px"> <itemtemplate> <asp:Button runat="server" style="text-decoration: none;Color:Blue;" ID="btndelete" OnCommand="GDEmbededCommand" CommandName="Delete" Text='Delete' OnClientClick="javascript:return confirm('Are you sure you want to delete this Enquiry Trail')"></asp:Button> </itemtemplate> </asp:templatefield> <asp:BoundField DataField="ID" HeaderText="ref" /> <asp:BoundField DataField="Field1" HeaderText="Sometitle" /> <asp:TemplateField> <ItemTemplate> </td></tr> <tr><td width="10px"> </td> <td colspan="100%" > <asp:Panel ID="pnlctlEmbeded" runat="server" Visible="false" style="float:left;width:100%; border:1px solid #DCCFFD;"> <uc1:ctlEmbeded ID="ctlEmbeded" runat="server" /> </asp:Panel> </ItemTemplate> </asp:TemplateField> </Columns> <SelectedRowStyle Font-Bold="False" BackColor="#FDF498" BorderStyle="Solid" BorderColor="green" BorderWidth="1px" /> </asp:GridView> </td> </tr> </table> </asp:Panel> </ItemTemplate> </asp:TemplateField> </Columns> <SelectedRowStyle Font-Bold="False" BackColor="#DCCFFD" BorderStyle="Solid" BorderColor="green" BorderWidth="1px" /> </asp:GridView> |
Firstly Lets look at the button controls in Grid1. The grid routine rowdatabound wires up the button control command argument to hold the ID of the record like so, this gives us a hook back to the data.
1 2 3 4 5 6 7 8 9 10 |
Protected Sub Grid1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles Grid1.RowDataBound If e.Row.RowType = DataControlRowType.DataRow Then 'get the UId of the current record Dim ID As Integer = DataBinder.Eval(e.Row.DataItem, "UID") 'set the select button command argument to the UID CType(e.Row.FindControl("btnselect"), Button).CommandArgument = ID 'get the delete button and assign the UID and jscript warning Dim l As Button = CType(e.Row.FindControl("btndelete"), Button) l.CommandArgument = ID l.Attributes.Add("onclick", "javascript:return " + "confirm('Are you sure you want to delete this " + DataBinder.Eval(e.Row.DataItem, "Title") + "')") |
The grid rountine rowcommand is used to handle the button events.
1 2 3 4 5 6 7 8 9 10 |
Protected Sub Grid1_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) Handles Grid1.RowCommand Select Case e.CommandName Case Is = "Select" 'Do something Case Is = "Delete" 'do something else Case Is = "Expand" 'do something else End Select End Sub |
This covers the primary grid button routines, now lets look at the nested grid buttons, how do we handle those. In the same fashion, the nested grid data would likely have been bound when we had clicked on the primary grids select button. We are only concerned at handling the nested grid button wireup and click event handler.
Simply set the “OnCommand” property of the button to our custom subroutine
1 2 3 4 |
<asp:Button runat="server" style="text-decoration: none;Color:Blue;" ID="btnSelect" OnCommand="GDEmbededCommand" CommandName="Select" Text="Select" CommandArgument='<%# Eval("UID")%>' ></asp:Button> |
Note the routine required parameters sender and e.
1 2 3 4 5 6 7 8 9 10 11 |
Sub GDEmbededCommand(ByVal sender As Object, ByVal e As CommandEventArgs) Select Case e.CommandName Case Is = "Select" UID = e.CommandArgument 'set the selected row of the primary grid to that of the parent to the row of this embeded grid just selected Grid1.SelectedIndex = CType(CType(sender, Control).Parent.Parent.Parent.Parent.Parent.Parent.Parent.Parent.Parent.Parent, GridViewRow).RowIndex 'perform some more actions Case Is = "Delete" 'perform some action End Select End Sub |
And that as they say is that. You have now learnt how to wireup control events through nested gridviews.