Sunday, March 30, 2014

Bind Ajax Accordion Control from dynamic data in Asp.Net and C#

This article is based on Ajax Accordion Control, here I am giving an  example how to bind data dynamically with Ajax Accordion Control.

I used here Northwind database, you can download it from here
Download Ajax Control Tool Kit 4.0 from here

Step-1: Drag and drop an Ajax Accordion Control into your .aspx page and follow the below code

.aspx file Code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="testAccordionControl.aspx.cs"

    Inherits="test_testCheckBoxFilterResult" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head runat="server">
    <style type="text/css">
            width: 400px;
            border: 1px solid #2F4F4F;
            color: white;
            background-color: #2E4d7B;
            font-family: Arial, Sans-Serif;
            font-size: 12px;
            font-weight: bold;
            padding: 5px;
            margin-top: 5px;
            cursor: pointer;
            border: 1px solid #2F4F4F;
            color: white;
            background-color: #5078B3;
            font-family: Arial, Sans-Serif;
            font-size: 12px;
            font-weight: bold;
            padding: 5px;
            margin-top: 5px;
            cursor: pointer;
            background-color: #D3DEEF;
            border: 1px dashed #2F4F4F;
            border-top: none;
            padding: 5px;
            padding-top: 10px;
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <table width="700px">
                    <asp:Accordion ID="Accordion1" runat="server" SelectedIndex="0" CssClass="accordion"
                        HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected"
                        ContentCssClass="accordionContent" AutoSize="None" FadeTransitions="true" TransitionDuration="250"
                        SuppressHeaderPostbacks="true" DataSourceID="SqlDataSource1" OnItemDataBound="Accordion1_ItemDataBound">
                                         ID:   <asp:Label ID="lblCateID" Text='<%#Bind("CategoryID") %>' runat="server"></asp:Label>&nbsp;
                                         Category:    <asp:Label ID="Label1" Text='<%#Bind("CategoryName") %>' runat="server"></asp:Label>                                             
                                            <asp:Literal ID="ltrProducts" runat="server"></asp:Literal>
                    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                        SelectCommand="SELECT * FROM [Categories]" />

.aspx.cs file Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;

public partial class testAccordionControl : System.Web.UI.Page
    private string CategoryID = string.Empty;

    protected void Page_Load(object sender, EventArgs e)


    protected void Accordion1_ItemDataBound(object sender, AjaxControlToolkit.AccordionItemEventArgs e)
        if (e.ItemType == AjaxControlToolkit.AccordionItemType.Header)
            Label lblCateID = (Label)e.AccordionItem.FindControl("lblCateID");
            CategoryID = lblCateID.Text;

        if (e.ItemType == AjaxControlToolkit.AccordionItemType.Content)
            Literal ltrProducts = (Literal)e.AccordionItem.FindControl("ltrProducts");

            SqlConnection cnn = new SqlConnection(ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString.Trim());
            SqlCommand cmd = new SqlCommand();

            String sqlText = "SELECT [ProductName] FROM [Products] where CategoryID='" + CategoryID + "'";
            cmd.CommandText = sqlText;
            cmd.Connection = cnn;

            SqlDataAdapter adapter = new SqlDataAdapter(cmd);
            DataTable tbl = new DataTable();

            if (tbl.Rows.Count > 0)
                ltrProducts.Text = "";

                foreach (DataRow dr in tbl.Rows)
                    ltrProducts.Text += dr["ProductName"].ToString() + "</br>";




Step-2: Run your project and see result as given below..

No comments:

Post a Comment

SharePoint Deployment Error : The specified path, file name, or both are too long.

Hi, Sometimes we get surprised with below error while deploying wsp file... Solution : To overcome with this issue, we just ne...