Can anyone guide me in the right direction or give an example of How I would accomplish this?
I have this so far but kind of stuck on how to do it programtically if I'm using header and content templates
I have a xmldatasource.. In a nutshell at what point in my code do I need to create a new accordion? does it need to be
in the item_databound handler?
Imports Microsoft.VisualBasic
Public Class AccordionTemplate
Implements System.Web.UI.ITemplate
Dim templateType As String
Sub New(ByVal type As String)
templateType = type
End Sub
Public Sub InstantiateIn(ByVal container As System.Web.UI.Control) _
Implements System.Web.UI.ITemplate.InstantiateIn
Dim ph As New PlaceHolder()
Select Case (templateType)
Case "Header"
Dim myLabel As Label = New Label()
myLabel.Text = "Test"
ph.Controls.Add(myLabel)
Case "Content"
ph.Controls.Add(New LiteralControl("<p>hello</p>"))
End Select
container.Controls.Add(ph)
End Sub
End Class
Partial Class Accordion
Inherits System.Web.UI.Page
Protected Sub AddDetailAccordion(ByVal levels As Integer)
Dim parentAd As New AjaxControlToolkit.Accordion
parentAd.ID = "MyAccordion"
parentAd.HeaderCssClass = "accordionHeader"
parentAd.ContentCssClass = "accordionContent"
parentAd.RequireOpenedPane = "false"
parentAd.FadeTransitions = "True"
parentAd.SelectedIndex = "-1"
parentAd.SuppressHeaderPostbacks = "true"
parentAd.FramesPerSecond = "40"
parentAd.TransitionDuration = "250"
parentAd.HeaderCssClass = "accordionHeader"
parentAd.HeaderSelectedCssClass = "accordionHeaderSelected"
parentAd.ContentCssClass = "accordionContent"
parentAd.DataSourceID = "XmlDataSourceVinylWindows"
parentAd.HeaderTemplate = New AccordionTemplate("Header")
parentAd.ContentTemplate = New AccordionTemplate("Content")
Panel1.Controls.Add(parentAd)
End Sub
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
AddDetailAccordion(1)
End Sub
That Helps but not sure it's what I need or maybe I just don't see it..I'm trying to do what's below programtically in Code behind..I don't want to use design view because if I wanted lets say 10 nested accordions then I would have to manually code them
in design view..Kind of seems static to me. I have my design view below..How can I convert that design view into code behind where I can specify how many levels I want my accordion and it would build it on the fly. I have already looked at
http://forums.asp.net/t/1260443.aspx but still can't seee to figure it out.. Think what's getting me is how I set datasource for each dynamic accordion and how I would populate the label controls and all that good stuff. I'm using
templates too which further confuses how I would do that from codebehind..anyhow..any help is greatly appreciated
Well, I think I finally was able to come up with something. I would like your opinions on the design and if
any improvments/design changes could make this more efficient or practical in real life scenarios. I'm fairly new to asp.net so I'm sure there is probably a much better way to accomplish this but this works for me for right now. Here is my code.. It's a
user control. I tested it 5 levels deep
Imports Microsoft.VisualBasic
Imports AjaxControlToolkit
Imports System.Xml
''' <summary>
''' MultilevelAccordion builds an AjaxControlToolkit Accordion nested specified levels deep
''' The nested levels is Data driven by an XML element called <XMLFILE>name_of_file.xml</XMLFILE>
''' During Item DataBound if it finds an XML element called <XMLFILE></XMLFILE> this is trigger
''' to create a new Sub Accordion. The specified <XMLFILE>name_of_file.xml</XMLFILE> would contain the
''' headers and content info for the sub accordion.
''' </summary>
''' <remarks></remarks>
'''
Public Class MultilevelAccordion
Inherits System.Web.UI.UserControl
''' <summary>
''' Counter added to Sub Accordion IDS to avoid duplicate ID errors
''' </summary>
''' <remarks></remarks>
Private _count As Integer = 1
Private _doc As New XmlDocument
' Xml file passed in to User Control
Public xml As String
' XPATH
Public Xp As String
' Contains current Datasource
Private _currentDataSource As Object
''' <summary>
''' Public Property to set XmlFile
''' </summary>
''' <value></value>
''' <returns></returns>
''' <remarks></remarks>
Public Property XmlFile() As String
Get
Return Me.xml
End Get
Set(ByVal value As String)
Me.xml = value
End Set
End Property
''' <summary>
''' Public Poperty to set XPATH of Datasource
''' </summary>
''' <value></value>
''' <returns></returns>
''' <remarks></remarks>
Public Property XmlXpath() As String
Get
Return Me.Xp
End Get
Set(ByVal value As String)
Me.Xp = value
End Set
End Property
''' <summary>
''' Item_Databinding. Called by Parent accordion and all sub Accordions during Item Databinding
''' </summary>
''' <param name="sender"></param>
''' <param name="e"></param>
''' <remarks></remarks>
Sub Item_DataBinding(ByVal sender As Object, ByVal e As AccordionItemEventArgs)
Dim currentAcc As Accordion = DirectCast(sender, Accordion)
Dim itemNode As XmlNode = DirectCast(e.AccordionItem.DataItem, XmlNode)
Dim headerLabel As Label
If e.AccordionItem.ItemType = AjaxControlToolkit.AccordionItemType.Header Then
headerLabel = DirectCast(e.AccordionItem.FindControl("AccordionHeader"), Label)
headerLabel.Text = itemNode.SelectSingleNode("DISPLAY").InnerText
End If
If e.AccordionItem.ItemType = AjaxControlToolkit.AccordionItemType.Content Then
' Test if we need to create a Sub Accordion
Dim objtest = itemNode.SelectSingleNode("XMLFILE")
If Not (objtest Is Nothing) Then
' Define Sub Accordion
Dim accSub As New Accordion
accSub.ID = "SubAccordion" + _count.ToString
accSub.HeaderCssClass = "accordionHeader"
accSub.ContentCssClass = "accordionContent"
accSub.RequireOpenedPane = "false"
' Don't want any open panes on load
accSub.SelectedIndex = "-1"
accSub.SuppressHeaderPostbacks = "true"
accSub.HeaderCssClass = "accordionHeader"
accSub.HeaderSelectedCssClass = "accordionHeaderSelected"
accSub.ContentCssClass = "accordionContent"
accSub.HeaderTemplate = New AccordionTemplate(AccordionItemType.Header)
accSub.ContentTemplate = New AccordionTemplate(AccordionItemType.Content)
' Load Xml File
_doc.Load(Server.MapPath("~") + "\Xml\" + objtest.InnerText)
_currentDataSource = _doc.SelectNodes(XmlXpath())
' Set DataSource for Sub Accordion
accSub.DataSource = _currentDataSource
AddHandler accSub.ItemDataBound, New EventHandler(Of AccordionItemEventArgs)(AddressOf Item_DataBinding)
currentAcc.Panes.Item(currentAcc.Panes.Count - 1).ContentContainer.Controls.Add(accSub)
' Increment Counter
_count += 1
accSub.DataBind()
Else
currentAcc.Panes.Item(currentAcc.Panes.Count - 1).ContentContainer.Controls.Add(New LiteralControl("<p>hello</p>"))
'build content
End If
End If
End Sub
''' <summary>
'''
''' </summary>
''' <param name="sender"></param>
''' <param name="e"></param>
''' <remarks></remarks>
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
accComplexData.HeaderTemplate = New AccordionTemplate(AccordionItemType.Header)
accComplexData.ContentTemplate = New AccordionTemplate(AccordionItemType.Header)
' Load xml for Accordion,
' set _currentDataSource for Accordion and
' bind Accordion to Data Source
_doc.Load(Server.MapPath("~") + "\Xml\" + XmlFile())
_currentDataSource = _doc.SelectNodes(XmlXpath())
accComplexData.DataSource = _currentDataSource
accComplexData.DataBind()
End Sub
End Class
davide128
Member
80 Points
155 Posts
Create databound nested ajax toolkit accordion programatically(In code Behind)
Aug 24, 2010 06:47 PM|LINK
Can anyone guide me in the right direction or give an example of How I would accomplish this?
I have this so far but kind of stuck on how to do it programtically if I'm using header and content templates
I have a xmldatasource.. In a nutshell at what point in my code do I need to create a new accordion? does it need to be
in the item_databound handler?
Imports Microsoft.VisualBasic Public Class AccordionTemplate Implements System.Web.UI.ITemplate Dim templateType As String Sub New(ByVal type As String) templateType = type End Sub Public Sub InstantiateIn(ByVal container As System.Web.UI.Control) _ Implements System.Web.UI.ITemplate.InstantiateIn Dim ph As New PlaceHolder() Select Case (templateType) Case "Header" Dim myLabel As Label = New Label() myLabel.Text = "Test" ph.Controls.Add(myLabel) Case "Content" ph.Controls.Add(New LiteralControl("<p>hello</p>")) End Select container.Controls.Add(ph) End Sub End ClassPartial Class Accordion Inherits System.Web.UI.Page Protected Sub AddDetailAccordion(ByVal levels As Integer) Dim parentAd As New AjaxControlToolkit.Accordion parentAd.ID = "MyAccordion" parentAd.HeaderCssClass = "accordionHeader" parentAd.ContentCssClass = "accordionContent" parentAd.RequireOpenedPane = "false" parentAd.FadeTransitions = "True" parentAd.SelectedIndex = "-1" parentAd.SuppressHeaderPostbacks = "true" parentAd.FramesPerSecond = "40" parentAd.TransitionDuration = "250" parentAd.HeaderCssClass = "accordionHeader" parentAd.HeaderSelectedCssClass = "accordionHeaderSelected" parentAd.ContentCssClass = "accordionContent" parentAd.DataSourceID = "XmlDataSourceVinylWindows" parentAd.HeaderTemplate = New AccordionTemplate("Header") parentAd.ContentTemplate = New AccordionTemplate("Content") Panel1.Controls.Add(parentAd) End Sub Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load AddDetailAccordion(1) End SubSong-Tian - ...
All-Star
43705 Points
4304 Posts
Microsoft
Re: Create databound nested ajax toolkit accordion programatically(In code Behind)
Aug 27, 2010 07:54 AM|LINK
Hi,
Please refer to:
http://www.asp.net/ajax/tutorials/databinding-to-an-accordion-cs
http://www.ajaxtutorials.com/ajax-tutorials/learn-how-to-databind-to-an-accordion-using-the-asp-net-3-5-ajax-control-toolkit/
http://aspalliance.com/1674_Complex_Data_Binding_with_the_Accordion_Control.all
http://forums.asp.net/p/1064948/1538311.aspx.
Feedback to us
Develop and promote your apps in Windows Store
davide128
Member
80 Points
155 Posts
Re: Create databound nested ajax toolkit accordion programatically(In code Behind)
Aug 27, 2010 08:10 PM|LINK
That Helps but not sure it's what I need or maybe I just don't see it..I'm trying to do what's below programtically in Code behind..I don't want to use design view because if I wanted lets say 10 nested accordions then I would have to manually code them in design view..Kind of seems static to me. I have my design view below..How can I convert that design view into code behind where I can specify how many levels I want my accordion and it would build it on the fly. I have already looked at http://forums.asp.net/t/1260443.aspx but still can't seee to figure it out.. Think what's getting me is how I set datasource for each dynamic accordion and how I would populate the label controls and all that good stuff. I'm using templates too which further confuses how I would do that from codebehind..anyhow..any help is greatly appreciated
<ajaxToolkit:ToolkitScriptManager EnablePartialRendering="true" runat="Server" ID="ToolkitScriptManager1" /> <div> <asp:XmlDataSource ID="XmlDataSource" runat="server" DataFile="~/Xml/SeriesNames.xml" XPath="MAKE/SERIES"> </asp:XmlDataSource> <ajaxtoolkit:Accordion ID="accComplexData" runat="server" SelectedIndex="-1" RequireOpenedPane="false" HeaderCssClass="accordionHeader" HeaderSelectedCssClass ="accordionHeaderSelected" ContentCssClass="accordionContent" DataSourceID="XmlDataSource" AutoSize="None"> <HeaderTemplate> <asp:Label ID="ProductLine" runat="server" Text='<%# XPath("DISPLAY")%>' /> </HeaderTemplate> <ContentTemplate> <asp:XmlDataSource ID="XmlDataSource2" runat="server" DataFile='<%# XPath("XMLFILE")%>' XPath="PRODUCT/MODEL"> </asp:XmlDataSource> <ajaxtoolkit:Accordion ID="accComplexDataSub" runat="server" SelectedIndex="-1" RequireOpenedPane="false" HeaderCssClass="accordionHeader" HeaderSelectedCssClass ="accordionHeaderSelected" ContentCssClass="accordionContent" DataSourceID="XmlDataSource2" AutoSize="None"> <HeaderTemplate> <asp:Label ID="ProductLine" runat="server" Text='<%# XPath("DISPLAYTEXT")%>' /> </HeaderTemplate> <ContentTemplate> </ContentTemplate> </ajaxtoolkit:Accordion> </ContentTemplate> </ajaxtoolkit:Accordion>XML FILE SERIESNAMES.xml
<MAKE> <SERIES id="Series4"> <DISPLAY>Series 4</DISPLAY> <XMLFILE>~/Xml/Series4.xml</XMLFILE> </SERIES> <SERIES id="Series21"> <DISPLAY>Series 21</DISPLAY> <XMLFILE>~/Xml/Series21.xml</XMLFILE> </SERIES> </MAKE>XMLFILE Series4 and Series5.xml Format
<PRODUCT> <MODEL id="460"> <DISPLAYTEXT> Series 460</DISPLAYTEXT> </MODEL> </PRODUCT>davide128
Member
80 Points
155 Posts
Re: Create databound nested ajax toolkit accordion programatically(In code Behind)
Sep 01, 2010 12:24 PM|LINK
Well, I think I finally was able to come up with something. I would like your opinions on the design and if
any improvments/design changes could make this more efficient or practical in real life scenarios. I'm fairly new to asp.net so I'm sure there is probably a much better way to accomplish this but this works for me for right now. Here is my code.. It's a user control. I tested it 5 levels deep
Imports Microsoft.VisualBasic Imports AjaxControlToolkit Imports System.Xml ''' <summary> ''' MultilevelAccordion builds an AjaxControlToolkit Accordion nested specified levels deep ''' The nested levels is Data driven by an XML element called <XMLFILE>name_of_file.xml</XMLFILE> ''' During Item DataBound if it finds an XML element called <XMLFILE></XMLFILE> this is trigger ''' to create a new Sub Accordion. The specified <XMLFILE>name_of_file.xml</XMLFILE> would contain the ''' headers and content info for the sub accordion. ''' </summary> ''' <remarks></remarks> ''' Public Class MultilevelAccordion Inherits System.Web.UI.UserControl ''' <summary> ''' Counter added to Sub Accordion IDS to avoid duplicate ID errors ''' </summary> ''' <remarks></remarks> Private _count As Integer = 1 Private _doc As New XmlDocument ' Xml file passed in to User Control Public xml As String ' XPATH Public Xp As String ' Contains current Datasource Private _currentDataSource As Object ''' <summary> ''' Public Property to set XmlFile ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property XmlFile() As String Get Return Me.xml End Get Set(ByVal value As String) Me.xml = value End Set End Property ''' <summary> ''' Public Poperty to set XPATH of Datasource ''' </summary> ''' <value></value> ''' <returns></returns> ''' <remarks></remarks> Public Property XmlXpath() As String Get Return Me.Xp End Get Set(ByVal value As String) Me.Xp = value End Set End Property ''' <summary> ''' Item_Databinding. Called by Parent accordion and all sub Accordions during Item Databinding ''' </summary> ''' <param name="sender"></param> ''' <param name="e"></param> ''' <remarks></remarks> Sub Item_DataBinding(ByVal sender As Object, ByVal e As AccordionItemEventArgs) Dim currentAcc As Accordion = DirectCast(sender, Accordion) Dim itemNode As XmlNode = DirectCast(e.AccordionItem.DataItem, XmlNode) Dim headerLabel As Label If e.AccordionItem.ItemType = AjaxControlToolkit.AccordionItemType.Header Then headerLabel = DirectCast(e.AccordionItem.FindControl("AccordionHeader"), Label) headerLabel.Text = itemNode.SelectSingleNode("DISPLAY").InnerText End If If e.AccordionItem.ItemType = AjaxControlToolkit.AccordionItemType.Content Then ' Test if we need to create a Sub Accordion Dim objtest = itemNode.SelectSingleNode("XMLFILE") If Not (objtest Is Nothing) Then ' Define Sub Accordion Dim accSub As New Accordion accSub.ID = "SubAccordion" + _count.ToString accSub.HeaderCssClass = "accordionHeader" accSub.ContentCssClass = "accordionContent" accSub.RequireOpenedPane = "false" ' Don't want any open panes on load accSub.SelectedIndex = "-1" accSub.SuppressHeaderPostbacks = "true" accSub.HeaderCssClass = "accordionHeader" accSub.HeaderSelectedCssClass = "accordionHeaderSelected" accSub.ContentCssClass = "accordionContent" accSub.HeaderTemplate = New AccordionTemplate(AccordionItemType.Header) accSub.ContentTemplate = New AccordionTemplate(AccordionItemType.Content) ' Load Xml File _doc.Load(Server.MapPath("~") + "\Xml\" + objtest.InnerText) _currentDataSource = _doc.SelectNodes(XmlXpath()) ' Set DataSource for Sub Accordion accSub.DataSource = _currentDataSource AddHandler accSub.ItemDataBound, New EventHandler(Of AccordionItemEventArgs)(AddressOf Item_DataBinding) currentAcc.Panes.Item(currentAcc.Panes.Count - 1).ContentContainer.Controls.Add(accSub) ' Increment Counter _count += 1 accSub.DataBind() Else currentAcc.Panes.Item(currentAcc.Panes.Count - 1).ContentContainer.Controls.Add(New LiteralControl("<p>hello</p>")) 'build content End If End If End Sub ''' <summary> ''' ''' </summary> ''' <param name="sender"></param> ''' <param name="e"></param> ''' <remarks></remarks> Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load accComplexData.HeaderTemplate = New AccordionTemplate(AccordionItemType.Header) accComplexData.ContentTemplate = New AccordionTemplate(AccordionItemType.Header) ' Load xml for Accordion, ' set _currentDataSource for Accordion and ' bind Accordion to Data Source _doc.Load(Server.MapPath("~") + "\Xml\" + XmlFile()) _currentDataSource = _doc.SelectNodes(XmlXpath()) accComplexData.DataSource = _currentDataSource accComplexData.DataBind() End Sub End Class