Solved

.NET AJAX Toolkit CollapsiblePanelExtender

Posted on 2011-03-04
6
738 Views
Last Modified: 2012-05-11
Hi there,

I was wondering if there is anyway to make the CollapsiblePanelExtender work properly with the following doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

The panel just stays expanded all the time with the above doctype, but when I use:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The panel works, but my page display doesn't display things properly.

Is there any way to make it work with the 4.0 Transitional?

Thanks
<asp:UpdatePanel ID="updCourseTasks" runat="server">
<ContentTemplate>
<asp:Panel ID="pnlCourseTasksHeader" runat="server" CssClass="AccordionHeader">
    <asp:Label ID="lblCourseTasksHeader" Text="Course Tasks & Tracking" runat="server" />
</asp:Panel>
<asp:Panel ID="pnlCourseTasksContent" CssClass="Label" runat="server">
<table class="Content" cellspacing="0" cellpadding="0" style="width: 540" border="0">
<tr>
    <td valign="middle" align="left" style="width: 100%; height: 5" colspan="2" />
</tr>
<tr>
	<td valign="middle" align="left" style="width: 100%" colspan="2">
        <table cellspacing="0" cellpadding="0" style="width: 100%" border="0" class="Content4">
        <tr>
            <td valign="middle" align="left" style="width: 40%"></td>
            <td valign="middle" align="center" style="width: 20%" class="LabelBold">Total Ordered</td>
            <td valign="middle" align="center" style="width: 20%" class="LabelBold">Registrations</td>
            <td valign="middle" align="center" style="width: 15%"></td>
        </tr>
        <tr>
            <td valign="middle" align="left" style="width: 100%; height: 5" colspan="4" />
        </tr>
        <tr>
            <td valign="middle" align="left" style="width: 40%">Course Notes Ordered</td>
            <td valign="middle" align="center" style="width: 20%">13</td>
            <td valign="middle" align="center" style="width: 20%">10</td>
            <td valign="middle" align="center" style="width: 15%"><a href="">Update Order</a></td>
        </tr>
        <tr>
            <td valign="middle" align="left" style="width: 100%; height: 5" colspan="4" />
        </tr>
        <tr>
            <td valign="middle" align="left" style="width: 40%">Catering Ordered</td>
            <td valign="middle" align="center" style="width: 20%">10</td>
            <td valign="middle" align="center" style="width: 20%">10</td>
            <td valign="middle" align="center" style="width: 15%"><a href="">Update Order</a></td>
        </tr>
        <tr>
            <td valign="middle" align="left" style="width: 100%; height: 5" colspan="4" />
        </tr>
        <tr>
            <td valign="middle" align="left" style="width: 40%">Event setup email to venue</td>
            <td valign="middle" align="center" style="width: 20%">10</td>
            <td valign="middle" align="center" style="width: 20%">10</td>
            <td valign="middle" align="center" style="width: 15%"></td>
        </tr>
        <tr>
            <td valign="middle" align="left" style="width: 100%; height: 10" colspan="4" />
        </tr>
        <tr>
            <td valign="middle" align="left" style="width: 100%" colspan="4" class="LabelBold">Pre-Course</td>
        </tr>
        <tr>
            <td valign="middle" align="left" style="width: 100%" colspan="4">
                <asp:CheckBoxList ID="chkPreCourseTasks" CssClass="Label" runat="server">
                    <asp:ListItem Text="VISA letter sent" Value="" />
                    <asp:ListItem Text="VISA letter received" Value="" />
                    <asp:ListItem Text="Course notes file received" Value="" />
                    <asp:ListItem Text="Reminder email sent to participants" Value="" />
                    <asp:ListItem Text="Sign-in sheet sent to instructor" Value="" />
                    <asp:ListItem Text="Notes received at venue" Value="" />
                </asp:CheckBoxList>
            </td>
        </tr>
        <tr>
            <td valign="middle" align="left" style="width: 100%; height: 5" colspan="4" />
        </tr>
        <tr>
            <td valign="middle" align="left" style="width: 100%" colspan="4" class="LabelBold">Post-Course</td>
        </tr>
        <tr>
            <td valign="middle" align="left" style="width: 100%" colspan="4">
                <asp:CheckBoxList ID="chkPostCourseTasks" CssClass="Label" runat="server">
                    <asp:ListItem Text="Attendance completed" Value="" />
                    <asp:ListItem Text="Certificates sent to participants" Value="" />
                    <asp:ListItem Text="Print invoice approved" Value="" />
                    <asp:ListItem Text="Venue invoice approved" Value="" />
                    <asp:ListItem Text="Catering invoice approved" Value="" />
                </asp:CheckBoxList>
            </td>
        </tr>
        </table>
    </td>
</tr>
</table>
</asp:Panel>
<AJAXToolKit:CollapsiblePanelExtender ID="clpCourseTasks" runat="server" 
    TargetControlID="pnlCourseTasksContent"
    CollapseControlID="pnlCourseTasksHeader" 
    ExpandControlID="pnlCourseTasksHeader" 
    TextLabelID="lblCourseTasksHeader" 
    Collapsed="true"
    ExpandDirection="Vertical"
    AutoCollapse="False"
    SuppressPostBack="true" />
</ContentTemplate>
</asp:UpdatePanel>

Open in new window

0
Comment
Question by:Q-M
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 12

Expert Comment

by:Cyber-spy
ID: 35040810
Which web browser does it not work in? All of them (IE, FF, Chrome, Safari, Opera) or just particular ones.

What doesn't work when you add the dtd path? Would it be simpler to fix the other display issues?
0
 

Author Comment

by:Q-M
ID: 35072146
Sorry for the late reply,

It doesn't work across all browsers.

We have a table with content information for each page, and a table border image that goes around it.

When I try using:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The table border image doesn't extend the entire height of the table. I haven't been able to figure out why this happens, but the only time it works is when I use: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
0
 
LVL 12

Accepted Solution

by:
Cyber-spy earned 500 total points
ID: 35073950
Hi,

I couldn't recreate what you were describing.

However, you seem to be saying that, with the DTD reference, the table wasn't being formatted properly, although the expanding panel was working correctly.

If this is so, try being more explicit about your table styling, using CSS.

For example, adding the following style block to the <head> section sets the borders correctly (although, because of the number of nested tables, there are a lot of borders - you may want to create some classes and limit which cells have borders)
 <style>
table, td
{
    border-color: #600;
    border-style: solid;
}

table
{
    border-width: 0 0 1px 1px;
    border-spacing: 0;
    border-collapse: collapse;
}

td
{
    margin: 0;
    padding: 4px;
    border-width: 1px 1px 0 0;
}
 </style>

Open in new window

0
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

 

Author Comment

by:Q-M
ID: 35074188
I think what I'm going to do is just set-up the page to use normal panels and have an onclick event on the panel headers to hide the panels.

Would have been nice to use the collapsible panels, but I don't have the time to go in and start messing around with the css styles.

Thanks for your help anyways.
0
 

Author Closing Comment

by:Q-M
ID: 35074199
Didn't exactly solve my problem, I had to use an alternative method to fix my problem
0
 
LVL 12

Expert Comment

by:Cyber-spy
ID: 35074379
You could also use jQuery to hide/show your tables - see jquery.com
Have fun!
0

Featured Post

Secure Your Active Directory - April 20, 2017

Active Directory plays a critical role in your company’s IT infrastructure and keeping it secure in today’s hacker-infested world is a must.
Microsoft published 300+ pages of guidance, but who has the time, money, and resources to implement? Register now to find an easier way.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
With Secure Portal Encryption, the recipient is sent a link to their email address directing them to the email laundry delivery page. From there, the recipient will be required to enter a user name and password to enter the page. Once the recipient …
Finds all prime numbers in a range requested and places them in a public primes() array. I've demostrated a template size of 30 (2 * 3 * 5) but larger templates can be built such 210  (2 * 3 * 5 * 7) or 2310  (2 * 3 * 5 * 7 * 11). The larger templa…

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question