?
Solved

.NET AJAX Toolkit CollapsiblePanelExtender

Posted on 2011-03-04
6
Medium Priority
?
747 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:Adam
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:
Adam earned 1500 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

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:Adam
ID: 35074379
You could also use jQuery to hide/show your tables - see jquery.com
Have fun!
0

Featured Post

Give Your Engineering Team a Productivity Boost

Learn why container technology is so powerful and how it can provide your team with productivity gains and other benefits.

Question has a verified solution.

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

jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Add bar graphs to Access queries using Unicode block characters. Graphs appear on every record in the color you want. Give life to numbers. Hopes this gives you ideas on visualizing your data in new ways ~ Create a calculated field in a query: …
This tutorial will teach you the special effect of super speed similar to the fictional character Wally West aka "The Flash" After Shake : http://www.videocopilot.net/presets/after_shake/ All lightning effects with instructions : http://www.mediaf…
Suggested Courses

771 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