How to hide/show div in a nested repeater by clicking on a button inside parent repea

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Kevin Buck

    How to hide/show div in a nested repeater by clicking on a button inside parent repea

    Hi guys

    As per above question, the output I am getting at the moment, is my parent data displays along with my child data. However when I click on the button to toggle the views i am getting a "cannot cast type error"

    I have also tried to put the itemdatabound event in my parent repeater tag, that worked but when I click on the buttons it just keeps moving to the top of the page and won't hide or show any of the child data except for the first child of the first parent. And thats after hiding data in the div tags, won't show the others but will show the top. Can anyone help?

    Below is my current code:

    Code:
    <%@Page Language="VB" EnableEventValidation="false"%>
    <%@Import Namespace="System.Data" %>
    <%@Import Namespace="System.Data.OleDb" %>
    
    <script  runat="server">
        
        Dim ds As DataSet, divdtls, btnview, repeat
        
        Sub ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.RepeaterItemEventArgs)
            
            If e.Item.ItemType = ListItemType.Item Then
                Dim divdtls As HtmlGenericControl = CType(e.Item.FindControl("details"), HtmlGenericControl)
                Dim btnview As Button = CType(e.Item.FindControl("view"), Button)
                'Dim repeat As Repeater = CType(e.Item.FindControl("achievements"), Repeater)
                btnview.Attributes.Add("onclick", "javascript:displayAch(divdtls.ClientID)")
                'regames.DataSource = cachedListOfT.FindAll(delegate(FooDetails match) Return match.FooId.Equals(foo.FooId))
                'repeat.DataBind()
            End If
        End Sub
        
        Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Me.Load
            Dim daptGame As OleDbDataAdapter
            Dim daptAch As OleDbDataAdapter
            Dim dbconn As OleDbConnection
            
            dbconn = New OleDbConnection("Provider=Microsoft.ACE.OLEDB.12.0;data source=" & Server.MapPath("Xbox.accdb"))
            dbconn.Open()
            ds = New DataSet
            daptGame = New OleDbDataAdapter("SELECT * FROM PctQuery ORDER BY Pct Desc, WonQuery_Achievements DESC, WonQuery_GamerScore DESC", dbconn)
            daptAch = New OleDbDataAdapter("SELECT * FROM Achievements WHERE Won=True", dbconn)
            daptGame.Fill(ds, "PctQuery")
            daptAch.Fill(ds, "Achievements")
            ds.Relations.Add("gameach", ds.Tables("PctQuery").Columns("ScoreQuery_Game"), ds.Tables("Achievements").Columns("Game"))
            games.DataSource = ds.Tables("PctQuery")
            games.DataBind()
            dbconn.Close()
            
        End Sub
        
        Function CheckType(ByVal type As String)
            If type = "Arcade" Then
                Return "Arcade.png"
            ElseIf type = "Retail" Then
                Return "Retail.png"
            ElseIf type = "Kinect" Then
                Return "Kinect.png"
            End If
        End Function
        
        Function CheckPct(ByVal pct As String)
            If pct = "100" Then
                Return "lightgreen"
            Else
                Return "#f0f0f0"
            End If
        End Function
    
        Function UpperCase(ByVal upper As String)
            Return UCase(upper)
        End Function
        
    
    </script>
    
    <html>
    <body>
    
    <script type="text/javascript">
    
        function displayAch(repeaterID) {
    
            var element = document.getElementById(repeaterID).style.display
            if (element == 'none') {
                element = 'block';
            }
            else {
                element = 'none';
            }
        }
    </script>
    
    <form id="Form1" runat="server">
    <asp:Repeater id="games" runat="server">
    
    <HeaderTemplate>
    <table border="0" width="100%" bordercolor=black>
    <tr bgcolor="#F0F0F0">
    <th></th>
    <th align=left><font face="Calibri" size=3>&nbsp;&nbsp;&nbsp;GAME</font></th>
    <th align=right><font face="Calibri" size=3>ACHIEVEMENTS&nbsp;&nbsp;&nbsp;</font></th>
    <th align=right><font face="Calibri" size=3>GAMERSCORE&nbsp;&nbsp;&nbsp;</font></th>
    <th align=right><font face="Calibri" size=3>%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font></th>
    </tr>
    </HeaderTemplate>
    
    <ItemTemplate>
    
    <tr align=center bgcolor="#D8DEE9">
    <td width=30><br>&nbsp;&nbsp;<asp:Button id="view" Text="View" runat="server" OnClick="ItemDataBound" AutoPostBack=True />
    <b><img src="<%# Container.DataItem("ScoreQuery_Game")%>.jpg"></b></td>
    <td width=400 align=left><font face="Calibri" size=5>&nbsp;&nbsp;<b><%# UpperCase(Container.DataItem("ScoreQuery_Game"))%> </b></td>
    <td width=100 align=right><font face="Calibri" size=5><b><%# Container.DataItem("WonQuery_Achievements")%> / <%# Container.DataItem("ScoreQuery_Achievements")%></b>&nbsp;<img src="Trophy.png">&nbsp;&nbsp;</td>
    <td width=150 align=right><font face="Calibri" size=5><b><%# Container.DataItem("WonQuery_GamerScore")%> / <%# Container.DataItem("ScoreQuery_GamerScore")%></b>&nbsp;<img src="Glyph.png">&nbsp;&nbsp;</td>
    <td width=150 background=<%# CheckType(Container.DataItem("Type"))%> align=right><font face="Calibri" size=10 color=white><B><%# CUInt(Container.DataItem("Pct"))%></B>&nbsp;&nbsp;</td>
    </tr>
    
    <div id="details" runat="server" style="display:none">
    <asp:Repeater id="achievements" runat="server" datasource=<%# CType(Container.DataItem, DataRowView).Row.GetChildRows("gameach")%>>
    
    <HeaderTemplate>
    <table border="0" width="100%" bordercolor=black>
    </HeaderTemplate>
    
    <ItemTemplate>
    
    <tr>
    <td>&nbsp;</td>
    <td width=400 align=left><font face="Calibri" size=3>&nbsp;&nbsp;&nbsp;<b><%# Container.DataItem("Achievement")%></b></td>
    <td width=100 align=right><font face="Calibri" size=3><b><%# Container.DataItem("Gamerscore")%></b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td></td>
    <td></td>
    </tr>
    
    </ItemTemplate>
    
    <FooterTemplate>
    </table>
    </FooterTemplate>
    
    </asp:Repeater>
    
    </div>
    </ItemTemplate>
    
    <FooterTemplate>
    </table>
    </FooterTemplate>
    
    </asp:Repeater>
    
    </form>
    
    
    </body>
    </html>
  • Frinavale
    Recognized Expert Expert
    • Oct 2006
    • 9749

    #2
    I don't have time right now to read through all of the code you've posted (you really should consider using CSS) but I have a feeling that you may be interested in checking out what I have done in this JavaScript snippet I've posted here: Show/Hide columns

    I know that that snippet shows/hides columns and you're not looking to do that...

    So you might also be interested in checking out my reply to this thread here:Expand/Collapse GridView ChildView

    -Frinny

    Comment

    Working...