Mobile Content

Tuesday, December 27, 2011

Accordian in Asp.net

Example:


In .aspx page

<style type="text/css"> .accordionHeaderSelected  {
    background-color#c8c456border1px solid #2F4F4F;
    colorwhitecursorpointer;font-familyArial,Sans-Serif;
    font-size12pxfont-weightboldmargin-top5pxpadding5px;
}
.accordionContent {
    background-color#dddba0;border-color-moz-use-text-color #2F4F4F #2F4F4F;
    border-right1px dashed #2F4F4F;border-stylenone dashed dashed;
    border-widthmedium 1px 1px;padding10px 5px 5px;
}
.accordionHeader {
    background-color#94923d;border1px solid #2F4F4F;colorwhite;
    cursorpointerfont-familyArial,Sans-Seriffont-size12px;
    font-weightboldmargin-top5pxpadding5px;
}</style> 

<ajaxtoolkit:accordion id="Accordion1" runat="server" fadetransitions="True" selectedindex="0"
        transitionduration="300" headercssclass="accordionHeader"
contentcssclass="accordionContent">
        <Panes>
            <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
                <Header>
                    AJAX FIRST PANE</Header>
                <Content>
                    AJAX FIRST PANE AJAX FIRST PANE AJAX FIRST PANE AJAX FIRST PANE
                </Content>
            </ajaxToolkit:AccordionPane>
            <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
                <Header>
                    AJAX SECOND PANE
                </Header>
                <Content>
                    AJAX SECOND PANE AJAX SECOND PANE AJAX SECOND PANE AJAX SECOND PANE
                </Content>
            </ajaxToolkit:AccordionPane>
            <ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server">
                <Header>
                    AJAX THIRD PANE
                </Header>
                <Content>
                    AJAX THIRD PANE AJAX THIRD PANE AJAX THIRD PANE AJAX THIRD PANE
                </Content>
            </ajaxToolkit:AccordionPane>
            <ajaxToolkit:AccordionPane ID="AccordionPane4" runat="server">
                <Header>
                    AJAX FOURTH PANE
                </Header>
                <Content>
                    AJAX FOURTH PANE AJAX FOURTH PANE AJAX FOURTH PANE AJAX FOURTH PANE
                </Content>
            </ajaxToolkit:AccordionPane>
        </Panes>
    </ajaxtoolkit:accordion>


To Add Dynamic data into Accordian

in .cs page

protected void page_load(object sender,EventArgs e)
{
SqlConnection con=new SqlConnection("ConnectionString");
SqlCommand cmd=new Sqlcommand("select content,title from test",con);
con.open();
SqlDataReader dr=cmd.ExecuteReader();
while(dr.read())
{

                 Label lblAccTitle = new Label();
                Label lblAccContent = new Label();
                lblAccTitle.Text = dr["title"].ToString();
                lblAccContent.Text = dr["content"].ToString();
                AjaxControlToolkit.AccordionPane accordpane = new                AjaxControlToolkit.AccordionPane();
                accordpane.HeaderContainer.Controls.Add(lblAccTitle);
                accordpane.ContentContainer.Controls.Add(lblAccContent);
                Accordion1.Panes.Add(accordpane);
         }



}

For Detail: Click to view

Next >> (Alwaysvisibleextender)

No comments:

Post a Comment