Introduction
Ajax is a powerful addition to asp.net that provides new functionality in a simple and agile way
This post is dedicated to creating a menu with ajax
accordion type.
About the Control
The basic idea of this control, is to provide a serie of panels and show and hide information inside these panels. The use is very simple, we have to set each panel inside
accordion control and give to each panel a Header and of course, we have to set the content of each panel.
To use
accordion control, u need the ajax control toolkit.
know the basic propertyes of
accordion control:
Before start developing an
accordion control, we have to know the basic properties for this control
Other
accordion propertyes
FramesPerSecond - Number of frames per second used in the transition animations
RequireOpenedPane - Prevent closing the currently opened pane when its header is clicked (which ensures one pane is always open). The default value is true.
SuppressHeaderPostbacks - Prevent the client-side click handlers of elements inside a header from firing (this is especially useful when you want to include hyperlinks in your headers for accessibility)
DataSource - The data source to use. DataBind() must be called.
DataSourceID - The ID of the data source to use.
DataMember - The member to bind to when using a DataSourceID
AJAX
Accordion Control Extender DataSource
The
Accordion Control extender of AJAX Control toolkit can also be used as DataBound control. You can bind the data retrieved from the database to the
Accordion control.
Accordion Control consists of properties such as DataSource and DataSourceID (we can se it above) that can be used to bind the data. HeaderTemplate can used to display the header or title for the pane generated by the
Accordion control, a click on which will open or close the ContentTemplate generated by binding the data with
Accordion extender.
When DataSource is passed to the
Accordion control, also use the DataBind method to bind the data. The
Accordion control bound with data auto generates the expand/collapse panes along with their headers.
This code represents the basic steps to bind the
Accordion to a Datasource
Collapse
Public Sub getCategories() Dim sqlConn As New SqlConnection(conString) sqlConn.Open() Dim sqlSelect As New SqlCommand("SELECT * FROM Categories", sqlConn) sqlSelect.CommandType = System.Data.CommandType.Text Dim sqlAdapter As New SqlDataAdapter(sqlSelect) Dim myDataset As New DataSet() sqlAdapter.Fill(myDataset) sqlConn.Close() Accordion1.DataSource = myDataset.Tables(0).DefaultView Accordion1.DataBind()End Sub Protected Sub Accordion1_ItemDataBound(sender As Object, _ e As AjaxControlToolkit.AccordionItemEventArgs) If e.ItemType = AjaxControlToolkit.AccordionItemType.Content Then Dim sqlConn As New SqlConnection(conString) sqlConn.Open() Dim sqlSelect As New SqlCommand("SELECT productName " & _ "FROM Products where categoryID = '" + _ DirectCast(e.AccordionItem.FindControl("txt_categoryID"),_ HiddenField).Value + "'", sqlConn) sqlSelect.CommandType = System.Data.CommandType.Text Dim sqlAdapter As New SqlDataAdapter(sqlSelect) Dim myDataset As New DataSet() sqlAdapter.Fill(myDataset) sqlConn.Close() Dim grd As New GridView() grd = DirectCast(e.AccordionItem.FindControl("GridView1"), GridView) grd.DataSource = myDataset grd.DataBind() End If End Sub
In the above code, we made two things, first, we made a sql select to database to retrieve all data from categories table, this data will be used to set the header and columns of the
accordion.
Collapse
<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <ajaxToolkit:Accordion ID="Accordion1" runat="server" TransitionDuration="100"
FramesPerSecond="200" FadeTransitions="true" RequireOpenedPane="false"
OnItemDataBound="Accordion1_ItemDataBound" ContentCssClass="acc-content" HeaderCssClass="acc-header"
HeaderSelectedCssClass="acc-selected"> <HeaderTemplate> <%#DataBinder.Eval(Container.DataItem,"categoryName") %> </HeaderTemplate> <ContentTemplate> <asp:HiddenField ID="txt_categoryID" runat="server"
Value='<%#DataBinder.Eval(Container.DataItem,"categoryID") %>'
/> <asp:GridView ID="GridView1" runat="server"
RowStyle-BackColor="#ededed" RowStyle-HorizontalAlign="Left" AutoGenerateColumns="false" GridLines="None" CellPadding="2"
CellSpacing="2" Width="300px"> <Columns> <asp:TemplateField
HeaderStyle-HorizontalAlign="Left" HeaderText="Product Name"
HeaderStyle-BackColor="#d1d1d1" HeaderStyle-ForeColor="#777777"> <ItemTemplate> <%#DataBinder.Eval(Container.DataItem,"productName") %> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </ContentTemplate> </ajaxToolkit:Accordion>
Here, we use <%#DataBinder.Eval(Container.DataItem,"categoryName") %> to bind
accordion header with categoryName, so we made on header for each element found on database.
Creating a basic
accordion control
As we know, to use any of the ajax components, there must be a registered ScriptManager on our site, which will be responsible for managing our controls. So the first thing we will do is create our script manager.
Collapse
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
Then we define our
accordion element and establish some basic properties:
Collapse
<cc1:Accordion ID="AccordionCtrl" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent" AutoSize="None" FadeTransitions="true" TransitionDuration="250" FramesPerSecond="40"
For our work we must declare PANES
accordion inside it, these breads will be responsible for contain information, links or information that we want to show.
Collapse
<Panes> <cc1:AccordionPane ID="AccordionPane0" runat="server"> <Header>Matenimiento</Header> <Content> <li><a href="mypagina.aspx">My página de prueba</a></li> </Content> </cc1:AccordionPane>
To end this work, we have to close all panels and our
accordion
Collapse
</Panes> </cc1:Accordion>
Finally complete our example should look like:
Collapse
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> <cc1:Accordion ID="AccordionCtrl" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent" AutoSize="None" FadeTransitions="true" TransitionDuration="250" FramesPerSecond="40"> <Panes> <cc1:AccordionPane ID="AccordionPane0" runat="server"> <Header>Matenimiento</Header> <Content> <li><a href="mypagina.aspx">My página de prueba</a></li> </Content> </cc1:AccordionPane> </Panes> </cc1:Accordion>
