Custom accordion

Gihan Perera asked on November 18, 2014 08:18

is there anyway to do custom accordion which using repeater control?please share me some codes

Recent Answers

Brenden Kehren answered on November 18, 2014 14:04

You can. Might be better to use the hierarchical viewer that way you can use the First and Last transformations to place your < asp:Accordian > control. Taking code from this example you should be able to use the First transformation and enter this:

<ajaxToolkit:Accordion
    ID="MyAccordion"
    runat="Server"
    SelectedIndex="0"
    HeaderCssClass="accordionHeader"
    HeaderSelectedCssClass="accordionHeaderSelected"
    ContentCssClass="accordionContent"
    AutoSize="None"
    FadeTransitions="true"
    TransitionDuration="250"
    FramesPerSecond="40"
    RequireOpenedPane="false"
    SuppressHeaderPostbacks="true">
    <Panes>
        <ajaxToolkit:AccordionPane
            HeaderCssClass="accordionHeader"
            HeaderSelectedCssClass="accordionHeaderSelected"
            ContentCssClass="accordionContent">
            <Header> <!-- your content header goes here --> </Header>
            <Content> <!-- your content goes here --> </Content>
        </ajaxToolkit:AccordionPane>

And your item transformation will have this (no matter what control you use):

    <ajaxToolkit:AccordionPane
        HeaderCssClass="accordionHeader"
        HeaderSelectedCssClass="accordionHeaderSelected"
        ContentCssClass="accordionContent">
        <Header> <!-- your content header goes here --> </Header>
        <Content> <!-- your content goes here --> </Content>
    </ajaxToolkit:AccordionPane>

Then your Last transformation will have this:

        <ajaxToolkit:AccordionPane
            HeaderCssClass="accordionHeader"
            HeaderSelectedCssClass="accordionHeaderSelected"
            ContentCssClass="accordionContent">
            <Header> <!-- your content header goes here --> </Header>
            <Content> <!-- your content goes here --> </Content>
        </ajaxToolkit:AccordionPane> 
    </Panes>            
    <HeaderTemplate>...</HeaderTemplate>
    <ContentTemplate>...</ContentTemplate>
</ajaxToolkit:Accordion>

If you don't want to use the hierarchical viewer then you'll have to check the DataItemIndex (pre v8) for the first and last items. You can do something like this:

<asp:PlaceHolder ID="ph1" runat="sever" Visible='<%# (DataItemIndex == 0) %>'> <!-- If using v8 you can use IsFirst() vs. DataItemIndex -->
    <ajaxToolkit:Accordion
        ID="MyAccordion"
        runat="Server"
        SelectedIndex="0"
        HeaderCssClass="accordionHeader"
        HeaderSelectedCssClass="accordionHeaderSelected"
        ContentCssClass="accordionContent"
        AutoSize="None"
        FadeTransitions="true"
        TransitionDuration="250"
        FramesPerSecond="40"
        RequireOpenedPane="false"
        SuppressHeaderPostbacks="true">
        <Panes>
</asp:PlaceHolder>

Include your item transformation every time:

    <ajaxToolkit:AccordionPane
        HeaderCssClass="accordionHeader"
        HeaderSelectedCssClass="accordionHeaderSelected"
        ContentCssClass="accordionContent">
        <Header> <!-- your content header goes here --> </Header>
        <Content> <!-- your content goes here --> </Content>
    </ajaxToolkit:AccordionPane>

Then check for the last one:

<asp:PlaceHolder ID="ph2" runat="server" Visible='<%# (DataItemIndex == DataRowView.DataView.Count - 1) %>'> <!-- If using v8 you can use IsLast() vs. DataItemIndex -->
        </Panes>            
        <HeaderTemplate>...</HeaderTemplate>
        <ContentTemplate>...</ContentTemplate>
    </ajaxToolkit:Accordion>
</asp:PlaceHolder>

Good luck!

1 votesVote for this answer Mark as a Correct answer