Using get_contentFrame to alter DOM (AKA Working Appointment OnClick View details with RadDock)

[Jim]

Hello,

After much expermentation and searching through the forums,  I have figured out how to show a RadScheduler appointment with a RadDock.  This is triggered by the OnClientAppointmentClick.  I opted to use the clientside because the server side requires the Scheduler to be editable.  I only want folks in certain roles to have this ability.  The final goal is that when the general public clicks on an appointment, the details are loaded.  I prefer this over the common use of ToolTip.  I suppose I could have created two templates, one for viewing and one for editing, loading the appropriate one depending on the the user role.  I will probably use that, but is not the initial avenue I took.  I went down the path of client side and have succesfully implemented this using RadDock.   The one thing I did not like was that RadDock can not be modal without much tweaking.   Looking at what was involved to add this behaviour, I decided to use the RadWindow.  This decession has lead me here, as I have reached a stumbling block.   I am currently attempting to use the RadWindow as I did the RadDock by loading content dynamically by changing the DOM using innerHTML.   This was easy with RadDock, but not so with RadWindow.   I have played with multiple variations and have at least prevented the nasty object is null by first showing the window and then accessing the DOM.  That actually makes sense for first time load.  So now my script does not cause errors, but the content does not display?  I have attatched all the code so that people can see a working example of how to do this with RadDock.  I have only ommitted the SQLDataSource.   Please take a look at onAppointmentClick javascript function.  No errors but content is not loaded.   Perhaps this approach is not possible.   I know that it can easily be overcome by loading a seperate control in the window.  Overall that may be better, but I still want to see this work.  (PS.   The OnAppointmentClickDock function works.  For those who want to play simply change the event in the scheduler).

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="zzz.ascx.cs" Inherits="xxx.Modules.yyy.zzz" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
        <telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">

           <script type="text/javascript">
           //<![CDATA[

                function formatWeekName(rawDate)
                {
                   var dayofWeek = '';
                   switch (rawDate.getDay()) {
                      case 0:
                         dayofWeek = 'Sunday';
                         break;
                      case 1:
                         dayofWeek = 'Monday';
                         break;
                      case 2:
                         dayofWeek = 'Tuesday';
                         break;
                      case 3:
                         dayofWeek = 'Wednesday';
                         break;
                      case 4:
                         dayofWeek = 'Thursday';
                         break;
                      case 5:
                         dayofWeek = 'Friday';
                         break;
                      case 6:
                         dayofWeek = 'Saturday';
                         break;
                      default:
                         dayofWeek = '';
                   }
                   return dayofWeek;
                }

                function formatMonthName(rawDate)
                {
                   var monthName = '';
                   switch (rawDate.getMonth()) {
                      case 0:
                         monthName = 'January';
                         break;
                      case 1:
                         monthName = 'February';
                         break;
                      case 2:
                         monthName = 'March';
                         break;
                      case 3:
                         monthName = 'April';
                         break;
                      case 4:
                         monthName = 'May';
                         break;
                      case 5:
                         monthName = 'June';
                         break;
                      case 6:
                         monthName = 'July';
                         break;
                      case 7:
                         monthName = 'August';
                         break;
                      case 8:
                         monthName = 'September';
                         break;
                      case 9:
                         monthName = 'October';
                         break;
                      case 10:
                         monthName = 'November';
                         break;
                      case 11:
                         monthName = 'December';
                         break;
                      default:
                         monthName = '';
                   }

                   monthName = monthName + ' ' + rawDate.getDate();
                   return monthName;

                }
                function formatTime(rawDate)
                {
                   var hours = rawDate.getHours();
                   var minutes = rawDate.getMinutes();
                   var ampm;

                   if (hours >= 12) {
                      hours -= 10;
                      ampm = " PM";
                   }
                   else {
                      ampm = " AM";
                   }

                   if (minutes < 10) {
                      minutes = "0" +  minutes;
                   }

                   return hours + ":" + minutes + ampm;
                }

                function onAppointmentClick(sender,eventArgs)
                {
                   var appointment = eventArgs.get_appointment()
                   var subject = appointment.get_subject();
                   var rawEndDate = appointment.get_end();
                   var rawStartDate = appointment.get_start();

                   var endDateTime = formatWeekName(rawEndDate) + ", " + formatMonthName(rawEndDate) + " at " + formatTime(rawEndDate);
                   var startDateTime = formatWeekName(rawStartDate) + ", " + formatMonthName(rawStartDate)  + " at " + formatTime(rawStartDate);

                   var fbtWin = $find("<%= RadWindow1.ClientID %>");

                   fbtWin.show();
                   fbtWin.get_contentFrame().contentWindow.innerHTML = "HELLO WORLD";
                   fbtWin.hide();
                   fbtWin.show();

                }
                function onAppointmentClickDock(sender,eventArgs)
                {
                   var appointment = eventArgs.get_appointment()
                   var subject = appointment.get_subject();
                   var rawEndDate = appointment.get_end();
                   var rawStartDate = appointment.get_start();

                   var endDateTime = formatWeekName(rawEndDate) + ", " + formatMonthName(rawEndDate) + " at " + formatTime(rawEndDate);
                   var startDateTime = formatWeekName(rawStartDate) + ", " + formatMonthName(rawStartDate)  + " at " + formatTime(rawStartDate);

                   var dock = $find("<%= RadDock1.ClientID %>");
                   var viewPort = $telerik.getViewPortSize();
                   var xPos = Math.round((viewPort.width - parseInt(dock.get_width())) / 2);
                   var yPos = Math.round((viewPort.height - parseInt(dock.get_height())) / 2);
                   $telerik.setLocation(dock.get_element(), { x: xPos, y: yPos });

                   var content = dock.get_contentContainer();
                   content.innerHTML = "<table width='100%' border='0'><tr><td style=' font-weight:bolder'>Start:</td><td>" + startDateTime + "</td></tr><tr><td style=' font-weight:bolder'>End:</td><td>" + endDateTime + "</td></tr><tr><td style=' font-weight:bolder'>Description:</td><td>" + subject + "</td></tr></table>";
                   dock.set_closed(false);
                }



            //]]>
            </script>
      </telerik:RadScriptBlock>

<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadScheduler1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadScheduler1" />
                <telerik:AjaxUpdatedControl ControlID="RadDock1" LoadingPanelID="RadAjaxLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>


</telerik:RadAjaxManagerProxy>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px"
    Width="75px" Skin="WebBlue" Transparency="20">
    <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'
        style="border: 0px;" />
</telerik:RadAjaxLoadingPanel>

<telerik:RadScheduler ID="RadScheduler1" runat="server" Height="460px"  OnClientAppointmentClick="onAppointmentClick" EnableEmbeddedScripts="True"
    HoursPanelTimeFormat="htt" Skin="Outlook" ValidationGroup="ctl00_RadScheduler1"
    DataSourceID="SqlDataSource1"
    DataEndField="End"
    DataKeyField="ID"
    DataRecurrenceField="RecurrenceRule"
    DataRecurrenceParentKeyField="RecurrenceParentID"
    DataStartField="Start"
    DataSubjectField="Subject" OnAppointmentDataBound="RadScheduler1_AppointmentDataBound">
</telerik:RadScheduler>

<telerik:RadDock ID="RadDock1" runat="server" DockMode="Floating" Closed="true" Skin="Outlook"  Width="500px" Height="300px">
<ContentTemplate>

</ContentTemplate>
</telerik:RadDock>
<telerik:RadWindow ID="RadWindow1" runat="server" AutoSize="True" Modal="True" Skin="Vista" >
</telerik:RadWindow>

[Georgi Tunev]

Hello Jim,

For this purpose you could use the set_contentElement() method as shown below. Note that you could only insert standard HTML with this approach - you cannot add controls and interact with them.

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

<script type="text/javascript">
    function openandset()
    {
        var fbtWin = $find("<%= RadWindow1.ClientID %>");
        var hiddenDiv = document.getElementById("hiddenDiv");
        fbtWin.show();
        fbtWin.set_contentElement(hiddenDiv);
        fbtWin.hide();
        fbtWin.show();

    }
</script>

<div style="display: none">
    <div id="hiddenDiv" style="font: Arial; font-size: large; width: 100; height: 100;
        border: 1px solid red">
        some content<br />
        some more</div>
</div>
<telerik:RadWindow ID="RadWindow1" runat="server" AutoSize="True" Modal="True" Skin="Vista">
</telerik:RadWindow>
<button onclick="openandset(); return false;">
    open and set</button>
</form>

Best wishes,
Georgi Tunev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Jim]

Perfect... thankyou.  

[Georgi Tunev]

Hi Jim,

I am glad I was able to help. I just want to add something because I see I missed that info in my previous reply. We are planning to add such functionality (having the controls on the same page, not in an IFRAME) to the RadWindow control and this should happen later this year.


Sincerely yours,
Georgi Tunev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Jim]

This is great news!!!  Thanks again

[Adriano]

Hi!

I´m using the set_contentElement method of the radWindow object but it´s now creating an empty div above my content.
I´m using the lastest components Q3 2009 (11/04/2009)

ASPX:
    <telerik:RadWindowManager ID="radWindowManagerDefault" runat="server">
        <Windows>           
            <telerik:RadWindow ID="AlertWindow" Behaviors="None" Modal="true" VisibleStatusbar="false" runat="server">
            </telerik:RadWindow>
        </Windows>
    </telerik:RadWindowManager>

Javascript:
function CustomAlert(alertWindowID)
{
    var alertWindow = $find(alertWindowID);

    var alertContentDIV = (alertWindow.get_contentElement() == null) ? document.createElement("DIV") : alertWindow.get_contentElement();

    alertContentDIV.innerHTML = "<div class="MyClass">My content here</div>";

    alertWindow.set_contentElement(alertContentDIV);

    alertWindow.Show();
}


Result:

Inspecting with the Firebug, the resulting window gives me the following undesired highlighted div :

<div id="window_AlertWindow_C"
style="border: 0px none ; overflow: auto; width: 284px; height: 261px;">
</div>
<div style="width: 254px; height: 61px;">
  <div class="MyClass">
    My content here
  </div>
</div>

In the previous versions it´s not ocurring.

Kind regards,

Adrian

[Svetlina Anati]

Hello Adriano,

Indeed, you are correct that this has changed since the controls container node of RadWindow was introduced. However, we strongly recommended not to use the set_contentElement in previous versions of RadWindow because this client method was not supposed to be used since teh RadWindow could only host an external page and we have informed that using this could lead to problems in future versions because the behavior could change.

As to the DIV element you are talking about, this is DIV which should hold teh content but since this functionlity is pretty new, we still find and fix problems in it and this is scenario is one of the problematic ones which came out recently and we are still working on. This being said, what I recommend to do is to put the content directly in the RadWindow as shown in the demo below:

http://demos.telerik.com/aspnet-ajax/window/examples/internalcontent/defaultcs.aspx


instead of using set_contentElement. On a side note, we will do our best to fix the problem as soon as possible but there are many scenarios, e.g when a url has already been set and the set_contentElement method is used, etc and this is not that easy task. However, the problem is in our TODO list and will be fixed.

All the best,
Svetlina
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.