Solved

.NET AJAX Toolkit CollapsiblePanelExtender

Posted on 2011-03-04
6
736 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
  • 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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 

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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Although Jacob Bernoulli (1654-1705) has been credited as the creator of "Binomial Distribution Table", Gottfried Leibniz (1646-1716) did his dissertation on the subject in 1666; Leibniz you may recall is the co-inventor of "Calculus" and beat Isaac…

831 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