This is a migrated thread and some comments may be shown as answers.

Printing Rad Calendar

7 Answers 89 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Web Services
Top achievements
Rank 2
Web Services asked on 13 Nov 2009, 07:00 PM
I was just curious if anyone has any good ideas or thoughts on how I can print a calendar that has events loaded on it. Is there an option or something? If not, anyone have any good suggestions? Thanks,

7 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 18 Nov 2009, 01:57 PM
Hello,

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.
0
Web Services
Top achievements
Rank 2
answered on 18 Nov 2009, 04:37 PM
So I have tried the code to print the calendar and I get a blank page that says undefined. Here is my entire source and you can see it live at alpha.clickablecommunity.com Thanks,

<%

@ 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>

 

0
Daniel
Telerik team
answered on 18 Nov 2009, 05:35 PM
Hello,

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.
0
Web Services
Top achievements
Rank 2
answered on 18 Nov 2009, 05:49 PM
So I changed the line to
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





0
Web Services
Top achievements
Rank 2
answered on 18 Nov 2009, 05:51 PM
It looks like the inner html is the correct thing, I am just not getting the css skin. Any ideas why? Thanks
0
Web Services
Top achievements
Rank 2
answered on 18 Nov 2009, 06:10 PM
I have noticed that css links on my page where the calendar is different than the css link in the print page. On the print page there is only one css link tag. However, on the calendar page there are multiple css page links. Once again, you can see the source and live site at http://alpha.clickablecommunity.com/Calendar.aspx Any ideas why? Thanks,
 

0
Daniel
Telerik team
answered on 19 Nov 2009, 12:44 PM
Hello,

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.
Tags
Calendar
Asked by
Web Services
Top achievements
Rank 2
Answers by
Daniel
Telerik team
Web Services
Top achievements
Rank 2
Share this question
or