Show client side popup window

[Simon]

I'm trying to show a custom window when the user single-clicks an appointment. I put an AdvancedEditTemplate in but it appears below my scheduler (with advancedform-modal set to true) and I would like it to appear in the center of the scheduler. Is this possible? Also how can I show it on single-click rather than double?

[Veronica]

Hi Simon,

Please take a look at this help topic about "Edit and insert an appointment with single click".

I am surprised that the modal Advanced Form appears below the Scheduler and not in the center. Could you please send me your code so I can inspect it and help you?

Thank you!

Best wishes,
Veronica Milcheva
the Telerik team

[Simon]

Thanks for the link, here's the markup:

<div class="largeCalendar">

          <telerik:RadScheduler ID="radScheduler" runat="server" Height=""
           HoursPanelTimeFormat="htt" ValidationGroup="RadScheduler1"
           onresourcespopulating="radScheduler_ResourcesPopulating"
           AppointmentStyleMode="Default" EnableDescriptionField="true"
           OnClientAppointmentCreated="clientAppointmentCreated"
           SelectedView="MonthView" ShowFooter="false" ShowAllDayRow="false"
           ShowFullTime="true" OnClientAppointmentClick="appointmentClick"
           AdvancedForm-Modal="true" Skin="Office2007" TimelineView-UserSelectable="false"
           >

           <AppointmentTemplate>

                           <div class="rsAptSubject">
                              <%# Eval("Subject") %>
                           </div>
                           <%# Eval("Description") %>
           </AppointmentTemplate>

           <WebServiceSettings Path="../WebServices/MyService.asmx" ResourcePopulationMode="ServerSide" />

           <AdvancedEditTemplate>
           <div>
           <input type="button" value="click me" />
           </div>
           </AdvancedEditTemplate>

           <ResourceStyles>
               <telerik:ResourceStyleMapping Key="1" ApplyCssClass="rsCategoryGreen"/>
               <telerik:ResourceStyleMapping Key="2" ApplyCssClass="rsCategoryRed" />
           </ResourceStyles>

          </telerik:RadScheduler>


              <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
           <AjaxSettings>
               <telerik:AjaxSetting AjaxControlID="radScheduler">
                   <UpdatedControls>
                       <telerik:AjaxUpdatedControl ControlID="radScheduler" LoadingPanelID="RadAjaxLoadingPanel1" />
                   </UpdatedControls>
               </telerik:AjaxSetting>
           </AjaxSettings>
       </telerik:RadAjaxManager>

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

       <div class="clearboth"></div>

   </div>

Incidentally, the loading thing doesn't work, nor does the appointment template, but I think I made forum posts about those elsewhere. There is a scriptmanager on the page in the masterpage. Thanks.

[Veronica]

Hi Simon,

When RadScheduler is bound to a Web Service you can not use RadAjaxLoadingPanel to display a loading image. As an alternative you can show and hide the loading panel explicitly as described in this help topic. You can use OnClientAppointmentsPopulating to show the loading panel and OnClientRequestSuccess to hide it.

To display custom window when the user single-clicks an appointment - you can subscribe to OnClientAppointmentClick client-side event and use the window.open() method and set AllowEdit property of the RadScheduler to "false" so that Advanced Form will not be opened when double-clicking the appointment.

Kind regards,
Veronica Milcheva
the Telerik team

[Simon]

Hi, thanks for your reply.

I've tried the code in the example, but the following line returns null:

var currentLoadingPanel = $find("<%= RadAjaxLoadingPanel1.ClientID %>");

The control is on my page. I tried this:

var currentLoadingPanel = $find("ctl00_ctl00_main_phPageContent_RadAjaxLoadingPanel1");

it also returns null (I checked the source code, and the control is definitely there)

Finally, I tried JQuery:

$('#ctl00_ctl00_main_phPageContent_RadAjaxLoadingPanel1').show();

This JQuery worked, and my loading panel appeared. However I want it to appear over the control, so I have to use $find I think. Do you have any ideas why it didn't work?

[Veronica]

Hello Simon,

Please accept my apologies for the late reply.

It is strange that the code which uses $find returns null. Could you please send me the full code so I can inspect it and help you?

Regards,
Veronica Milcheva
the Telerik team