Printing content of a div/table element

[justapimp]

Hi Fellow programmers,

I need to print the content of a repeater list located inside of an asp:panel. once the page is loaded, the code for the asp:panel is displayed as a regular div tag. What I need to do is to print the content of the div/asp:panel once the page is populated with data. As you will see from my javaScript, I have alerts set in place to see if I am getting the correct control value and it is in fact correct.

I wrote a javascript function to the job; but when I try to run the method, it tells me the value is undefined.

The Print Button

<tr id="ViewMapButtonSection" runat="server">
                            <td style="height: 30px;" align="center">
                                <asp:Button ID="btnExprot2Excel" runat="server" Text="Export To Excel" OnClientClick="createExcelSheet();" />
                                <asp:Button ID="btnRetrieveTracks" runat="server" Text="Retrieve Tracks" />
                                <asp:Button ID="btnPrint" runat="server" Text="Print Tracks" OnClientClick='javascript:PrintContent("hystoryListPanel")' /></td>
                        </tr>

The JavaScript Code

function PrintContent(ctrl)
    {
        //alert(ctrl);
        var DocumentContainer = ctrl;
        //alert(DocumentContainer);
        var WindowObject = window.open('', "TrackHistoryData", 
                              "width=420,height=225,top=250,left=345,toolbars=no,scrollbars=no,status=no,resizable=no");
        //alert(ctrl);
        //alert(DocumentContainer);
        WindowObject.document.write(DocumentContainer.innerHTML);
        //alert(ctrl);
        WindowObject.document.close();
        WindowObject.focus();
        WindowObject.print();
        WindowObject.close();
    }

The Panel code

<td>
                    <asp:Panel ID="historyListPanel" runat="server" Height="450" Width="750px" ScrollBars="Vertical" Wrap="false" Visible="true">
                    <asp:repeater id="historyList" runat="server">						        
								<HeaderTemplate>
									<table cellspacing="1" id="DataList" cellpadding="0" width="730px">
										<tr class="listHeadSmall">
											<td align="left" style="width: 75px;">TrackUID</td>
											<td align="center" style="width: 75px;">Fix ID</td>
											<td align="center" style="width: 100px;">Latitude</td>
											<td align="center" style="width: 100px;">Longitude</td>
											<td align="center" style="width: 75px;">Accuracy</td>
											<td align="center" style="width: 140px;">TimeOfFix</td>
											<td align="center">Case Note</td>																						
										</tr>
								</HeaderTemplate>
								<ItemTemplate>
									<tr class="listItem">
										<td style="width: 75px;"><%# DataBinder.Eval(Container.DataItem, "TrackUID")%></td>
										<td style="width: 75px;"><%#DataBinder.Eval(Container.DataItem, "UID")%></td>
										<td style="width: 100px;"><%#DataBinder.Eval(Container.DataItem, "PositionLat")%></td>
										<td align="center" style="width: 100px;"><%#DataBinder.Eval(Container.DataItem, "PositionLon")%></td>
										<td align="center" style="width: 75px;"><%# DataBinder.Eval(Container.DataItem, "Accuracy") %> m.</td>
										<td align="center" style="width: 140px;"><%# DataBinder.Eval(Container.DataItem, "TimeOfFix") %></td>
										<td align="center" style="width: 50px;"><asp:Button ID="btnCaseNotes" runat="server" Text="Case Note" 
										                           OnClick="runCaseNote_Clicked" Enabled="false" /></td>										
									</tr>
								</ItemTemplate>
								<AlternatingItemTemplate>
									<tr class="listItemAlternate">
										<td style="width: 75px;"><%# DataBinder.Eval(Container.DataItem, "TrackUID")%></td>
										<td style="width: 75px;"><%#DataBinder.Eval(Container.DataItem, "UID")%></td>
										<td style="width: 100px;"><%#DataBinder.Eval(Container.DataItem, "PositionLat")%></td>
										<td align="center" style="width: 100px;"><%#DataBinder.Eval(Container.DataItem, "PositionLon")%></td>
										<td align="center" style="width: 75px;"><%# DataBinder.Eval(Container.DataItem, "Accuracy") %> m.</td>
										<td align="center" style="width: 140px;"><%# DataBinder.Eval(Container.DataItem, "TimeOfFix") %></td>
										<td  align="center" style="width: 50px;"><asp:Button ID="btnCaseNote" runat="server" Text="Case Note" 
										                            OnClick="runCaseNote_Clicked" Enabled="false" /></td>										
									</tr>
								</AlternatingItemTemplate>
								<FooterTemplate>
									<tr class="listFooter">
										<td colspan="7">GPSIT Find & See</td>
									</tr>
								</table>
			</FooterTemplate>
			</asp:repeater>
			</asp:Panel>
                </td>

I posted all the code so you could get an idea of what is going on.

[justapimp]

solution:

instead of passing the control name of the container, I referenced it by using the document.getElementById() method [Line 3].

function PrintContent()
    {
        var DocumentContainer = document.getElementById('historyListPanel');
        var WindowObject = window.open('', "TrackHistoryData", 
                              "width=740,height=325,top=200,left=250,toolbars=no,scrollbars=yes,status=no,resizable=no");
        WindowObject.document.writeln(DocumentContainer.innerHTML);
        WindowObject.document.close();
        WindowObject.focus();
        WindowObject.print();
        WindowObject.close();
    }