Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

.NET AJAX Toolkit CollapsiblePanelExtender

Posted on 2011-03-04
6
Medium Priority
?
751 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
Efficient way to get backups off site to Azure

This user guide provides instructions on how to deploy and configure both a StoneFly Scale Out NAS Enterprise Cloud Drive virtual machine and Veeam Cloud Connect in the Microsoft Azure Cloud.

 

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

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.

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…
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 …
In this video, Percona Solution Engineer Dimitri Vanoverbeke discusses why you want to use at least three nodes in a database cluster. To discuss how Percona Consulting can help with your design and architecture needs for your database and infras…
In this video, Percona Director of Solution Engineering Jon Tobin discusses the function and features of Percona Server for MongoDB. How Percona can help Percona can help you determine if Percona Server for MongoDB is the right solution for …

618 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