Printing Rad Calendar

8 posts, 0 answers
  1. Web Services
    Web Services avatar
    243 posts
    Member since:
    Apr 2008

    Posted 13 Nov 2009 Link to this post

    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,
  2. Daniel
    Admin
    Daniel avatar
    4943 posts

    Posted 18 Nov 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Web Services
    Web Services avatar
    243 posts
    Member since:
    Apr 2008

    Posted 18 Nov 2009 Link to this post

    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>

     

  5. Daniel
    Admin
    Daniel avatar
    4943 posts

    Posted 18 Nov 2009 Link to this post

    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.
  6. Web Services
    Web Services avatar
    243 posts
    Member since:
    Apr 2008

    Posted 18 Nov 2009 Link to this post

    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





  7. Web Services
    Web Services avatar
    243 posts
    Member since:
    Apr 2008

    Posted 18 Nov 2009 Link to this post

    It looks like the inner html is the correct thing, I am just not getting the css skin. Any ideas why? Thanks
  8. Web Services
    Web Services avatar
    243 posts
    Member since:
    Apr 2008

    Posted 18 Nov 2009 Link to this post

    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,
     

  9. Daniel
    Admin
    Daniel avatar
    4943 posts

    Posted 19 Nov 2009 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017