ASP.NET CollapsiblePanelExtender Printing Content

The other day I was working with the ASP.NET Ajax toolkit’s CollapsiblePanelExtender and have the toughest time getting the content within the panel to print.  I found that there were 2 issues going on: 1)  you have to expand you panel before you print, and 2)  there is some CSS magic that you need to do to get all the content to show.  For the first issue, you have to expand all the panels before you print, which you can do using some JavaScript, unfortunately you can’t fire this when the user select File^Print.  The second issue I resolved using the CSS print media type, which I have an example of the principle here Printable Web Page. 

Expanding Collapsible Panels

This can be achieved by a little JavaScript.  In my situation the user’s wanted a toggle in the UI, I used a check box but a button can do the same thing.

1.  Create the UI toggle item that will fire JavaScript onclick event.

<input type=”checkbox” onclick=”toggleCollapsibleSections();” />

2.  Create the JavaScript that will expand/collapse the panels.  Note I’m using jQuery here to find the elements and that the ID of the collapsible panel is the client ID for the CollapsiblePanelExtender.  If you’re using .NET 4.0 you can set the extender’s ClientIDMode to Static otherwise you will have to either use CSS class to find extenders you want or spit our the X.ClientID where X is the extender control.

function toggleCollapsibleSections() {
    var isChecked = $("#toggleCheckbox").attr("checked");
    if (isChecked) 
        expandSections(true);
    else 
        expandSections(false);
}

function expandSections(doExpand) {
    if (doExpand) {
        $find("MyCollapsiblePanelExtenderClientID")._doOpen();
        // + all other section i want to open
    }
    else {
        $find("MyCollapsiblePanelExtenderClientID")._doClose();
        // + all other section i want to close
    }
}

Printing Collapsible Panel Content

This was a tough fix.  In a nut shell the CollapsiblePanelExtender applies a inline style “overflow” to the div that wraps you content.  This causes the printing to cut off the content within you section if the content is high enough.  The way to solve this is to define a overflow style for all div’s in you print media CSS file.  See Printable Web Page on details about defining and using print media CSS.  The CSS is listed below.  Notice the usage of the “!important” this will override any inline styles that the ajax toolkit has applied.

div { overflow: visible !important; }