Nested GridView with simple Dropdown effect RSS

• • Reply
  

  etbramble

  Member

  349 Points

  81 Posts

  Nested GridView with simple Dropdown effect

  Feb 05, 2007 02:42 PM|LINK

  After doing a couple quick searches on the web I was not able to find an exact example like it so I am posting this here for review.

  I have created an extremely simple nested GridView that uses some javascript to create the dropdown effect.  I use the nested GridView to display relational data to the rows in the main GridView.  I am hoping to get replies with links to other examples of how to display relational data with the GridViews and I wanted to help get this out to the community because it was so simple to implement.  Most of all i would like to hear about how this can be improved upon...

  What makes this different is that the nested GridView here is displayed beneath the corresponding row as opposed to it being displayed in the last column of the main GridView as in all the examples I've seen.  To get this effect I simply injected some HTML (starting a line 29) to end the current row and create a new row.  The nested GridView is then placed inside a <DIV> tag where the display of that <DIV> is controled by Javascript.  Each <DIV> is assigned a unique ID that corresponds to the main GridView's rowID and that is passed to the javascript to control the opening and closing of the nested GridView.  I have even created a double nested GridView where a third GridView is nested inside the first nested GridView.

  See code for details or post a question.  I created this entirely from scratch and did not see another example of it after searching Google for 30 minutes.

  Live example: http://www.giswiz.com/nested_gridview_dropdown/  (might be slow to load...dev server)

   GridView Code:

              <asp:GridView ID="GridView1" runat="server" 
                  AutoGenerateColumns="False" DataKeyNames="CustomerID"
                  DataSourceID="SqlDataSource1" OnRowDataBound="gv_RowDataBound"
                  AllowPaging="True" PageSize="20" >
                  <HeaderStyle CssClass="dataTable" />
                  <RowStyle CssClass="dataTable" />
                  <AlternatingRowStyle CssClass="dataTableAlt" />
                  <Columns>
                      <asp:TemplateField>
                          <ItemTemplate>
                              <a href="javascript:switchViews('div<%# Eval("CustomerID") %>', 'one');">
                                  <img id="imgdiv<%# Eval("CustomerID") %>" alt="Click to show/hide orders" border="0" src="Images/expand_button_white.jpg" />
                              </a>
                          </ItemTemplate>
                          <AlternatingItemTemplate>
                              <a href="javascript:switchViews('div<%# Eval("CustomerID") %>', 'alt');">
                                  <img id="imgdiv<%# Eval("CustomerID") %>" alt="Click to show/hide orders" border="0" src="Images/expand_button_white_alt.jpg" />
                              </a>
                          </AlternatingItemTemplate>
                      </asp:TemplateField>
                      <asp:BoundField DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName" />
                      <asp:BoundField DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName" />
                      <asp:BoundField DataField="Address" HeaderText="Address" SortExpression="Address" />
                      <asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
                      <asp:BoundField DataField="PostalCode" HeaderText="PostalCode" SortExpression="PostalCode" />
                      <asp:BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone" />
                      <asp:TemplateField>
                          <ItemTemplate>
                              </td></tr>
                              <tr>
                                  <td colspan="100%">
                                      <div id="div<%# Eval("CustomerID") %>" style="display:none;position:relative;left:25px;" >
                                          <asp:GridView ID="GridView2" runat="server" Width="80%"
                                              AutoGenerateColumns="false" DataKeyNames="OrderID"
                                              EmptyDataText="No orders for this customer." >
                                              <HeaderStyle CssClass="dataTable" />
                                              <AlternatingRowStyle CssClass="dataTableAlt" />
                                              <RowStyle CssClass="dataTable" />
                                              <Columns>
                                                  <asp:BoundField DataField="OrderDate" HeaderText="Order Date" DataFormatString="{0:MMM-dd-yyyy}" HtmlEncode="False" />
                                                  <asp:BoundField DataField="ShippedDate" HeaderText="Shipped Date" DataFormatString="{0:MMM-dd-yyyy}" HtmlEncode="False" />
                                                  <asp:BoundField DataField="ShipCity" HeaderText="Shipped To" />
                                              </Columns>
                                          </asp:GridView>
                                      </div>
                                  </td>
                              </tr>
                          </ItemTemplate>
                      </asp:TemplateField>
                  </Columns>
              </asp:GridView>
              <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString2 %>"
                  SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [Address], [City], [PostalCode], [Phone] FROM [Customers]">
              </asp:SqlDataSource>
    
  The code to populate the nested GridView that is called on the main GridView's OnRowDataBound event (this code readily available from one of the many websites demonstrating how to do a nested GridView):
      Protected Sub gv_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs)
          If e.Row.RowType = DataControlRowType.DataRow Then
              Dim gv As GridView = e.Row.FindControl("GridView2")
              Dim dbSrc As New SqlDataSource
              dbSrc.ConnectionString = ConfigurationManager.ConnectionStrings("NorthwindConnectionString2").ConnectionString
              dbSrc.SelectCommand = "SELECT * FROM Orders WHERE CustomerID = '" & _
                  e.Row.DataItem("CustomerID").ToString & "' ORDER BY OrderDate"
  
              gv.DataSource = dbSrc
              gv.DataBind()
          End If
      End Sub
  
    
  

   Here is the simple javascript to open and close the nested GridView:

  function switchViews(obj,row)
      {
          var div = document.getElementById(obj);
          var img = document.getElementById('img' + obj);
          
          if (div.style.display=="none")
              {
                  div.style.display = "inline";
                  if (row=='alt')
                      {
                          img.src="Images/expand_button_white_alt_down.jpg" mce_src="Images/expand_button_white_alt_down.jpg";
                      }
                  else
                      {
                          img.src="Images/Expand_Button_white_Down.jpg" mce_src="Images/Expand_Button_white_Down.jpg";
                      }
                  img.alt = "Close to view other customers";
              }
          else
              {
                  div.style.display = "none";
                  if (row=='alt')
                      {
                          img.src="Images/Expand_button_white_alt.jpg" mce_src="Images/Expand_button_white_alt.jpg";
                      }
                  else
                      {
                          img.src="Images/Expand_button_white.jpg" mce_src="Images/Expand_button_white.jpg";
                      }
                  img.alt = "Expand to show orders";
              }
      }
  
  

   

  GridView template field gridview rowcommand

  • Edited by etbramble on Sep 16, 2007 02:21 PM
  • Edited by etbramble on Sep 16, 2007 02:34 PM
  • Locked by mbanavige on Mar 30, 2010 04:03 AM
• • Reply
  

  xm1994

  Member

  2 Points

  3 Posts

  Re: Nested GridView with simple Dropdown effect

  Jun 04, 2007 02:49 PM|LINK

  etbramble, great post!
  

  For the past day i've been trying to get my gridview to add/remove rows for the detail content using

  Dim gridTable As Table = CType(GridViewInvest.Controls(0), Table)

  building my new row and using:

  gridTable.Rows.AddAt(rowIndex, newRow) and gridTable.Rows.RemoveAt(rowIndex)

  to actually add/remove the row. I haven't been able to get it right though.

   

  To make things even simpler, how about dropping the javascript and DIV tags and using a panel, here's an example: (using AJAX collapsible panel for the effect):

   

  <asp:UpdatePanel ID="up" runat="server" UpdateMode="Conditional">
      <ContentTemplate>
          <asp:GridView ID="GridViewInvest" runat="server" EnableViewState="true" DataKeyNames="AcctNumber,AcctType"
           AutoGenerateColumns="False" DataSourceID="ObjectDataSrcInvest" EmptyDataText="No Accounts Found"
           OnRowCommand="GridViewInvest_RowCommand" Width="590px">
                <Columns>
                  <asp:TemplateField>
                      <ItemTemplate>
                        <asp:LinkButton ID="lbViewDetails" runat="server" Text="Details" CommandName="ShowDetailPanel"
                         CommandArgument='<%# Container.DataItemIndex %>' />
                      </ItemTemplate>
                  </asp:TemplateField>
                  <asp:ButtonField CommandName="toAccountHoldings" DataTextField="AcctName" HeaderText="Account Name" Text="Account Name" >
                  </asp:ButtonField>
                  <asp:BoundField DataField="AcctNumber" HeaderText="Account Number">
                      <ItemStyle HorizontalAlign="Right" />
                      <HeaderStyle HorizontalAlign="Right" />
                  </asp:BoundField>
                  <asp:BoundField DataField="AcctValue" HeaderText="Balance <a href="http://forums.asp.net/AddPost.aspx?ReplyToPostID=1564092&Quote=False#balance"  title="Important Information About Balances"><SUP>a</SUB></a>" DataFormatString="{0:N0}" HtmlEncode="False">
                      <ItemStyle HorizontalAlign="Right" />
                      <HeaderStyle HorizontalAlign="Right" />
                 </asp:BoundField>
                 <asp:TemplateField>
                      <ItemTemplate>
                         <asp:UpdatePanel ID="detailPanel" runat="server" UpdateMode="Conditional">
                              <ContentTemplate>
                              
  
                              <%--</td></tr>--%>
                              <tr><td colspan="4">
                              
  
                              <cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" TargetControlID="Panel1"></cc1:CollapsiblePanelExtender>
                                  <asp:Panel ID="Panel1" runat="server" Height="100px" Visible="false">
                                         This is the detail pane.
                                  </asp:Panel>
                              </td></tr>
                            
  
                         </ContentTemplate>
                         </asp:UpdatePanel>
                      </ItemTemplate>
                 </asp:TemplateField>
              
  
              </Columns>
          </asp:GridView>
           </ContentTemplate>
  </asp:UpdatePanel>

   
  

    
  

   

  then in  the RowCommand event:

  
   

      Protected Sub GridViewInvest_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs)
          Dim rowIndex As Integer = Convert.ToInt32(e.CommandArgument)
          Dim data As DataKey = GridViewInvest.DataKeys(rowIndex)
          
          If e.CommandName = "toAccountHoldings" Then
  
              Dim AcctType As String = data.Values("AcctType").ToString
              Dim AcctNumber As Integer = data.Values("AcctNumber")
      
              Session("acct") = AcctType
              Session("rid") = AcctNumber
              Session("isCash") = False
      
              Response.Redirect("client_AccountHoldings.aspx")
      
          ElseIf e.CommandName = "ShowDetailPanel" Then
  
              Dim Panel1 As Panel = CType(GridViewInvest.Rows(rowIndex).FindControl("Panel1"), Panel)
              
              If Panel1.Visible = True Then
                  Panel1.Visible = False
              Else : Panel1.Visible = True
              
              End If
          End If
      End Sub
  

   
  

  
  The only problem we're having is the empty detail row showing up after every data row and an extra <td> tag that creates another empty cell at the end of each row.

  Were you able to tweak this and remove the offending tags? Anyone have any ideas?
  

   
  
   

   

• • Reply
  

  DotNetMomma

  Member

  48 Points

  27 Posts

  Re: Nested GridView with simple Dropdown effect

  Jul 04, 2007 05:39 PM|LINK

  etbramble

  This is absolutely fantastic.  Thanks so much for posting it.
  

• • Reply
  

  smacks

  Member

  7 Points

  23 Posts

  Re: Nested GridView with simple Dropdown effect

  Aug 06, 2007 08:12 AM|LINK

  When one item is expanded, can the previous item be collapsed this way making sure only one is expanded at any given time?

   

  Also is the source code for C# available for your gridview?

  It seems fantastic, I'll try and use it and see if I can develop from this. I'm very interested in creating the look and feel of an inbox ideally like gmail using gridview and ajax. Anybody got any leads?

   

  Smacks 

• • Reply
  

  bqiao

  Member

  16 Points

  16 Posts

  Re: Nested GridView with simple Dropdown effect

  Aug 09, 2007 11:23 AM|LINK

   It seems Visual studo doesn't like the incomplete </td></tr> tags and everytime I click the itemtemplate that holds the gridview (it's not shown either) on deisgn view, vs just removes all code inside it.
  

• • Reply
  

  m.abusafiah

  Member

  2 Points

  2 Posts

  Re: Nested GridView with simple Dropdown effect

  Jan 06, 2008 07:55 AM|LINK

  thank you alot for your work, since that is more that i need , but after i make the two nested grid view, the following error appears

  The RegisterRequiresViewStateEncryption() method needs to be called before or during Page_PreRender.

  could anybody know the solution for this error???

  2 B || ! 2 B - > ?
• • Reply
  

  vimalsaifudi...

  Member

  9 Points

  5 Posts

  Re: Nested GridView with simple Dropdown effect

  Mar 31, 2008 11:03 AM|LINK

  Hi etbramble,

  I just gone through your post regarding the nested gridview. I need to create the gridview dynamically inside the parent one. But when I tried your post it is showing jabascript error: object required.... How to solve this??? I am very new to this,,,,pls help me

• • Reply
  

  davidtivy

  Member

  453 Points

  164 Posts

  Re: Nested GridView with simple Dropdown effect

  Mar 31, 2008 01:24 PM|LINK

  Wonderful post! I use Gridviews all the time at work, I have got to say, thats impressive. Whats more impressive is your CV.

  A few more posts like that I you may be working for MS one day if your not already.
  

  Well done and good luck in the future.

  David

  Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as Answer” if a marked post does not actually answer your question.
  • Edited by davidtivy on Mar 31, 2008 01:26 PM
  • Edited by davidtivy on Mar 31, 2008 01:49 PM
• • Reply
  

  etbramble

  Member

  349 Points

  81 Posts

  Re: Nested GridView with simple Dropdown effect

  Mar 31, 2008 01:50 PM|LINK

  David - Thank you very much for the nice comment! 

  Vimalsaifudin - In order for the community to help you with your problem you are going to need to give us a little more info.  Please post your code and try to tell us where you think the problem is occurring.

   

  Thanks,

  -Tommy B.

• • Reply
  

  davidtivy

  Member

  453 Points

  164 Posts

  Re: Nested GridView with simple Dropdown effect

  Apr 01, 2008 03:07 PM|LINK

  Hi vimalsaifudin,

  How new to this are you?

  Perhaps you should buy a book on Javascript and ASP.net 2.0 before attempting coding of this nature?

   

  (etbramble: No worries, I have respect for winners thats all)

  Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as Answer” if a marked post does not actually answer your question.
  • Edited by davidtivy on Apr 01, 2008 03:08 PM