Scheduler set_height not working in browsers other than IE

10 posts, 0 answers
  1. Keith
    Keith avatar
    61 posts
    Member since:
    May 2008

    Posted 28 Feb 2011 Link to this post

    We are using Version 2010.3.121735 of the RAD Controls. According to “What's New in RadScheduler for ASP.NET AJAX Q1  SP2 “ there is get_height / set_height property available.

    What's New in RadScheduler for ASP.NET AJAX Q1  SP2 2009 (Version Number 2009.1.527) 

    • Implemented support for custom appointment classes
    • Implemented ResourceCollection.getResourceByType
    • Implemented ResourceStyles support when using web service data binding
    • New client-side property: get_height / set_height
    • New property: WebServiceAppointmentController.AppointmentFactory; Allows you to work with custom appointment classes when using web service data binding
    • New client-side appointment property: cssClass; Sets the appointment CSS class
    • The web service methods can now return additional information alongside the appointments 

     

    However, it only seems to work in IE and not other browse; which is a must have for our web application. The following code shows that the change occurs in IE, but not other browsers.

    var splitter = $find("<%= RadSplitter1.ClientID %>");                  

    var scheduler = $find("<%=RadScheduler1.ClientID%>");

    alert("splitter.get_height = " + splitter.get_height());

    scheduler.set_height(splitter.get_height());

    alert("scheduler.get_height = " + scheduler.get_height())


    In IE the alert displays the correct value; however in other browsers it displays a value that was set by the height attribute of the scheduler .


    <telerik:RadScheduler runat="server" ID="RadScheduler1" Height="425px" …


    How do we dynamically set the height client-side on all browsers?

     

    Thanks in advance,

    Keith E.

  2. André
    André avatar
    15 posts
    Member since:
    Feb 2011

    Posted 28 Feb 2011 Link to this post

    You can workaround this by doing a post back and resetting the height in server side. It's not the best solution, but it works...

  3. Keith
    Keith avatar
    61 posts
    Member since:
    May 2008

    Posted 28 Feb 2011 Link to this post

    Andre,

    Not only is it not the best solultion. It is NOT a solutuion.. We need the resize to occur client-side to handle a user changing the browser window size. In other words, attaching to the window.onresize event.

    Why is the is the  set_height there if it is not cross-browser compatible. Telerik hypes cross-browser compatablity as a major feature of its controls. In this case it is not.

    Keith E.
  4. André
    André avatar
    15 posts
    Member since:
    Feb 2011

    Posted 28 Feb 2011 Link to this post

    Keith,

    Post backing does work.

    I haven't tested as i'm not with visual studio right now, but it is something similar to this:

    Code behind:

    protected void Page_Load(object sender, EventArgs e)
    {
        if( Page.IsPostBack() && e.Request["__EVENTARGUMENT"] =="WindowResized")
        {
            RadSchedulerObj.Height = 5;
        }
    }

    Javascript:

    window.onresize = funcion(){
        __doPostBack('__Page', 'WindowResized');
    }

  5. Keith
    Keith avatar
    61 posts
    Member since:
    May 2008

    Posted 28 Feb 2011 Link to this post

    I don't doubt that the postback works. I am just asserting that we have a stronger preference to do it client side. Especially since Telerik stated that this feature was added in Version Number 2009.1.527.

    Seems like a bug to me!

    Keith E.
  6. Nikolay Tsenkov
    Admin
    Nikolay Tsenkov avatar
    734 posts

    Posted 02 Mar 2011 Link to this post

    Hello Keith,

    I have prepared a video demonstration in which the methods work as expected in Firefox 3.6.13: http://screencast.com/t/g06lwISoe

    Please, post a complete example which reproduces the problem you experience.


    Regards,
    Nikolay Tsenkov
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  7. Keith
    Keith avatar
    61 posts
    Member since:
    May 2008

    Posted 02 Mar 2011 Link to this post

    Nikolay,

    In the "SizeSplitter" function, "scheduler.set_height(splitter.get_height());" works in IE, but not in Safari 5.0.3, Chrome 9.0.597.98 or FF 3.6.13 on Windows or MAC.

    We can attempt to set it to a value i.e. scheduler.set_height(300); with no effect, exept in IE. If read, i.e. alert(scheduler.get_height()), it displays the value that was set in the scheduler's attribute <telerik:RadScheduler runat="server" ID="RadScheduler1" Height="425px"... which is 425.


    <%@ Page Title="Calendar" Language="C#" MasterPageFile="~/CalendarMaster.Master"
     AutoEventWireup="true" CodeBehind="Calendar.aspx.cs" Inherits="KN.Web.Calendar.Calendar" %>
    <%@ Register Src="~/Controls/Calendar/SubscribeCalendar.ascx" TagName="Subscribe" TagPrefix="uc2" %>
    <%@ Register Src="~/Controls/Calendar/AlertSubscriptionPopUp.ascx" TagName="AlertPopUp" TagPrefix="apu" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="scheduler" TagName="EventDetailForm" Src="Controls/EventDetailForm.ascx" %>

    <asp:Content ID="cphCalendarStyle" runat="server" ContentPlaceHolderID="styleSheetHolder">
    <style type="text/css">
     .RadPanePos {position: relative;}
     .RadColorPicker .rcpIcon {position: static !important;}
     .dummyPane {overflow: visible; width: 0 !important; height: 0 !important;}
     .RadMenu .rmGroup .rmText { padding-right: 0px !important;}
    </style>
    </asp:Content>

    <asp:Content ID="Content1" ContentPlaceHolderID="cphContent" runat="server">
     <link type="text/css" rel="stylesheet" href="/App_Themes/<%= Page.Theme %>/styles/calendar.css" />
     <telerik:RadAjaxManager runat="Server" ID="RadAjaxManager1">
      <ClientEvents OnResponseEnd="OnResponseEnd"></ClientEvents>
      <ajaxsettings>
       <telerik:AjaxSetting AjaxControlID="RadCalendar1">
        <UpdatedControls>
         <telerik:AjaxUpdatedControl ControlID="RadCalendar2" />
         <telerik:AjaxUpdatedControl ControlID="RadScheduler1" LoadingPanelID="RadAjaxLoadingPanel1" />
        </UpdatedControls>
       </telerik:AjaxSetting>
       <telerik:AjaxSetting AjaxControlID="RadCalendar2">
        <UpdatedControls>
         <telerik:AjaxUpdatedControl ControlID="RadCalendar1" />
         <telerik:AjaxUpdatedControl ControlID="RadScheduler1" LoadingPanelID="RadAjaxLoadingPanel1" />
        </UpdatedControls>
       </telerik:AjaxSetting>
       <telerik:AjaxSetting AjaxControlID="RadScheduler1">
        <UpdatedControls>
         <telerik:AjaxUpdatedControl ControlID="RadScheduler1" LoadingPanelID="RadAjaxLoadingPanel1" />
        </UpdatedControls>    
       </telerik:AjaxSetting>
      </ajaxsettings>
     </telerik:RadAjaxManager>
     <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Office2007" />
     <div class="calendar-panel" style="margin: 5px;">
      <div id="divCalendarLoading">
       <asp:label id="lblLoading" runat="server" text="Loading ... "></asp:label>
       <img alt="Loading... " src='<%= ResolveUrl("/images/LoadingProgressBar.gif") %>' style="vertical-align: bottom;" />
      </div>
      <telerik:RadSplitter runat="server" ID="RadSplitter1" PanesBorderSize="0" OnClientLoad="SizeSplitter"
       VisibleDuringInit="false" LiveResize="true" OnClientResized="SizeSplitter" Width="80%"
       Height="430px" Skin="Office2007">
       <telerik:RadPane runat="server" ID="dummyPane" CssClass="RadColorPicker RadColorPicker_Custom dummyPane" />
       <telerik:RadPane runat="Server" ID="leftPane" Width="242px" MinWidth="226" MaxWidth="242" CssClass="RadPanePos"
        OnClientResizing="hideScrollableArea" OnClientResized="showScrollableArea" OnClientExpanding="hideScrollableArea"
        OnClientExpanded="showScrollableArea" OnClientCollapsing="hideScrollableArea" OnClientCollapsed="showScrollableArea">
        <div class="calendar-container">
         <telerik:RadCalendar runat="server" ID="RadCalendar1" AutoPostBack="true" EnableMultiSelect="false"
          DayNameFormat="FirstTwoLetters" EnableNavigation="true" EnableMonthYearFastNavigation="false"
          OnSelectionChanged="RadCalendar1_SelectionChanged" OnDefaultViewChanged="RadCalendar1_DefaultViewChanged">
         </telerik:RadCalendar>
         <telerik:RadCalendar runat="server" ID="RadCalendar2" AutoPostBack="true" EnableMultiSelect="false"
          DayNameFormat="FirstTwoLetters" EnableNavigation="false" EnableMonthYearFastNavigation="false"
          OnSelectionChanged="RadCalendar2_SelectionChanged">
         </telerik:RadCalendar>
         <div id="TabWrapper">
          <telerik:RadTabStrip runat="server" ID="rtsCalendars" Orientation="HorizontalTop"
           SelectedIndex="0" MultiPageID="rmpCalendars" width="220px" OnTabClick="rtsCalendars_OnTabClick">
           <tabs>
           <telerik:RadTab ID="rtCoPCalendars" Text="This CoP" Value="CoP" />
           <telerik:RadTab ID="rtMyCalendars" Text="My Calendars" Value="User" />
          </tabs>
          </telerik:RadTabStrip>
          <telerik:RadMultiPage runat="server" ID="rmpCalendars" SelectedIndex="0" Width="220px"
           CssClass="multiPage">
           <telerik:RadPageView runat="server" ID="rpvCoPCalendars">
            <telerik:RadPanelBar id="rpbCoPCalendars" runat="server" width="220px" ExpandMode="MultipleExpandedItems"
             PersistStateInCookie="true" CookieName="TriuneKNCoPCalendarPanelBarCookie" />
           </telerik:RadPageView>
           <telerik:RadPageView runat="server" ID="rpvMyCalendars">
            <telerik:RadPanelBar id="rpbMyCalendars" runat="server" width="220px" ExpandMode="MultipleExpandedItems"
             PersistStateInCookie="true" CookieName="TriuneKNMyCalendarPanelBarCookie" />
            <asp:Panel id="pnlNoAnonCalendars" runat="server" Visible="false" EnableViewState="false">
            Anonymous users are not permitted to have calendar subscriptions.
            </asp:Panel>
           </telerik:RadPageView>
          </telerik:RadMultiPage>
         </div>
        </div>
       </telerik:RadPane>
       <telerik:RadSplitBar runat="server" ID="RadSplitBar2" CollapseMode="Forward" />
       <telerik:RadPane runat="Server" ID="rightPane" Scrolling="None" Width="90%">
        <telerik:RadScheduler runat="server" ID="RadScheduler1" Height="425px" OverflowBehavior="Scroll" ShowFooter="false"
         TimeZoneOffset="00:00:00" DayStartTime="07:00:00" DayEndTime="18:00:00" FirstDayOfWeek="Sunday"
         LastDayOfWeek="Saturday" EnableDescriptionField="true" appointmentstylemode="Default"
         OnClientAppointmentMoving="OnClientAppointmentMovingHandler" OnClientAppointmentResizing="OnClientAppointmentResizingHandler"
         OnNavigationComplete="RadScheduler1_NavigationComplete" OnAppointmentCreated="RadScheduler1_AppointmentCreated"
         OnAppointmentDataBound="RadScheduler1_AppointmentDataBound" OnAppointmentDelete="RadScheduler1_AppointmentDelete"
         OnAppointmentUpdate="RadScheduler1_AppointmentUpdate" OnAppointmentInsert="RadScheduler1_AppointmentInsert"     
         OnClientRecurrenceActionDialogShowing="onRecurrenceActionDialogShowing" OnClientFormCreated="schedulerFormCreated"
         onformcreating="RadScheduler1_FormCreating"
         StartInsertingInAdvancedForm="true"
         CustomAttributeNames="CalendarID, CommunityID, Location, EventLink, CanEdit, Approved, POCName, POCEmail, POCPhone, POCOrganization, CreatedByID, DefUserName, DefUserPhone, DefUserEmail, DefUserOrg, IsRecurringEvent">
         <MonthView HeaderDateFormat="MMMM yyyy" />
         <advancedform modal="true" />
         <timelineview userselectable="false" />
         <appointmenttemplate>
          <div class="rsAptSubject">
           <%# Eval("Subject") %>
          </div>
         </appointmenttemplate>
         <timeslotcontextmenusettings enabledefault="true" EnableEmbeddedSkins="false" Skin="Custom"  />
         <appointmentcontextmenusettings enabledefault="true" EnableEmbeddedSkins="false" Skin="Custom" />
         <advancededittemplate>
          <scheduler:EventDetailForm runat="server" ID="AdvancedEditForm1" Mode="Edit" Width="570px"
           Subject='<%# Bind("Subject") %>'
           Start='<%# Bind("Start") %>'
           End='<%# Bind("End") %>'
           Description='<%# Bind("Description") %>'
           RecurrenceRuleText='<%# Bind("RecurrenceRule") %>'
           IsRecurringEvent='<%# Bind("IsRecurringEvent") %>'
           CalendarID='<%# Bind("CalendarID") %>'
           CommunityID='<%# Bind("CommunityID") %>'
           Location='<%# Bind("Location") %>'
           EventLink='<%# Bind("EventLink") %>'
           CanEdit='<%# Bind("CanEdit") %>'
           Approved='<%# Bind("Approved") %>'
           POCName='<%# Bind("POCName") %>'
           POCEmail='<%# Bind("POCEmail") %>'
           POCPhone='<%# Bind("POCPhone") %>'
           POCOrganization='<%# Bind("POCOrganization") %>'
           CreatedByID='<%# Bind("CreatedByID") %>'
           DefUserName='<%# Bind("DefUserName") %>'
           DefUserPhone='<%# Bind("DefUserPhone") %>'
           DefUserEmail='<%# Bind("DefUserEmail") %>'
           DefUserOrg='<%# Bind("DefUserOrg") %>'
          />
         </advancededittemplate>
         <advancedinserttemplate>
          <scheduler:EventDetailForm runat="server" ID="AdvancedInsertForm1" Mode="Insert" Width="570px"
           Subject='<%# Bind("Subject") %>'
           Start='<%# Bind("Start") %>'
           End='<%# Bind("End") %>'
           Description='<%# Bind("Description") %>'
           RecurrenceRuleText='<%# Bind("RecurrenceRule") %>'
           IsRecurringEvent='<%# Bind("IsRecurringEvent") %>'
           CalendarID='<%# Bind("CalendarID") %>'
           CommunityID='<%# Bind("CommunityID") %>'
           Location='<%# Bind("Location") %>'
           EventLink='<%# Bind("EventLink") %>'
           CanEdit='<%# Bind("CanEdit") %>'
           Approved='<%# Bind("Approved") %>'
           POCName='<%# Bind("POCName") %>'
           POCEmail='<%# Bind("POCEmail") %>'
           POCPhone='<%# Bind("POCPhone") %>'
           POCOrganization='<%# Bind("POCOrganization") %>'
           CreatedByID='<%# Bind("CreatedByID") %>'
           DefUserName='<%# Bind("DefUserName") %>'
           DefUserPhone='<%# Bind("DefUserPhone") %>'
           DefUserEmail='<%# Bind("DefUserEmail") %>'
           DefUserOrg='<%# Bind("DefUserOrg") %>'
          />
         </advancedinserttemplate>
        </telerik:RadScheduler>
       </telerik:RadPane>
      </telerik:RadSplitter>  
     </div>
     <telerik:RadToolTipManager Width="230px" RelativeTo="Element" ID="RadTTManager" runat="server"
      OffsetX="0" Position="MiddleRight" OnAjaxUpdate="RadToolTipManager_AjaxUpdate" OnClientResponseError="rttResponseError" Height="35px"
      Skin="Telerik" EnableShadow="true" AutoCloseDelay="0">
     </telerik:RadToolTipManager>

     <script type="text/javascript">
      //<![CDATA[
      function rttResponseError(sender, args) {
       args.set_cancelErrorAlert(true);
      }

     // Dictionary containing the advanced template client object
     // for a given RadScheduler instance (the control ID is used as key).
     var schedulerTemplates = {};

     function schedulerFormCreated(scheduler, eventArgs) {
      // Create a client-side object only for the advanced templates
      var mode = eventArgs.get_mode();
      if (mode == Telerik.Web.UI.SchedulerFormMode.AdvancedInsert ||
          mode == Telerik.Web.UI.SchedulerFormMode.AdvancedEdit) {
       // Initialize the client-side object for the advanced form
       var formElement = eventArgs.get_formElement();
       var templateKey = scheduler.get_id() + "_" + mode;
       var advancedTemplate = schedulerTemplates[templateKey];
       if (!advancedTemplate) {
        // Initialize the template for this RadScheduler instance
        // and cache it in the schedulerTemplates dictionary
        var schedulerElement = scheduler.get_element();
        var isModal = scheduler.get_advancedFormSettings().modal;
        advancedTemplate = new window.SchedulerAdvancedTemplate(schedulerElement, formElement, isModal);
        advancedTemplate.initialize();

        schedulerTemplates[templateKey] = advancedTemplate;

        // Remove the template object from the dictionary on dispose.
        scheduler.add_disposing(function() {
         schedulerTemplates[templateKey] = null;
        });
       }

       // Are we using Web Service data binding?
       if (!scheduler.get_webServiceSettings().get_isEmpty()) {
        // Populate the form with the appointment data
        var apt = eventArgs.get_appointment();
        var isInsert = mode == Telerik.Web.UI.SchedulerFormMode.AdvancedInsert;
        advancedTemplate.populate(apt, isInsert);
       }
      }
     }

     //]]>
     </script>

     <script type="text/javascript">
      $(document).ready(function() {
       $("div[class^=RadPanelBar]").css("width", "220px");
       var dummyPane = $telerik.$("#<%= dummyPane.ClientID %>");
       dummyPane.css({ borderWidth: 0, position: "relative", zIndex: 1000 });
       var dummyChild = dummyPane.children().first();
       dummyChild.css({ overflow: "visible", height: 0, position: "relative", zIndex: 1000 });
      });

      function showColorPicker(sender, args) {
       var dummyPane = $get("<%= dummyPane.ClientID %>").firstChild;
       var pickerWindow = sender.getPaletteContainer();
       pickerWindow.style.posTop = $("#" + sender.get_id()).position().top - 30;
       if (pickerWindow.style.posTop < 0)
        pickerWindow.style.posTop = 0;
       $(".rcpPalette").css("position", "fixed");
       dummyPane.appendChild(pickerWindow);
      }
      
      /* Firefox resize scrollable content */
      function hideScrollableArea(sender, eventArgs) {
       if ($telerik.isFirefox)
        $telerik.$('.rsContentScrollArea').css('overflow', 'hidden');
      }
      function showScrollableArea(sender, eventArgs) {
       if ($telerik.isFirefox)
        $telerik.$('.rsContentScrollArea').css('overflow', 'auto');
      }
      
      // Set splitter and scheduler size based on screen resolution
      function SizeSplitter(splitter, arg) {
       if(splitter == null){
        splitter = $find("<%= RadSplitter1.ClientID %>");    
       }
       
       var h, w;
       if (document.innerHeight) {
        h = document.innerHeight;
        w = document.innerWidth;
       } else if (document.documentElement.clientHeight) {
        h = document.documentElement.clientHeight;
        w = document.documentElement.clientWidth;
       } else if (document.body) {
        h = document.body.clientHeight;
        w = document.body.clientWidth;
       }
       splitter.set_width(w - 30);
       var pane = splitter.getPaneById('<%= rightPane.ClientID %>');
       splitter.set_height(h - 180);
       var scheduler = $find("<%=RadScheduler1.ClientID%>");
       scheduler.set_height(splitter.get_height());
       pane.set_height(h - 180);
       pane = splitter.getPaneById('<%= leftPane.ClientID %>');
       pane.set_height(h - 180);
       $("#divCalendarLoading")[0].style.visibility = "hidden";
      }

      function OnResponseEnd(sender, args) {
       SizeSplitter(null, null);
      }

      function OnClientAppointmentMovingHandler(sender, eventArgs) {
       if (eventArgs.get_appointment().get_attributes().getAttribute("CanEdit").toLowerCase() == "false")
        eventArgs.set_cancel(true);
      }
      
      function OnClientAppointmentResizingHandler(sender, eventArgs) {
       if (eventArgs.get_appointment().get_attributes().getAttribute("CanEdit").toLowerCase() == "false")
        eventArgs.set_cancel(true);
      }

      function onRecurrenceActionDialogShowing(sender, eventArgs) {
       if (eventArgs.get_appointment().get_attributes().getAttribute("CanEdit").toLowerCase() == "false") {
        var isException = eventArgs.get_appointment().get_recurrenceState() == 3;
        eventArgs.set_cancel(true);
        eventArgs.set_editSeries(isException == false);
       }
      }
     </script>
    </asp:Content>



    Code Behind:

    using System;
    using System.Collections.Generic;
    using System.Drawing;
    using System.Web.UI.WebControls;
    using KN.Core.Calendar.DTO;
    using KN.Web.Calendar.Classes.Base;
    using KN.Web.Calendar.Presenters;
    using KN.Web.Calendar.Views;
    using KN.Web.Classes.Services;
    using KN.Web.Classes.Services.IServices;
    using Telerik.Web.UI;
    using Telerik.Web.UI.Calendar;
    using KN.Web.Calendar.Classes;

    namespace KN.Web.Calendar
    {
     public partial class Calendar : CalendarPage, ICalendarView
     {
      private readonly CalendarPresenter mCalendarPresenter;
      private readonly ICalendarManagerService mCalendarService = new CalendarManagerService();

      public Calendar()
      {
       mCalendarPresenter = new CalendarPresenter(this, mCalendarService, CommunityManager, ModuleManager, UserManager);
      }

      public new bool IsPostBack { get { return base.IsPostBack;} }

      public string QueryValue(string QueryKey) { return Request.QueryString[QueryKey]; }

      public DateTime CurrentDate { get { return RadScheduler1.SelectedDate; } set { RadScheduler1.SelectedDate = value; } }

      public string SchedularView
      {
       get
       {
        if (RadScheduler1.SelectedView == SchedulerViewType.DayView)
         return "D";
        if (RadScheduler1.SelectedView == SchedulerViewType.WeekView)
         return "W";
        return "M";
       }
      }

      public void SchedulerData(List<EventDetail> data, bool rebind)
      {
       RadScheduler1.DataSource = data;
       if (rebind)
        RadScheduler1.Rebind();
      }

      public string CalendarViewMode
      {
       get
       {
        return rtsCalendars.SelectedIndex == 0 ? "cop" : "user";
       }
       set
       {
        switch (value.ToLower())
        {
         case "cop":
          {
           if(mCalendarPresenter.UserCanAccessCopCalendar())
           {
            rtsCalendars.Tabs[0].Enabled = true;
            rtsCalendars.SelectedIndex = 0;
            rmpCalendars.SelectedIndex = 0;
           }
           else
           {
            rtsCalendars.Tabs[0].Enabled = false;
            rtsCalendars.SelectedIndex = 1;
            rmpCalendars.SelectedIndex = 1;
           }
          }
          break;
         case "user":
          {
           rtsCalendars.SelectedIndex = 1;
           rmpCalendars.SelectedIndex = 1;
          }
          break;
        }
       }
      }
      public void ShowNoAnonymousCalendarsMessage(bool isShowing)
      {
       pnlNoAnonCalendars.Visible = isShowing;
      }

      public void MyCalendarViewData(List<Core.Calendar.DTO.Calendar> Calendars)
      {
       if (Calendars.Count == 0)
       {
        rpbMyCalendars.Items.Clear();
        return;
       }

       var rpiCoP = new RadPanelItem("<div class='NoWrap'>" + Calendars[0].CommunityName + "</div>") { ToolTip = Calendars[0].CommunityName };
       rpbMyCalendars.Items.Add(rpiCoP);
       foreach (var calendar in Calendars)
       {
        var rpiCalendar = new RadPanelItem("") {CssClass = "MyCalendarPanelItem"};
        rpiCoP.Items.Add(rpiCalendar);

        var cb = new CheckBox
        {
         Text = "",
         ID = "cb_" + calendar.CalendarID,
         ToolTip = "Check to include this calendar's events in your calendar view.",
         CssClass = "MyCalendarCheckBox",
         AutoPostBack = true,
         Checked = calendar.IsViewed
        };
        cb.CheckedChanged += CoPCalendarViewingChanged;
        rpiCalendar.Controls.Add(cb);

        var literal = new Literal
        {
         Text = "<div class='MyCalendarTitle' title='" + calendar.CalendarName + "'>" + calendar.CalendarName + "</div>",
         ID = "tx_" + calendar.CalendarID,
        };

        var panel = new Panel();
        panel.Controls.Add(literal);

        rpiCalendar.Controls.Add(panel);

        var cp = new RadColorPicker
        {
         ID = "cp_" + calendar.CalendarID,
         ToolTip = "Change color to show how this calendar's events appear in your calendar view.",
         CssClass = "MyCalendarColorPicker",
         ShowIcon = true,
         SelectedColor = Color.FromArgb(Convert.ToInt32(calendar.Color, 16)),
         PaletteModes = PaletteModes.HSB,
         AutoPostBack = true,
         ShowEmptyColor = false,
         OnClientPopUpShow = "showColorPicker"
        };
        cp.ColorChanged += cpMyCalendar_OnColorChanged;

        RadTTManager.TargetControls.Add(panel.ClientID, calendar.CalendarID.ToString(), true);

        rpiCalendar.Controls.Add(cp);

        literal = new Literal
        {
         Text = "<div class='ClearBoth'></div>",
        };
        rpiCalendar.Controls.Add(literal);
       }
      }

      public void CoPCalendarViewData(List<CalendarItem> Calendars, string CoPName)
      {
       rpbCoPCalendars.Items.Clear();

       var rpiCoP = new RadPanelItem("<div class='NoWrap'>" + CoPName + "</div>") {ToolTip = CoPName};
       rpbCoPCalendars.Items.Add(rpiCoP);

       var subscribeItems = new RadPanelItem("");
       var subscribeCalendar = LoadControl("~/Controls/Calendar/SubscribeCalendar.ascx");
       var alertPopUp = LoadControl("~/Controls/Calendar/AlertSubscriptionPopUp.ascx");
       var ltDiv = new Literal {ID = "ltDiv", Text = "<div style=\"clear:both;\"></div>"};

       subscribeItems.Controls.Add(subscribeCalendar);
       subscribeItems.Controls.Add(alertPopUp);
       subscribeItems.Controls.Add(ltDiv);

       rpiCoP.Items.Add(subscribeItems);
       
       foreach (var calendar in Calendars)
       {
        var rpiCalendar = new RadPanelItem("");
        rpiCoP.Items.Add(rpiCalendar);

        var literal = new Literal
        {
         Text = "<div class='CoPCalendarNoWrap' title='" + calendar.Name + "'>" + calendar.Name + "</div>",
         ID = "tx_" + calendar.CalendarID
        };

        var panel = new Panel();
        panel.Controls.Add(literal);

        rpiCalendar.Controls.Add(panel);

        RadTTManager.TargetControls.Add(panel.ClientID, calendar.CalendarID.ToString(), true);
       }

       rpiCoP.Expanded = true;
       rpiCoP.ExpandParentItems();
      }

      protected void Page_Init(object sender, EventArgs e)
      {
       mCalendarPresenter.Page_Init();

       RadScheduler1.DataKeyField = "ID";
       RadScheduler1.DataSubjectField = "Subject";
       RadScheduler1.DataDescriptionField = "Description";
       RadScheduler1.DataStartField = "StartTime";
       RadScheduler1.DataEndField = "EndTime";
       RadScheduler1.DataRecurrenceField = "RecurrenceRule";
       RadScheduler1.DataRecurrenceParentKeyField = "RecurrenceParentID";
       RadScheduler1.TimeZoneOffset = new TimeSpan(TimezoneOffset,0,0);
      }

      protected void Page_Load(object sender, EventArgs e)
      {
       mCalendarPresenter.Page_Load();
       rtCoPCalendars.Text = "This " + Global.AppConfigSettings.CommAcronym;

       if (!IsPostBack)
       {
        RadCalendar1.SelectedDate = RadScheduler1.SelectedDate;
        SyncCalendars();
       }

       if (mCalendarPresenter.IsUserNonMember)
        RadScheduler1.AllowInsert = false;
      }

      protected void Page_PreRender(object sender, EventArgs e)
      {
       leftPane.Style.Add("position","relative");
      }

      protected void RadScheduler1_NavigationComplete(object sender, SchedulerNavigationCompleteEventArgs e)
      {
       RadCalendar1.FocusedDate = RadScheduler1.SelectedDate;
       SyncCalendars();
       mCalendarPresenter.ScheduleViewChanged();
      }

      protected void RadCalendar1_DefaultViewChanged(object sender, DefaultViewChangedEventArgs e)
      {
       SyncCalendars();
      }

      private void SyncCalendars()
      {
       RadCalendar2.FocusedDate = RadCalendar1.FocusedDate.AddMonths(1);
      }

      protected void RadCalendar1_SelectionChanged(object sender, SelectedDatesEventArgs e)
      {
       if (RadCalendar1.SelectedDates.Count > 0)
       {
        RadScheduler1.SelectedDate = RadCalendar1.SelectedDate;
        RadCalendar2.SelectedDate = RadCalendar1.SelectedDate;
        mCalendarPresenter.ScheduleViewChanged();
       }
      }

      protected void RadCalendar2_SelectionChanged(object sender, SelectedDatesEventArgs e)
      {
       if (RadCalendar2.SelectedDates.Count > 0)
       {
        RadScheduler1.SelectedDate = RadCalendar2.SelectedDate;
        RadCalendar1.SelectedDate = RadCalendar2.SelectedDate;
        mCalendarPresenter.ScheduleViewChanged();
       }
      }

      protected void RadScheduler1_FormCreating(object sender, SchedulerFormCreatingEventArgs e)
      {
       if (string.IsNullOrEmpty(e.Appointment.Attributes["CanEdit"])) // if inserting then need to set rights, already set for updating
        e.Appointment.Attributes.Add("CanEdit", (!mCalendarPresenter.IsUserNonMember).ToString());
       
       string userName, userPhone, userEmail, userOrg;
       mCalendarPresenter.GetUserInformation(UserID, out userName, out userPhone, out userEmail, out userOrg);
       e.Appointment.Attributes.Add("DefUserName", userName);
       e.Appointment.Attributes.Add("DefUserPhone", userPhone);
       e.Appointment.Attributes.Add("DefUserEmail", userEmail);
       e.Appointment.Attributes.Add("DefUserOrg", userOrg);
       e.Appointment.Attributes.Add("IsRecurringEvent", (e.Appointment.RecurrenceParentID == null || (int)(e.Appointment.RecurrenceParentID) == 0) ? "false" : "true");
      }

      protected void RadScheduler1_AppointmentDataBound(object sender, SchedulerEventArgs e)
      {
       var calendarID = Convert.ToInt32(e.Appointment.Attributes["CalendarID"]);
       var apptIDPieces = e.Appointment.ID.ToString().Split('_');
       var apptID = Convert.ToInt32(apptIDPieces[0]);
       e.Appointment.Attributes.Add("CommunityID", mCalendarPresenter.GetCommunityIDForCalendar(calendarID).ToString());
       var hasEditRights = mCalendarPresenter.HasEditRights(calendarID);
       if (!hasEditRights)
        hasEditRights = Convert.ToInt32(e.Appointment.Attributes["CreatedByID"]) == UserID;
       e.Appointment.Attributes.Add("CanEdit", hasEditRights.ToString());
       e.Appointment.AllowDelete = hasEditRights;
       e.Appointment.Visible = true;
       var color = mCalendarPresenter.GetCalendarColor(apptID);
       e.Appointment.BackColor = Color.FromArgb(Convert.ToInt32(color, 16));
       e.Appointment.BorderColor = Color.FromArgb(Convert.ToInt32(color, 16));
      }

      protected void RadScheduler1_AppointmentCreated(object sender, AppointmentCreatedEventArgs e)
      {
       Panel recurrenceStateDiv;
       switch (e.Appointment.RecurrenceState)
       {
        case RecurrenceState.Occurrence:
        case RecurrenceState.Master:
         recurrenceStateDiv = new Panel {CssClass = "rsAptRecurrence"};
         e.Container.Controls.AddAt(0, recurrenceStateDiv);
         break;
        case RecurrenceState.Exception:
         recurrenceStateDiv = new Panel {CssClass = "rsAptRecurrenceException"};
         e.Container.Controls.AddAt(0, recurrenceStateDiv);
         break;
       }
      }

      protected void RadScheduler1_AppointmentInsert(object sender, SchedulerCancelEventArgs e)
      {
       var eventID = mCalendarPresenter.NewEvent(Convert.ToInt32(e.Appointment.Attributes["CommunityID"]),
        e.Appointment.GetEventDetail());
       e.Appointment.ID = eventID;
       e.Appointment.Attributes.Add("CreatedByID", UserID.ToString());
      }

      protected void RadScheduler1_AppointmentUpdate(object sender, AppointmentUpdateEventArgs e)
      {
       mCalendarPresenter.UpdateEvent(Convert.ToInt32(e.ModifiedAppointment.Attributes["CommunityID"]),
        e.ModifiedAppointment.GetEventDetail());
      }

      protected void RadScheduler1_AppointmentDelete(object sender, SchedulerCancelEventArgs e)
      {
       mCalendarPresenter.RemoveEvent(e.Appointment.GetEventDetail());
      }

      protected void CoPCalendarViewingChanged(object sender, EventArgs e)
      {
       var CalendarID = Convert.ToInt32(((CheckBox)sender).ID.Substring(3));
       mCalendarPresenter.CalendarViewingChanged(CalendarID, ((CheckBox) sender).Checked);
      }

      protected void rtsCalendars_OnTabClick(object sender, RadTabStripEventArgs e)
      {
       mCalendarPresenter.CalendarViewChanged(e.Tab.Value);
      }

      protected void cpMyCalendar_OnColorChanged(object sender, EventArgs e)
      {
       var parts = ((RadColorPicker) sender).ID.Split('_');
       if (parts.Length != 2)
        return;
       var calendarID = Convert.ToInt32(parts[1]);
       var calendarColor = ColorTranslator.ToHtml(((RadColorPicker) sender).SelectedColor).Substring(1);
       mCalendarPresenter.CalendarColorChanged(calendarID, calendarColor);
      }

      protected void RadToolTipManager_AjaxUpdate(object sender, ToolTipUpdateEventArgs e)
      {
       var calendar = mCalendarPresenter.GetCalendarDescription(Convert.ToInt32(e.Value));

       var description = new Label {Text = calendar.Description};

       if (String.IsNullOrEmpty(description.Text))
       {
        description.CssClass += " NoDesciption";
        description.Text = "No Description Available";
       }

       var panel = new Panel();
       panel.CssClass = "DescriptionToolTip";
       panel.Controls.Add(description);

       e.UpdatePanel.ContentTemplateContainer.Controls.Add(panel);
      }
     }
    }



  8. Nikolay Tsenkov
    Admin
    Nikolay Tsenkov avatar
    734 posts

    Posted 07 Mar 2011 Link to this post

    Hi Keith,

    Please, post a simpler example (or at least without external dependencies), which I can run and debug.
    I would really like to help you, but without something I can use to reproduce the behavior you describe I am not able to proceed.


    Kind Regards,
    Nikolay Tsenkov
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  9. Keith
    Keith avatar
    61 posts
    Member since:
    May 2008

    Posted 18 Mar 2011 Link to this post

    We figured it out.

    Apparently, the syntax is different for the splitter set hight and the scheduler set height

    var pane = splitter.getPaneById('<%= rightPane.ClientID %>');
    pane.set_height(h - 180); 

    The set_height for the pane took an integer value, while the scheduler need a string with "px" in it

    var scheduler = $find("<%=RadScheduler1.ClientID%>");
    scheduler.set_height("" + splitter.get_height() + "px");

    We were trying  scheduler.set_height(splitter.get_height());
    rather than
    scheduler.set_height("" + splitter.get_height() + "px");

    So much for consistency from Telerik

    Also, there is a set_height method for the scheduler, however, where is the set_width ????

    Food for thought!

    Keith E.
     
  10. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 19 Mar 2011 Link to this post

    Hi Keith,

    Thank you for your feedback. We will review the case in detail and do changes if necessary to achieve consistency.

    Your Telerik points have been updated.

    All the best,
    Peter
    the Telerik team
Back to Top