Latest

random

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 :

Binding Dynamic Jquery Accordion using Repeater in Asp .Net

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!

No comments:

All Rights Reserved by Etechpulse © 2015 - 2016
Powered By Blogger

Contact Form

Name

Email *

Message *

Powered by Blogger.