C# - Binding jQuery Accordion to DataTable in ASP .Net
What is jQuery Accordion?
jQuery Accordion control is basically used to display collapsible content panels for presenting information in a limited amount of space.C# - Binding Dynamic Jquery Accordion using Repeater
In this article we will see how to bind jQuery accordion dynamically to datatable with Asp .net Repeater control. Find the source code below :
Default.aspx
<%@
Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Binding jQuery Accordion to
DataTable - ASP .Net</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script type="text/javascript">
$(function () {
var
img = {
header: "ui-icon-circle-arrow-e",
activeHeader: "ui-icon-circle-arrow-s"
};
$("#accordion").accordion({
img: img
});
$("#toggle").button().click(function () {
if ($("#accordion").accordion("option", "img")) {
$("#accordion").accordion("option", "img", null);
} else {
$("#accordion").accordion("option", "img", img);
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="accordion" style="width: 500px; font-family: Arial; font-size: 15px;">
<asp:Repeater ID="repAccordian" runat="server">
<ItemTemplate>
<h3>
<%#Eval("EmployeeName")%></br></h3>
<div>
<table>
<tr>
<td>
<b>Description: </b>
</td>
<td>
<%#Eval("Designation") %>
</td>
</tr>
<tr>
<td>
<b>Email: </b>
</td>
<td>
<%#Eval("Email") %>
</td>
</tr>
</table>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</form>
</body>
</html>
Default.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
BindAccordionUsingRepeater();
}
}
public DataTable BindEmployeeDetails()
{
try
{
DataTable dt = new
DataTable();
DataColumn dc = new
DataColumn();
dc.ColumnName = "EmployeeName";
dc.DataType = typeof(string);
dt.Columns.Add(dc);
dc = new
DataColumn();
dc.ColumnName = "Designation";
dc.DataType = typeof(string);
dt.Columns.Add(dc);
dc = new
DataColumn();
dc.ColumnName = "Email";
dc.DataType = typeof(string);
dt.Columns.Add(dc);
dt.Rows.Add(new object[] { "Rk Singh", "Software
Engineer",
"ravi@gmail.com" });
dt.Rows.Add(new object[] { "Sk Singh", "ASM", "sachin@gmail.com" });
dt.Rows.Add(new object[] { "Nk Singh", "Software
Engineer.",
"nitin@gmail.com" });
return dt;
}
catch (Exception ex)
{
throw ex;
}
}
public void BindAccordionUsingRepeater()
{
repAccordian.DataSource = BindEmployeeDetails();
repAccordian.DataBind();
}
}
Download the source code click here
Please leave your comments, suggestions and queries about this post in the comment sections in order for me to improve my writing skills and to showcase more useful posts. Thanks for reading!
C# - Binding jQuery Accordion to DataTable in ASP .Net
Reviewed by Ravi Kumar
on
8:41 PM
Rating:
Reviewed by Ravi Kumar
on
8:41 PM
Rating:
No comments: