Changing an Accordion Image Header when selected

Last post 04-10-2008 6:15 PM by kabrown. 1 replies.

Sort Posts:

  • Changing an Accordion Image Header when selected

    03-31-2008, 9:06 PM
    • Member
      24 point Member
    • kabrown
    • Member since 05-16-2007, 1:20 PM
    • Posts 29

    I would be so grateful, if someone could help me with the following scenario. 

    I've got a master page, which has an accordion.  I'm using the accordion in every page of my website.  So, I've gotten the accordion to remember which section to keep open depending on where the user is in the sitemap.  I did this by comparing an id in the query string to the second level id of the accordion menu (which is database driven).

    The headers of the accordion are images.  I want a light version of the image when not selected and a dark version of the image when selected, a visual cue as to which section is active.  I find that I'm doing the comparison of the query string id to the second level id in the ItemDataBound of the Repeater for the Accordion to determine what the Accordion's selected index is.  And at this point I should set the url for the image header to the dark version.  But, I'm stuck as to how I can access the image from the Accordion Header.  Anyone have any ideas?

    I tried this, but did not work:  DirectCast(accNavMenu.FindControl("TopNavImage"), Image).ImageUrl

    Anyone have any idea how to set the accordion's headertemplate/image url from the itemtemplate/repeater within the ItemBound of repeater? 

    I've listed a code snippet below.  Thanks in Advance!

     

    <ajaxToolkit:Accordion ID="accNavMenu" runat="server"

    OnItemDataBound="accNavMenu_ItemDataBound"

    FramesPerSecond="40" TransitionDuration="250"

    AutoSize="None" RequireOpenedPane="false" SuppressHeaderPostbacks="false"

    HeaderCssClass="accordionHeader" ContentCssClass="accordionContent" >

    <Panes></Panes>

    <HeaderTemplate><asp:Image ID="TopNavImage" runat="server" /></HeaderTemplate>

    <ContentTemplate>

    <asp:Repeater ID="rptLinks" runat="Server" OnItemDataBound="rptLinks_ItemDataBound">

     

    <ItemTemplate>

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="./Images/arrow_gray.jpg" alt="arrow" id="arrow" />

    <asp:HyperLink ID="lnk" runat="server"></asp:HyperLink><br />

    <asp:Label ID="lblNavHeaderId" runat="server" Text="" Visible="false"></asp:Label>

    <asp:Label ID="lblNavId" runat="server" Text="" Visible="false"></asp:Label>

    </ItemTemplate>

     

    </asp:Repeater>

    </ContentTemplate>

    </ajaxToolkit:Accordion>

     

    Imports System
    Imports System.Collections
    Imports System.Collections.Generic
    Imports System.Configuration
    Imports System.Data
    Imports System.Web
    Imports System.Web.Security
    Imports System.Web.UI
    Imports System.Web.UI.HtmlControls
    Imports System.Web.UI.WebControls
    Imports System.Web.UI.WebControls.WebParts
    Imports System.Data.SqlClient
    Imports AjaxControlToolkit
    Partial Class Skeeter
        Inherits System.Web.UI.MasterPage
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
            If Not IsPostBack Then
                Dim levelId As String = Request.QueryString("levelId")
                ParseOutput.Text = levelId
                BindCategoryData()
            End If

        End Sub

        Protected Sub BindCategoryData()
            ''Create the stored procedure command object
            Dim connectionString As String = ConfigurationManager.ConnectionStrings("Skeeter").ConnectionString
            Dim dbConnection As SqlConnection = New SqlConnection(connectionString)
            Dim dbCommand As SqlCommand = New SqlCommand("GetLeftNavigation", dbConnection)
            dbCommand.CommandType = CommandType.StoredProcedure
            ''create the parameter object for the stored procedure if there were any parameters
            ''create our DataAdapter and DataSet objects
            Dim objDA As New SqlDataAdapter(dbCommand)
            Dim objDS As New DataSet()
            ''fill the dataset
            objDA.Fill(objDS)
            objDS.Tables(0).TableName = "Headers"
            objDS.Tables(1).TableName = "Links"
            objDS.Relations.Add("LinksByHeader", objDS.Tables("Headers").Columns("NavHeaderId"), objDS.Tables("Links").Columns("NavHeaderID"))
            ''close connection
            dbConnection.Close()
            ''Bind
            accNavMenu.DataSource = objDS.Tables("Headers").Rows
            accNavMenu.DataBind()
           
        End Sub
        Sub accNavMenu_ItemDataBound(ByVal sender As Object, ByVal e As AccordionItemEventArgs)
            If e.AccordionItem.ItemType = AccordionItemType.Header Then
                DirectCast(e.AccordionItem.FindControl("TopNavImage"), Image).ImageUrl = DirectCast(e.AccordionItem.DataItem, DataRow)("leftnavimageoff").ToString()
                Dim levelId As String = Request.QueryString("levelId")
                'Set Selected Index dynamically in repeater 'accNavMenu.SelectedIndex = 2
            Else
                Dim rptLinks As Repeater = DirectCast(e.AccordionItem.FindControl("rptLinks"), Repeater)
                rptLinks.DataSource = DirectCast(e.AccordionItem.DataItem, DataRow).GetChildRows("LinksByHeader")
                rptLinks.DataBind()
            End If
        End Sub
        Private Sub MyAccordion_ItemCommand(ByVal sender As Object, ByVal e As CommandEventArgs)
            'Response.Write(e.CommandName + " Fired on " + DateTime.Now.ToString())
        End Sub
        Protected Sub rptLinks_ItemDataBound(ByVal sender As Object, ByVal e As RepeaterItemEventArgs)
            If e.Item.ItemType = ListItemType.Item OrElse e.Item.ItemType = ListItemType.AlternatingItem Then
                Dim dr As DataRow = DirectCast(e.Item.DataItem, DataRow)
                Dim lnk As HyperLink = DirectCast(e.Item.FindControl("lnk"), HyperLink)
                lnk.NavigateUrl = dr("linkurl").ToString()
                lnk.Text = dr("linktext").ToString()
                'get the level from the query string
                'If levelid is the link being rendered, set the selectedindex to the parentid
                Dim levelId As String = Request.QueryString("levelId")
                Dim childi = dr.ItemArray(0)
                Dim parenti = dr.ItemArray(1)
                If levelId = childi Then
                    parenti = parenti - 2
                    accNavMenu.SelectedIndex = parenti
                   'How can I set the TopNavImage URL to something different here
                  'Theory being if this section is selected, the header image should be darker than the others
                End If
            End If
        End Sub
       
        Protected Sub BindSubCategoryData()
            Dim connectionString As String = ConfigurationManager.ConnectionStrings("Skeeter").ConnectionString
            Dim dbConnection As SqlConnection = New SqlConnection(connectionString)
            Dim dbCommand As SqlCommand = New SqlCommand("GetNavigation", dbConnection)
            dbCommand.CommandType = CommandType.StoredProcedure

            'Set parms
            Dim dbparam_parentid As SqlParameter = New SqlParameter("@parentlevelid", SqlDbType.Int)
            dbparam_parentid.Value = 2
            dbCommand.Parameters.Add(dbparam_parentid)

            dbConnection.Open()
            Dim rd As System.Data.SqlClient.SqlDataReader = dbCommand.ExecuteReader()
            rd.Close()
            dbConnection.Close()
        End Sub
        
       End Class

     

  • Re: Changing an Accordion Image Header when selected

    04-10-2008, 6:15 PM
    • Member
      24 point Member
    • kabrown
    • Member since 05-16-2007, 1:20 PM
    • Posts 29

    Ooops, didn't realize I had posted this question twice, here's the active thread:

    http://forums.asp.net/p/1242295/2290308.aspx#2290308

Page 1 of 1 (2 items)