Collapsible asp.net control for SharePoint2010

Question

I have a custom Instantiation form with a lot of CheckBoxes in SP2010. Now I've to put the CheckBoxes into different categories which should be collapsible, like you can see in the picture below.
Collapsible control

Is there any asp.net control which let me do this easily for SharePoint? I read that the ajax CollapsiblePanelExtender doesn't work fine with SharePoint so I guess that I shouldn't use that control.

It'd be perfect if there's a control which expand/collapse when the user clicks on the title ("Sharepoint" in this example).

UPDATE:
I tried to work with JQuery but I didn't get it to work. It'd be nice if someone could take a look at it and tell me what I'm doing wrong.
Here's my code:

<asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">
    <asp:Panel ID="pHeader" runat="server"><asp:Label text="Test..." runat="server" /></asp:Panel>
    <asp:Panel ID="tBody" runat="server">
        <asp:PlaceHolder ID="plhPermission" runat="server" /> <!-- My CheckBoxes go here dynamically -->
    </asp:Panel>
</asp:Content>

And for the JQuery part:

<asp:Content runat="server" ContentPlaceHolderID="PlaceHolderAdditionalPageHead">

    <script type="text/javascript" src="/_layouts/PermissionWorkflow/JQuery.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#pHeader').click(function () {
                $('#pBody').slideToggle('slow');
            });
        });
    </script>

</asp:Content>

When I deploy it it only shows me the label text but nothing happen when I click on it.
Does anyone see what I'm doing wrong here?

Ali Jafer · Accepted Answer · 2014-03-25 13:09:40Z

0

Yes Ajax CollapsiblePanelExtender is fine to use! iv used it enough times! The people who complain are the ones who dont know how to use it!

You can do it through either c# or aspx. But you need to have two Divs, one is the header that the user would click (title) and the other is the body that contains the checkboxes.

add your label within the header control, add the checkboxes and anything else within the body control.

now the next part is to link the header with the body and the actions they perform using the id's.

<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server"
    TargetControlID="Panel1"
    CollapsedSize="0"
    ExpandedSize="300"
    Collapsed="True"
    ExpandControlID="LinkButton1"
    CollapseControlID="LinkButton1"
    AutoCollapse="False"
    AutoExpand="False"
    ScrollContents="True"
    TextLabelID="Label1"
    CollapsedText="Show Details..."
    ExpandedText="Hide Details" 
    ImageControlID="Image1"
    ExpandedImage="~/images/collapse.jpg"
    CollapsedImage="~/images/expand.jpg"
    ExpandDirection="Vertical" />

http://www.asp.net/ajaxlibrary/ajaxcontroltoolkitsamplesite/collapsiblepanel/collapsiblepanel.aspx

target control id is the id of the body panel(div), the expand and collapse id is of the header panel (div).

each header requires a unique <ajaxToolkit:CollapsiblePanelExtender ID! if doing it through c# this could be done through a loop incrementing by 1, same with the header and body panel so they link up ;)

dont forget to add add controls within an update panel!

edited Mar 25, 2014 at 13:09

answered Mar 25, 2014 at 12:17

Ali Jafer

17.8k1 gold badge29 silver badges41 bronze badges

Thanks for the answer. Do I have to download a special .dll to use this control? I've never worked with it before.

Pascal_AC
– Pascal_AC

2014-03-25 12:28:37 +00:00
Commented Mar 25, 2014 at 12:28
no you just need the ajaxcontroltoolkit.dll, if the page is created in visual studios than you can use the designer to drag drop the ajax CollapsiblePanelExtender. Otherwise if in c# codebehind add the reference to the dll. The dll was designed for sharepoint and works perfectly in 2010! jondack.com/index.php/2010/10/28/…

Ali Jafer
– Ali Jafer

2014-03-25 13:08:45 +00:00
Commented Mar 25, 2014 at 13:08
okay thank you, I'll try if it works for me. Where do I've to write the <ajaxToolkit:CallapsiblePanelExtender? Just somewhere in the <asp:Content ContentPlaceHolderID="PlaceHolderMain"?

Pascal_AC
– Pascal_AC

2014-03-25 13:19:29 +00:00
Commented Mar 25, 2014 at 13:19
yes it would be within the main placeholder!

Ali Jafer
– Ali Jafer

2014-03-25 13:44:18 +00:00
Commented Mar 25, 2014 at 13:44
no probs happy to help! this should be the correct way :)

Ali Jafer
– Ali Jafer

2014-03-28 10:42:56 +00:00
Commented Mar 28, 2014 at 10:42

Add a comment |

Subbu Venkat · Accepted Answer · 2014-03-25 09:38:43Z

1

Instead of using CollapsiblePanelExtender of AJAX, use jQuery as in case of AJAX we need to change web.config and other tweaks. You can use default CollapsablePanel control of Jquery or other plugins available.

answered Mar 25, 2014 at 9:38

Subbu Venkat

1151 silver badge9 bronze badges

Thanks for your answer! But I don't get it to work with JQuery :( I updated my question with what I've tried, so it'd be nice if you could take a look at it again. Maybe you'll see what I'm doing wrong.

Pascal_AC
– Pascal_AC

2014-03-25 10:39:49 +00:00
Commented Mar 25, 2014 at 10:39

Add a comment |

Salvatore Di Fazio · Accepted Answer · 2014-03-25 09:45:51Z

1

I had a problem like that and I solved with a couple of CSS class and lines of JQuery. For example:

<ul class="archive_year">
<li class="years">2012
<ul class="archive_month">
    <li class="months">September
        <ul class="archive_posts">
            <li class="posts">Article 1</li>
            <li class="posts">Article 2</li>
            <li class="posts">Article 3</li>
            <li class="posts">Article 4</li>
        </ul>
    </li>
    <li class="months">August
        <ul class="archive_posts">
            <li class="posts">Article 1</li>
        </ul>
    </li>
</ul>

<li class="years">2011</li>
    <ul class="archive_month">
        <li class="months">July
            <ul class="archive_posts">
                <li class="posts">Article 1</li>
            </ul>
        </li>
    </ul>
</li>

$('.archive_month ul').hide();
$('.months').click(function() {
    $(this).find('ul').slideToggle();
});

Here for a live example: http://jsfiddle.net/VNkM2/2/

Also you can improve that using jquery.UI or your CSS

answered Mar 25, 2014 at 9:45

Salvatore Di Fazio

2,70317 silver badges17 bronze badges

Thanks for your answer! But I don't get it to work :/ I updated my question with what I've tried, could you take a look at it? Maybe you see what I'm doing wrong.

Pascal_AC
– Pascal_AC

2014-03-25 10:38:07 +00:00
Commented Mar 25, 2014 at 10:38
have u took a look at the live example?

Salvatore Di Fazio
– Salvatore Di Fazio

2014-03-25 10:48:06 +00:00
Commented Mar 25, 2014 at 10:48
Yes and then I tried to use it in my .aspx file but I don't get it to work there. I don't work with asp.net files that much so I'm not sure if I use it correctly there.

Pascal_AC
– Pascal_AC

2014-03-25 10:56:53 +00:00
Commented Mar 25, 2014 at 10:56
Have you check your dom? What I expect is that your ID name changed

Salvatore Di Fazio
– Salvatore Di Fazio

2014-03-25 11:05:06 +00:00
Commented Mar 25, 2014 at 11:05
You were right the ID of both controls was changed :/ But even when I try to use the JQuery part with class names instead of IDs it doesn't work.

Pascal_AC
– Pascal_AC

2014-03-25 11:15:50 +00:00
Commented Mar 25, 2014 at 11:15

| Show 1 more comment

Stack Exchange Network

Collapsible asp.net control for SharePoint2010

3 Answers 3

Your Answer

Hot Network Questions

Collapsible asp.net control for SharePoint2010

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions