7 Answers, 1 is accepted
We just modified our existing code-library (How to print RadGrid contents) to show how to use the same approach to print another controls like RadCalendar.
Print RadGrid/RadCalendar
Let me know if you need further assistance.
Best regards,
Daniel
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
<%
@ Page Title="Event Calendar" Language="vb" AutoEventWireup="false" MasterPageFile="~/MasterPage.Master"
CodeBehind="Calendar.aspx.vb" Inherits="ClickableCommunity.Calendar" %>
<%
@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<
asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript">
//this function is called when they click the link
//and not when they click the checkbox
//it determines whether or not they clicked a checked node
//and also whether or not they clicked a parent or child node
function OnClientNodeClicking(sender, eventArgs) {
//this is the current checked state of the node
var checked = eventArgs.get_node().get_checked();
//this is the current node
var node = eventArgs.get_node();
//set the node to the state that it is not currently in
//basically this will mirror the effect of checking the node
node.set_checked(!checked);
//since the node state has changed we have to
//redefine checked
checked = eventArgs.get_node().get_checked();
//this is the child node
var childNodes = eventArgs.get_node().get_nodes();
//this is the node level
var nodeLevel = node.get_level();
//split the value
var tempValue = node.get_value();
//if they clicked the node
if (checked) {
//if they clicked a parent node
if (nodeLevel == 0) {
UpdateAllChildren(childNodes, checked);
}
//if tempValue
//if this is a child node then we
//add a marker
else if (childNodes.get_count() == 0) {
showEvent(tempValue);
}
//else if
//they clicked a child node
else {
UpdateAllChildren(childNodes, checked);
//addMarker(tempValue);
}
//else
}
//if checked
//they didn't check the node
else {
//if they clicked a parent node
if (nodeLevel == 0) {
UpdateAllChildren(childNodes, checked);
}
//if tempValue
//if this is a child node then we
//add a marker
else if (childNodes.get_count() == 0) {
hideEvent(tempValue);
}
//else if
//they clicked a child node
else {
UpdateAllChildren(childNodes, checked);
//removeMarker(tempValue);
}
//else
}
//else
}
//OnclientnodeClicking
function UpdateAllChildren(nodes, checked) {
var i;
for (i = 0; i < nodes.get_count(); i++) {
if (checked) {
nodes.getNode(i).check();
showEvent(nodes.getNode(i).get_value());
}
//if
else {
nodes.getNode(i).set_checked(
false);
hideEvent(nodes.getNode(i).get_value());
}
//else
//these next three lines of code are if you have
//child nodes within child nodes
//i.e. Parent -> child 1 -> child1
// Parent -> child 1 -> child2
// Parent -> child 2 -> child1
// Parent -> child 2 -> child2
//if you do and you want them also checked then
//uncomment these three lines
if (nodes.getNode(i).get_nodes().get_count() > 0) {
UpdateAllChildren(nodes.getNode(i).get_nodes(), checked);
}
//if
}
//for
}
//UpdateAllChildren
//this function is called when they click the checkbox
//and not when they click the link
//it determines whether or not they checked a checked node
//and also whether or not they checked a parent or child node
function OnClientNodeChecked(sender, eventArgs) {
//this is the current checked state of the node
var checked = eventArgs.get_node().get_checked();
//this is the current node
var node = eventArgs.get_node();
//this is the child node
var childNodes = eventArgs.get_node().get_nodes();
//this is the node level
var nodeLevel = node.get_level();
//split the value
var tempValue = node.get_value();
//if they unchecked a node
if (checked) {
checked =
false;
//if they unchecked a parent node
if (nodeLevel == 0) {
UpdateAllChildren(childNodes, checked);
}
//if tempValue
//if this is a child node then we
//add a marker
else if (childNodes.get_count() == 0) {
//alert("unchecked child checked " + checked);
hideEvent(tempValue);
}
//else if
//they clicked a child node
else {
//alert("unchecked parent checked " + checked);
UpdateAllChildren(childNodes, checked);
hideEvent(tempValue);
}
//else
}
//if checked
//they didn't check the node
else {
checked =
true;
//if they clicked a parent node
if (nodeLevel == 0) {
//alert("checked parent checked " + checked);
checked =
true;
UpdateAllChildren(childNodes, checked);
}
//if tempValue
//if this is a child node then we
//add a marker
else if (childNodes.get_count() == 0) {
//alert("checked child checked " + checked);
showEvent(tempValue);
}
//else if
//they clicked a child node
else {
//alert("checked parent checked " + checked);
checked =
true;
UpdateAllChildren(childNodes, checked);
showEvent(tempValue);
}
//else
}
//else
}
//OnClientNodeChecked
arrOfEvents =
new Array();
function itemClicked(sender, eventArgs) {
//the value from the click
var passedVal = eventArgs.get_item().get_value();
//if the passedVal is something
//then we add the marker
if (passedVal) {
var count = 0;
var inCalendar = false;
while (inCalendar == false && count < arrOfEvents.length) {
if (passedVal == arrOfEvents[count]) {
inCalendar =
true;
break;
}
//if passedVal
count++;
}
//while count <
//if it was in the map
if (inCalendar) {
arrOfEvents.splice(count, 1);
hideEvent(passedVal);
}
//if inCalendar
else {
arrOfEvents.push(passedVal);
showEvent(passedVal);
}
//else
}
//if passedVal
}
//itemClicked
</script>
</
asp:Content>
<
asp:Content ID="Content2" ContentPlaceHolderID="header" runat="server">
</
asp:Content>
<
asp:Content ID="Content4" ContentPlaceHolderID="menuContent" runat="server">
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1"
Width="220px">
<telerik:RadPanelBar ID="RadPanelBar1" runat="server" Skin="Web20" ExpandMode="SingleExpandedItem"
AllowCollapseAllItems="false" Width="220px" OnClientItemClicked="itemClicked" BorderStyle="None">
<CollapseAnimation Type="None" Duration="100"></CollapseAnimation>
<Items>
<telerik:RadPanelItem runat="server" Text="Events" Font-Bold="true" Font-Size="Medium"
Expanded="true" ChildGroupHeight="445">
<Items>
<telerik:RadPanelItem runat="server" BorderStyle="None">
<ItemTemplate>
<telerik:RadTreeView ID="RadTreeView1" runat="server" Skin="Web20" CssClass="leftPanelContent"
CheckBoxes="true" OnClientNodeChecking="OnClientNodeChecked" OnClientNodeClicking="OnClientNodeClicking">
</telerik:RadTreeView>
</ItemTemplate>
</telerik:RadPanelItem>
</Items>
</telerik:RadPanelItem>
<telerik:RadPanelItem runat="server" Text="Search" Font-Bold="true" Font-Size="Medium" ChildGroupHeight="445">
<Items>
<telerik:RadPanelItem BorderStyle="None">
<ItemTemplate>
<center>
<table>
<tr>
<td class="searchTable">
<telerik:RadTextBox ID="searchInputTextBox" runat="server" Skin="Web20"
EmptyMessage="Enter Keywords" CssClass="searchTextBox"
EmptyMessageStyle-CssClass="emptyTextboxText"/>
</td>
<td class="searchTable">
<asp:Button runat="server" ID="searchButton" Text="Search" OnClick="searchButtonClick" />
</td>
</tr>
</table>
</center>
</ItemTemplate>
</telerik:RadPanelItem>
</Items>
<Items>
<telerik:RadPanelItem CssClass="searchResultsText">
<ItemTemplate>
</ItemTemplate>
</telerik:RadPanelItem>
</Items>
</telerik:RadPanelItem>
</Items>
</telerik:RadPanelBar>
</telerik:RadAjaxPanel>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" SkinID="Web20" Height="75px" Transparency="1">
<img alt="Searching..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.LoadingProgressBar.gif") %>'
style="border: 0px;" />
</
telerik:RadAjaxLoadingPanel>
</
asp:Content>
<
asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
<div id="divCalendar">
<telerik:RadScheduler ID="RadScheduler1" runat="server" Height="460" DataEndField="stoptime"
DataKeyField="eventid" DataStartField="starttime" DataSubjectField="name" HoursPanelTimeFormat="htt"
Skin="Web20" ValidationGroup="RadScheduler1" GroupingDirection="Vertical" CssClass="calendarView"
SelectedView="MonthView" WeekView-DayStartTime="08:00:00" WeekView-DayEndTime="23:59:00"
WeekView-WorkDayEndTime="23:59:00" WeekView-WorkDayStartTime="08:00:00" WorkDayEndTime="23:59:00"
DayEndTime="23:59:00" DayView-DayEndTime="23:59:00" DayView-DayStartTime="08:00:00"
DayView-WorkDayEndTime="23:59:00" DayView-WorkDayStartTime="08:00:00" AllowDelete="false"
AllowEdit="false" AllowInsert="false" TimelineView-NumberOfSlots="7">
</telerik:RadScheduler>
</div>
<asp:SqlDataSource ID="eventsDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:connectionString %>"
SelectCommand="returnAllEvents" SelectCommandType="StoredProcedure"></asp:SqlDataSource>
<a href="#" onclick="PrintCalendar()">Print</a>
<script type="text/javascript">
function pageLoad() {
$ = $telerik.$;
scheduler = $find(
'<%=RadScheduler1.ClientID %>');
var panelBar = $find('<%=RadPanelBar1.ClientID %>');
var item = panelBar.findItemByText("Events");
var treeview = item.get_items().getItem(0).findControl("RadTreeView1");
//hide all of the events initially
$(document).ready(
function() {
$(
".rsApt").parent().hide();
});
}
//pageLoad
//this function will set an appointment to visible
//it takes in the id of the event to show and assumes
//there is a global variable of scheduler that is the
//rad scheduler
function showEvent(appID) {
var tempArr = appID.split(";,;");
var type = tempArr[0];
if (type != "Category") {
var appDivID = "#" + scheduler.get_appointments().findByID(appID).get_element().id;
$(appDivID).parent().show();
}
//if
}
//showEvent
//this function will set an appointment to
//hidden. it takes in the id of the event to show and assumes
//there is a global variable of scheduler that is the
//rad scheduler
function hideEvent(appID) {
var tempArr = appID.split(";,;");
var type = tempArr[0];
if (type != "Category") {
var appDivID = "#" + scheduler.get_appointments().findByID(appID).get_element().id;
$(appDivID).parent().hide();
}
//if type
}
//hideEvent
function PrintCalendar() {
var previewWnd = window.open('about:blank', '', '', false);
var sh = '<%= ClientScript.GetWebResourceUrl(RadScheduler1.GetType(),String.Format("Telerik.Web.UI.Skins.{0}.Grid.{0}.css",RadScheduler1.Skin)) %>';
var styleStr = "<html><head><link href = '" + sh + "' rel='stylesheet' type='text/css'></link></head>";
var htmlcontent = styleStr + "<body>" + $find('<%= RadScheduler1.ClientID %>').get_element().outerHTML + "</body></html>";
previewWnd.document.open();
previewWnd.document.write(htmlcontent);
previewWnd.document.close();
previewWnd.print();
previewWnd.close();
}
</script>
</
asp:Content>
And here is the master page it is contained in
<%
@ Master Language="VB" AutoEventWireup="false" %>
<%
@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%
@ Register TagPrefix="loginDivTemplate" TagName="login" src="~/ascx/loginTemplate.ascx"%>
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<%
@ import namespace="System.Data" %>
<%
@ import namespace="System.Data.Sql" %>
<%
@ import namespace="System.Data.SqlClient" %>
<%
@ import namespace="Telerik.Web.UI" %>
<
head id="Head1" runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link href="ClickableCommunity.css" rel="stylesheet" type="text/css" />
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</
head>
<
body id="MasterBody" runat="server" style="margin: 0px; height: 100%; overflow: hidden;">
<form id="Form1" method="post" runat="server" style="height: 100%">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<br />
<asp:ContentPlaceHolder ID="header" runat="server">
</asp:ContentPlaceHolder>
<div id="loginDiv">
<loginDivTemplate:login id="loginPanelContent" runat="server"></loginDivTemplate:login>
</div>
<div id="topDiv">
<div id="image" class="topDivImage">
<a href="Default.aspx">
<img src="images/logoKVB.jpg" style="border:none;"
alt="Clickable Community Logo" width="200" height="65" />
</a>
</div>
<div id="viewMenu" class="viewMenu">
<center>
<table><tr><td>
<telerik:RadMenu ID="RadMenu1" runat="server" Skin="Web20">
<Items>
<telerik:RadMenuItem runat="server" Text="Events View">
<Items>
<telerik:RadMenuItem runat="server" NavigateUrl="~/Default.aspx" Text="Map">
</telerik:RadMenuItem>
<telerik:RadMenuItem runat="server" Text="Calendar" NavigateUrl="Calendar.aspx">
</telerik:RadMenuItem>
</Items>
</telerik:RadMenuItem>
</Items>
</telerik:RadMenu>
</td></tr></table>
</center>
</div>
</div>
<telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Vertical" Width="100%" CssClass="AllContent" LiveResize="true" Height="510">
<telerik:RadPane ID="LeftRadPane1" runat="server" Width="220px" Scrolling="None"
BorderStyle="None" BorderSize="0">
<div id="leftPanel">
<asp:ContentPlaceHolder ID="menuContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</telerik:RadPane>
<telerik:RadSplitBar runat="server" ID="RadSplitBar2" CollapseMode="Forward" EnableResize="true"
ForeColor='Green' />
<telerik:RadPane ID="RightRadPane1" runat="server" CssClass="RightPanelPadding" Scrolling="Both"
BorderStyle="None" BorderSize="0" Height="460">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</telerik:RadPane>
</telerik:RadSplitter>
<asp:Label ID="tempOutput" runat="server" Text=""></asp:Label>
</form>
</
body>
</
html>
I noticed a little omission - you should request the Scheduler skin as shown below:
var
sh =
'<%= ClientScript.GetWebResourceUrl(RadScheduler1.GetType(),String.Format("Telerik.Web.UI.Skins.{0}.Scheduler.{0}.css",RadScheduler1.Skin)) %>'
;
Kind regards,
Daniel
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
var sh = '<%= ClientScript.GetWebResourceUrl(RadScheduler1.GetType(),String.Format("Telerik.Web.UI.Skins.{0}.Scheduler.{0}.css",RadScheduler1.Skin)) %>';
While that would have not gotten the css skin, it still has not fixed my problem. The issue here is the html in $find('<%=RadScheduler1.ClientID %>').get_element().outerHTML
Is undefined. However, if I change outerHTML to innerHTML I get a weird html. Go to http://alpha.clickablecommunity.com/Calendar.aspx and click on the print button to see what I mean
I thought that you will be able to print RadScheduler in the same manner as RadGrid and RadCalendar but I was wrong.
The problem is that RadScheduler is complex control that use JavaScript for positioning its elements on the screen. Therefore even if we output its skins (3 in total - RadScheduler, RadCalendar and RadScheduler common) on the page we won't be able to achieve the expected appearance.
The only workaround that crosses my mind at this point is to print the whole page without the scripts:
var
previewWnd = window.open(
"about:blank"
,
''
,
''
,
false
);
var
html = document.documentElement.innerHTML;
previewWnd.document.open();
html = html.replace(/<script .*?>(.|\n)*?<\/script>/gi,
""
);
previewWnd.document.write(html);
previewWnd.document.close();
previewWnd.print();
previewWnd.close();
Best regards,
Daniel
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.