I wanna share…

                               Ajax Accordion pane control in .Net

Download Link: Click here

The Accordion control represents a series of panes that can be viewed one at a time. So this is so useful

where the content publishing place is small.

These are the Key Properties:

HeaderCssClass:

Name of the CSS class to use for the headers. This can be either applied to the Accordion as a default for all AccordionPanes, or an individual AccordionPane.

HeaderSelectedCssClass:

Name of the CSS class to use for the selected header. This can be either applied to the Accordion as a default for all AccordionPanes, or an individual AccordionPane.

ContentCssClass:

Name of the CSS class to use for the content. This can be either applied to the Accordion as a default for all AccordionPanes, or an individual AccordionPane.

FadeTransitions:

True to use the fading transition effect, false for standard transitions.

TransitionDuration:

Number of milliseconds to animate the transitions

HeaderTemplate:

The Header template contains the markup that should be used for an pane’s header when data binding

ContentTemplate:

The Content template contains the markup that should be used for a pane’s content when data binding.

Here I’m explaining tell you about AccordionPane control.

  1. Drag and drop the ToolkitScriptManager and Accordion controls from Ajax Toolkit.
  2. Drag and drop the AccordianPane control between pane tags.
  3. Add these properties to Accordion control.

a. CssClass,

b. HeaderCssClass,

c. HeaderSelectedCssClass,

d. ContentCssClass

This is the Style sheet I used:

<style type=”text/css”>

.accordionpane {

width: 300px;

}

.accrdHeader {

border: 1px solid #2F4F4F;

color: white;

background-color: #006B54;

font-family: Arial, Sans-Serif;

font-size: 12px;

font-weight: bold;

padding: 5px;

margin-top: 5px;

cursor: pointer;

}

.accrdHeaderSelected {

border: 1px solid #CBEBFA;

color: white;

background-color: #9D6B84;

font-family: Arial, Sans-Serif;

font-size: 12px;

font-weight: bold;

padding: 5px;

margin-top: 5px;

cursor: pointer;

}

.accrdContent {

background-color: #F5DEB3;

border: 1px #CBEBFA;

border-top: none;

padding: 5px;

padding-top: 10px;

}

</style>

This is the Accordin pane stuff:

<asp:ToolkitScriptManager ID=”ToolkitScriptManager2″ runat=”server”>

</asp:ToolkitScriptManager>

<asp:Accordion ID=”Accordion2″  CssClass=”accordionpane” HeaderCssClass=”accrdHeader” HeaderSelectedCssClass=”accrdHeaderSelected” ContentCssClass=”accrdContent” runat=”server”>

<Panes>

<asp:AccordionPane ID=”AccordionPane3″ runat=”server”>

<Header>About Myself</Header>

<Content>

I am Jitendra.SampathiRao. I’m basically from Vishakapatnam. I completed my B.Tech(Computer Science) from JNT University.

I’m presently working in a vizag baseb software company from last two years.

</Content>

</asp:AccordionPane>

<asp:AccordionPane ID=”AccordionPane4″ runat=”server”>

<Header>Technical Skill set</Header>

<Content>

<b>My Technical Skill set is:</b><br />Asp.Net, <br />C#.Net, <br />VB.Net, <br />WCF, <br />WPF, <br />Silverlight,<br />Sql Server, <br />Mysql, <br /> AJAX, <br /> JQuery.

</Content>

</asp:AccordionPane>

<asp:AccordionPane ID=”AccordionPane5″ runat=”server”>

<Header>Hobbies</Header>

<Content>

Playing Cricket,<br />Watching movies, <br /> Net surfing.

</Content>

</asp:AccordionPane>

</Panes>

</asp:Accordion>

Note: Source Code is available at download links.

The final result should be like:

I hope you like this article.

Advertisements

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: