jaIn this post we are going to learn how to bind the data to accordion control dynamically with paging option.
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.
Create data table as follows and insert 10 records as you like
CREATE TABLE Projects(
ProjectId int identity(1,1) NOT NULL,
ProjectName nvarchar(500) ,
[Description] nvarchar(max)
)
Create new Website named as DynamicAccordionPaging
Copy and paste below code in Default.aspx
<head runat="server">
<title></title>
<style>
/* Accordion */
.accordionHeader
{
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;
}
#master_content .accordionHeader a
{
color: #FFFFFF;
background: none;
text-decoration: none;
}
#master_content .accordionHeader a:hover
{
background: none;
text-decoration: underline;
}
.accordionHeaderSelected
{
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;
}
</style>
</head>
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<table>
<tr>
<asp:HiddenField ID="txtCount" runat="server" />
<td>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate >
<asp:Panel ID="pnlShowProjects" runat="server">
<asp:Accordion ID="acc" runat="server"
SelectedIndex="0" EnableViewState="false"
FadeTransitions="false" FramesPerSecond="40"
TransitionDuration="250" AutoSize="None"
RequireOpenedPane="false" SuppressHeaderPostbacks="true"
HeaderCssClass="accordionHeader"
HeaderSelectedCssClass="accordionHeaderSelected"
ContentCssClass="accordionContent">
<HeaderTemplate>
<table width="100%">
<tr>
<td align="left">
<asp:Label ID="lblProjectName" runat="server" Text='<%#Eval("ProjectName") %>'></asp:Label>
</td>
</tr>
</table>
</HeaderTemplate>
<ContentTemplate>
<table>
<tr>
<td align="left">
<%# Eval("Description") %>
</td>
</tr>
</table>
</ContentTemplate>
</asp:Accordion>
</asp:Panel>
<table align="right">
<tr>
<td >
<asp:ImageButton ID="imgPrevious" runat="server"
ImageUrl="~/Images/previous.gif" onclick="imgPrevious_Click"
AlternateText="Previous" />
</td>
<td>
<asp:ImageButton ID="imgNext" runat="server"
ImageUrl="~/Images/next.gif" onclick="imgNext_Click"
AlternateText="Next" />
</td>
<td>
<asp:Label ID="lblTotal" runat="server"></asp:Label>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>
</div>
Copy and paste below code in Default.aspx.cs
PagedDataSource _pagedsource;
SqlConnection conn = new SqlConnection("Data Source=.;Database=Sample;trusted_connection=true");
protected override void OnInit(EventArgs e)
{
_pagedsource = new PagedDataSource();
// creating handler for page unload event
Unload += new EventHandler(Default_Unload);
base.OnInit(e);
}
void Default_Unload(object sender, EventArgs e)
{
// we save the data source in a session to reload when posback
Session["newslist"] = _pagedsource;
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
getallprojects();
lblTotal.Text = setpaging();
}
else
if (Session["newslist"] != null)
{
_pagedsource = (PagedDataSource)Session["newslist"];
}
}
void getallprojects()
{
conn.Open();
SqlDataAdapter da = new SqlDataAdapter("select ProjectName,[Description] from Projects", conn);
DataSet ds = new DataSet();
da.Fill(ds);
// you fill the PagedDataSource by set the DataSource property with the content of the data to display and page (e.g. DataTable, Collection...)
_pagedsource.DataSource = ds.Tables[0].DefaultView;
// CurrentPageIndex - what page to display
_pagedsource.CurrentPageIndex = 0;
txtCount.Value = ds.Tables[0].Rows.Count.ToString();
initPagedDataSource();
if (_pagedsource.PageSize == int.Parse(txtCount.Value))
{
imgPrevious.Visible = false;
imgNext.Visible = false;
}
else
{
imgPrevious.Visible = true;
imgNext.Visible = true;
}
}
public string setpaging()
{
int from = _pagedsource.FirstIndexInPage + 1;
int to = _pagedsource.FirstIndexInPage + _pagedsource.PageSize;
if (to > int.Parse(txtCount.Value))
to = int.Parse(txtCount.Value);
return "Showing " + from.ToString() + " - " + to.ToString() + " of " + txtCount.Value;
}
private void initPagedDataSource()
{
// it is necessary to set this property true
_pagedsource.AllowPaging = true;
// how many items to show on one page
_pagedsource.PageSize = 5;
// now, bind the Accordion control to the PagedDataSource object
acc.DataSource = _pagedsource;
acc.DataBind();
// disable Previous (Last) button when showing the first page of the PageDataSource
imgPrevious.Enabled = !_pagedsource.IsFirstPage;
// disable Next button when showing the last page of the PageDataSource
imgNext.Enabled = !_pagedsource.IsLastPage;
}
protected void imgPrevious_Click(object sender, ImageClickEventArgs e)
{
// when clicking Last button, decrement the CurrentPageIndex
_pagedsource.CurrentPageIndex--;
initPagedDataSource();
lblTotal.Text = setpaging();
}
protected void imgNext_Click(object sender, ImageClickEventArgs e)
{
// when clicking Next button, increment the CurrentPageIndex
_pagedsource.CurrentPageIndex++;
initPagedDataSource();
lblTotal.Text = setpaging();
}
Finally we are able to implement paging with Accordion control
Foundations of ASP.NET AJAX (Expert's Voice in .NET)
Foundations of ASP.NET AJAX (Expert's Voice in .NET)
No comments:
Post a Comment