I'm having some issues with the display of a RadGrid in a printer friendly window. I have a simple RadWindow that combines multiple elements (RadGrids and other divs) into a single printable flow. When the window is opened the following code runs to generate the content:
This basically iterates a tabstrip/multipage and grabs the grids on each then takes injects the html of each into a pre-defined area on "Print Preview" window. This works fine and the content looks correct. After clicking a print button a separate script is called that takes this content and passes it to an iFrame and calls print() as described here: http://www.telerik.com/support/kb/aspnet-ajax/window/printing-the-contents-of-a-radwindow.aspx. I am also trying to maintain the grid styles as described here: http://www.telerik.com/community/code-library/aspnet-ajax/grid/print-radgrid-contents.aspx. This is my print function:
Unfortunately what comes back is a little odd. Not all of the styling is there and the print appears to be inserting some odd page breaks based on the content. See attached screenshots for examples. I'm sure I'm missing something simple here. Any help would be appreciated.
var
multiPage = $find(
'<%= InquiryDetailNotesMultiPage.ClientID %>'
);
var
tabStrip = $find(
"<%= InquiryDetailNotesTabStrip.ClientID %>"
);
var
baseId =
"<%= CombinedNotesArea.ClientID %>"
.replace(
"CombinedNotesArea"
,
""
);
var
baseGridId =
"<%= InquiryDetailCombinedGrid.ClientID %>"
.replace(
"InquiryDetailCombinedGrid"
,
""
);
var
views = multiPage.get_pageViews();
var
tabs = tabStrip.get_tabs();
var
additionalInformationHtml =
""
;
for
(
var
i = 0; i< views.get_count(); i++) {
var
view = views.getPageView(i);
var
tab = tabs.getTab(i);
var
grid = $find(baseGridId +
"InquiryDetail"
+ tab.get_text().replace(
" "
,
""
) +
"Grid"
);
if
(grid) {
additionalInformationHtml =
"Additional Information - "
;
additionalInformationHtml += tab.get_text();
additionalInformationHtml += view.get_element().children[0].outerHTML;
}
document.getElementById(baseId + tab.get_text().replace(
" "
,
""
) +
"NotesArea"
).innerHTML = additionalInformationHtml;
}
function
CallPrint() {
var
content = $get(
"<%= PrintableArea.ClientID %>"
).innerHTML;
var
styleSheet =
'<%= Telerik.Web.SkinRegistrar.GetWebResourceUrl(Page, InquiryDetailOnlineActivityGrid.GetType(), String.Format("Telerik.Web.UI.Skins.{0}.Grid.{0}.css", InquiryDetailOnlineActivityGrid.Skin)) %>'
;
var
baseStyleSheet =
'<%= Telerik.Web.SkinRegistrar.GetWebResourceUrl(Page, InquiryDetailOnlineActivityGrid.GetType(), "Telerik.Web.UI.Skins.Grid.css") %>'
;
//remove any script elements
content = content.replace( /<script .*?>(.|\n)*?<\/script>/gi ,
""
);
var
printIframe = $get(
"ifmcontentstoprint"
);
var
printDocument = printIframe.contentWindow.document;
printDocument.designMode =
"on"
;
printDocument.open();
printDocument.write(
"<html><head><link href = '"
+ styleSheet +
"' rel='stylesheet' type='text/css'><link href = '"
+ baseStyleSheet +
"' rel='stylesheet' type='text/css'></head><body>"
+ content +
"</body></html>"
);
printDocument.close();
try
{
if
(document.all) {
printDocument.execCommand(
"Print"
,
null
,
false
);
}
else
{
printIframe.contentWindow.print();
}
}
catch
(ex) {
alert(
"error printing"
);
}
}
Unfortunately what comes back is a little odd. Not all of the styling is there and the print appears to be inserting some odd page breaks based on the content. See attached screenshots for examples. I'm sure I'm missing something simple here. Any help would be appreciated.