This article demonstrates how to bind an Accordion Control with a database in ASP.Net using Ajax.
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 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 an Accordion Control from the ToolBox, which will 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="accordion-header" HeaderSelectedCssClass="accordion-selected" >
</cc1:Accordion>
Step 5:
Generate the OnItemDataBound events.
Which will 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 the page load event, which will 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 within a ContentTemplate; which will 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" RowStyle-BackColor="#ededed" RowStyle-HorizontalAlign="Left"
AutoGenerateColumns="false" GridLines="None" CellPadding="2"
CellSpacing="2"
Width="300px">
<Columns>
<asp:TemplateField HeaderStyle-HorizontalAlign="Left" HeaderText="User Name" HeaderStyle-BackColor="#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 the database 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 an Accordion ItemDataBound event.
Step 8:
Write the following code within an 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")).Value + "'", 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........