Home > AJAX, ASP.Net > AJAX Accordion Paging

AJAX Accordion Paging


Hi

In a previous post Paging Dynamic AJAX Acordion Control

now i’m going to show an example to Bind AJAX Accordion for with Dynamic Data for Master and Details with Paging

Note :- In this example i’m using Northwind Database

Step1 :- Create a new website project and add new web page

Step2 :- In a 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>Untitled Page</title>
      <style type="text/css">
    body {
    font-family: verdana;
    font-size: 11px;
    }
   
    .header,.selected {
    width: 300px;
    background-color: #c0c0c0;
    margin-bottom:2px;
    padding:2px;
    color:#444444;
    font-weight:bold;
    cursor:pointer;
    }
   
    .content {
    width:300px;
    margin-bottom:2px;
    padding:2px;
    }
   
    .selected,.content {
    border:solid 1px #666666;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
         <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
        </div>
        <ajaxToolkit:Accordion ID="Accordion1" runat="server" TransitionDuration="100" FramesPerSecond="200" FadeTransitions="true" RequireOpenedPane="false" OnItemDataBound="Accordion1_ItemDataBound"
            ContentCssClass="content" HeaderCssClass="header" HeaderSelectedCssClass="selected">
            <HeaderTemplate>
                <%#DataBinder.Eval(Container.DataItem,"categoryName") %>
            </HeaderTemplate>
            <ContentTemplate>
                <asp:HiddenField ID="txt_categoryID" runat="server" Value='<%#DataBinder.Eval(Container.DataItem,"categoryID") %>' />
                <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="Product Name" HeaderStyle-BackColor="#d1d1d1"
                            HeaderStyle-ForeColor="#777777">
                            <ItemTemplate>
                                <%#DataBinder.Eval(Container.DataItem,"productName") %>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
            </ContentTemplate>
        </ajaxToolkit:Accordion>
        <br />
        <div style="background-color:Silver; height:20px; width:100%; padding:20px; text-align:center; vertical-align:bottom; margin-top: 10px;">
        <table >
            <tr>
                <td>
                    Display <asp:DropDownList ID="ddlPageSize" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlPageSize_SelectedIndexChanged">
                        <asp:ListItem>5</asp:ListItem>
                        <asp:ListItem>10</asp:ListItem>
                        <asp:ListItem>15</asp:ListItem>
                    </asp:DropDownList></td>
                <td>
                    <asp:LinkButton ID="lnkbtnPrevious" runat="server" OnClick="lnkbtnPrevious_Click">Prev</asp:LinkButton></td>
                <td>
                <asp:DataList ID="dlPaging" runat="server" OnItemCommand="dlPaging_ItemCommand" OnItemDataBound="dlPaging_ItemDataBound" RepeatDirection="Horizontal">
                    <ItemTemplate>
                      <asp:LinkButton ID="lnkbtnPaging" runat="server" CommandArgument='<%# Eval("PageIndex") %>' CommandName="lnkbtnPaging" Text='<%# Eval("PageText") %>'></asp:LinkButton>
                    </ItemTemplate>
                 </asp:DataList>
                </td>
                <td>
                    <asp:LinkButton ID="lnkbtnNext" runat="server" OnClick="lnkbtnNext_Click">Next</asp:LinkButton></td>
            </tr>
        </table>
        </div>
    </form>
</body>
</html>

Step3 :- In code behind add the following code


using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;

public partial class Default : System.Web.UI.Page
{
    string conString = System.Configuration.ConfigurationManager.ConnectionStrings["SqlConnectionString"].ToString();

    PagedDataSource pds = new PagedDataSource();

    public int CurrentPage
    {
        get
        {
            if (this.ViewState["CurrentPage"] == null)
            {
                return 0;
            }
            else
            {
                return Convert.ToInt16(this.ViewState["CurrentPage"].ToString());
            }
        }
        set
        {
            this.ViewState["CurrentPage"] = value;
        }
    }

    private void doPaging()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("PageIndex");
        dt.Columns.Add("PageText");
        for (int i = 0; i < pds.PageCount; i++)
        {
            DataRow dr = dt.NewRow();
            dr[0] = i;
            dr[1] = i + 1;
            dt.Rows.Add(dr);
        }
        dlPaging.DataSource = dt;
        dlPaging.DataBind();
    }

    public void getCategories()
    {
        SqlConnection sqlConn = new SqlConnection(conString);
        sqlConn.Open();
        SqlCommand sqlSelect = new SqlCommand("SELECT * FROM Categories", sqlConn);
        sqlSelect.CommandType = System.Data.CommandType.Text;
        SqlDataAdapter sqlAdapter = new SqlDataAdapter(sqlSelect);
        DataTable dt = new DataTable();
        sqlAdapter.Fill(dt);
        pds.DataSource = dt.DefaultView;
        pds.AllowPaging = true;
        pds.PageSize = Convert.ToInt16(ddlPageSize.SelectedValue);
        pds.CurrentPageIndex = CurrentPage;
        lnkbtnNext.Enabled = !pds.IsLastPage;
        lnkbtnPrevious.Enabled = !pds.IsFirstPage;
        Accordion1.DataSource = pds;
        Accordion1.DataBind();
        doPaging();
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            getCategories();
        }
    }

    protected void Accordion1_ItemDataBound(object sender, AjaxControlToolkit.AccordionItemEventArgs e)
    {
        if (e.ItemType == AjaxControlToolkit.AccordionItemType.Content)
        {
            SqlConnection sqlConn = new SqlConnection(conString);
           
            SqlCommand sqlSelect = new SqlCommand("SELECT productName FROM Products where categoryID = '" + ((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);

            GridView grd = new GridView();

            grd = (GridView)e.AccordionItem.FindControl("GridView1");
            grd.DataSource = myDataset;
            grd.DataBind();
        }
    }

    protected void dlPaging_ItemCommand(object source, DataListCommandEventArgs e)
    {
        if (e.CommandName.Equals("lnkbtnPaging"))
        {
            CurrentPage = Convert.ToInt16(e.CommandArgument.ToString());
            getCategories();
        }
    }

    protected void dlPaging_ItemDataBound(object sender, DataListItemEventArgs e)
    {
        LinkButton lnkbtnPage = (LinkButton)e.Item.FindControl("lnkbtnPaging");
        if (lnkbtnPage.CommandArgument.ToString() == CurrentPage.ToString())
        {
            lnkbtnPage.Enabled = false;
            lnkbtnPage.Font.Bold = true;
        }
    }

    protected void lnkbtnPrevious_Click(object sender, EventArgs e)
    {
        CurrentPage -= 1;
        getCategories();
    }

    protected void lnkbtnNext_Click(object sender, EventArgs e)
    {
        CurrentPage += 1;
        getCategories();
    }

    protected void ddlPageSize_SelectedIndexChanged(object sender, EventArgs e)
    {
        CurrentPage = 0;
        getCategories();
    }
}

Step4 :- In Web.Config file add the ConnectionString of your Database

<connectionStrings>
  <add name="SqlConnectionString" connectionString="Data Source=.;Initial Catalog=Northwind;Integrated Security=True"/>
 </connectionStrings>

Hope this helps

Good Luck.

Advertisements
  1. Paul
    May 1, 2010 at 10:26 am

    The accordion controls do not respond to a click.

  2. yasserzaid
    May 1, 2010 at 7:56 pm

    @Paul : i tried this example and it works with me … try to run code again

  3. Rajesh Singh
    January 3, 2012 at 11:19 am

    This is best one article so far I have read online. I would like to appreciate you for making it very simple and easy. I have found another nice post related to this post over the internet which also explained very well. For more details you may check it by visiting this url….
    http://mindstick.com/Articles/f03aa211-4cb2-4d6d-8d52-af54429ab5a0/?Ajax%20Toolkit%20Accordion%20Control%20in%20Asp.net

    Thanks

  4. yasserzaid
    January 5, 2012 at 3:48 pm

    @Rajesh Singh :- you are welcome … hope my post helps you…. Good Luck

  5. Mehul patel
    April 10, 2013 at 6:05 am

    Sir, Salute,,,Thanks From the bottom of the Heart…………………

  6. October 2, 2013 at 7:37 am

    I’m not that much of a online reader to be honest but your blogs really nice, keep it up!
    I’ll go ahead and bookmark your site to come
    back later on. All the best

  7. October 5, 2013 at 11:01 am

    Thank you for some other fantastic post. Where else could anybody get that kind of iformation in such an
    ideal approach of writing? I have a presentation subsequent
    week, and I amm oon the look for such information.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: