Database Binding with Accordion Control
This article demonstrates how to bind Accordion Control with database in
ASP.Net using Ajax’s.
Note: We are assuming that you have already completed the installation of
the Ajax Toolkit as well as have a basic understanding of coding.
About the control:
The Accordion is a web control that allows you to provide multiple panes and
display them one at a time. It is like having several CollapsiblePanels where
only one can be expanded at a time. The Accordion is implemented as a web
control that contains AccordionPane web controls. Each AccordionPane
control has a template for its Header and its Content. We keep track of the
selected pane so it stays visible across postbacks.
It also supports three AutoSize modes so it can fit in a variety of layouts.



None - The Accordion grows/shrinks without restriction. This can
cause other elements on your page to move up and down with it.
Limit - The Accordion never grows larger than the value specified by
its Height property. This will cause the content to scroll if it is too large
to be displayed.
Fill - The Accordion always stays the exact same size as its Height
property. This will cause the content to be expanded or shrunk if it
isn't the right size.
The Accordion is written using an extender like most of the other extenders
in the AJAX Control Toolkit. The extender expects its input in a very specific
hierarchy of container elements (like divs), so the Accordion and
AccordionPane web controls are used to generate the expected input for the
extender. The extender can also be used on its own if you provide it
appropriate input.
This article provides a few steps which will be easy to follow.
Step 1:
Before you can use any of the Ajax Control Toolkit controls in a page, you
first need to add a ScriptManager to the page. You can drag the
ScriptManager from the Visual Studio Toolbox window onto the page. The
ScriptManager is located in the Ajax Control Toolkit tab under the Toolbox.
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
Step 2:
Create one which is look like
<style type="text/css">
.accordion-header, .accordion-selected {
width: 300px;
background-color: #c0c0c0;
margin-bottom:2px;
padding:2px;
color:#444444;
font-weight:bold;
cursor:pointer;
}
.accordion-content {
width:300px;
margin-bottom:2px;
padding:2px;
}
.accordion-selected, .accordion-content {
border:solid 1px #666666;
}
</style>
Step 3:
Drag Accordion Control from ToolBox.which look like
<cc1:Accordion ID="Accordion1" runat="server">
</cc1:Accordion>
Step 4:
Apply some css on it and change its property according to the
requirement.
<cc1:Accordion ID="Accordion1" runat="server"
TransitionDuration="100" SelectedIndex=-1 FramesPerSecond="200"
FadeTransitions="true" RequireOpenedPane="false"
ContentCssClass="accordion-content" HeaderCssClass="accordionheader" HeaderSelectedCssClass="accordion-selected" >
</cc1:Accordion>
Step 5:
Genrates it OnItemDataBound events.
Which look like
<cc1:Accordion ID="Accordion1" runat="server"
TransitionDuration="100" SelectedIndex=-1 FramesPerSecond="200"
FadeTransitions="true" RequireOpenedPane="false"
OnItemDataBound="Accordion1_ItemDataBound"
ContentCssClass="accordion-content"
HeaderCssClass="accordion-header"
HeaderSelectedCssClass="accordion-selected" >
</cc1:Accordion>
Step 6:
Create one Method getData and call it in page load event.Which
Look like
public void getData()
{
SqlConnection sqlConn = new SqlConnection("Data
Source=C3;Initial Catalog=Employee;Persist Security
Info=True;User ID=sa;Password=p@ssw0rd");
SqlCommand sqlSelect = new SqlCommand("SELECT Emp_id
FROM EmpInfo", sqlConn);
sqlSelect.CommandType = System.Data.CommandType.Text;
SqlDataAdapter sqlAdapter = new
SqlDataAdapter(sqlSelect);
DataSet myDataset = new DataSet();
sqlAdapter.Fill(myDataset);
Accordion1.DataSource = myDataset.Tables[0].DefaultView;
Accordion1.DataBind();
}
Step 7:
Write HeaderTemplate and ContentTemplate for Accordion Control
and take one Gridview with in a ContentTemplate.Which Look
like..
<cc1:Accordion ID="Accordion1" runat="server"
TransitionDuration="100" SelectedIndex=-1 FramesPerSecond="200"
FadeTransitions="true" RequireOpenedPane="false"
OnItemDataBound="Accordion1_ItemDataBound"
ContentCssClass="accordion-content"
HeaderCssClass="accordion-header"
HeaderSelectedCssClass="accordion-selected" >
<HeaderTemplate>
<%#DataBinder.Eval(Container.DataItem, " Emp_id")%>
</HeaderTemplate>
<ContentTemplate>
<asp:HiddenField ID="txt_categoryID" runat="server"
Value='<%#DataBinder.Eval(Container.DataItem," Emp_id") %>' />
<asp:GridView ID="GridView1" runat="server" RowStyleBackColor="#ededed" RowStyle-HorizontalAlign="Left"
AutoGenerateColumns="false" GridLines="None"
CellPadding="2" CellSpacing="2"
Width="300px">
<Columns>
<asp:TemplateField HeaderStyleHorizontalAlign="Left" HeaderText="User Name" HeaderStyleBackColor="#d1d1d1"
HeaderStyle-ForeColor="#777777">
<ItemTemplate>
<%#DataBinder.Eval(Container.DataItem,"
EmpName") %>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</cc1:Accordion>
Here Username is a field name which is coming from databse by
our query which we have fired in getData function.And withing a
gridview template we are showing Username which we are retriving
by writing a query with in a Accordion ItemDataBound event.
Step 8:
Write following code with in a Accordion ItemDataBound
Event.like
protected void Accordion1_ItemDataBound(object sender,
AjaxControlToolkit.AccordionItemEventArgs e)
{
if (e.ItemType ==
AjaxControlToolkit.AccordionItemType.Content)
{
SqlConnection sqlConn = new SqlConnection("Data
Source=C3;Initial Catalog=Employee;Persist Security
Info=True;User ID=sa;Password=p@ssw0rd");
sqlConn.Open();
SqlCommand sqlSelect = new SqlCommand("SELECT
EmpName FROM EmpInfo where Emp_id = '" +
((HiddenField)e.AccordionItem.FindControl("txt_categoryID")).Val
ue + "'", sqlConn);
sqlSelect.CommandType =
System.Data.CommandType.Text;
SqlDataAdapter sqlAdapter = new
SqlDataAdapter(sqlSelect);
DataSet myDataset = new DataSet();
sqlAdapter.Fill(myDataset);
sqlConn.Close();
GridView grd = new GridView();
grd =
(GridView)e.AccordionItem.FindControl("GridView1");
grd.DataSource = myDataset;
grd.DataBind();
}
}
Step 9:
Run Website……….