Solved

.NET AJAX Toolkit CollapsiblePanelExtender

Posted on 2011-03-04
6
741 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
Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

 

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

More Than Just A Video Library

Train for your certification. Learn the latest DevOps tools. Grow your skillset to do better work.

At Linux Academy, we release new training modules every week so you'll always be up to date on the latest tech.

Question has a verified solution.

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

Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
This article discusses how to implement server side field validation and display customized error messages to the client.
In this video we outline the Physical Segments view of NetCrunch network monitor. By following this brief how-to video, you will be able to learn how NetCrunch visualizes your network, how granular is the information collected, as well as where to f…
NetCrunch network monitor is a highly extensive platform for network monitoring and alert generation. In this video you'll see a live demo of NetCrunch with most notable features explained in a walk-through manner. You'll also get to know the philos…

688 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