[Solved] Custom Templates / AJAX & Customizing the prompt to delete an appointment

[James Legan]

I am using both a custom inline insert and custom advanced edit template on my scheduler. I am making some webservice calls (custom code) in my handlers for the insert/update buttons:

protected

 

void rsScheduler_AppointmentUpdate(object sender, Telerik.Web.UI.AppointmentUpdateEventArgs e)

 

protected

 

void rsScheduler_AppointmentInsert(object sender, Telerik.Web.UI.SchedulerCancelEventArgs e)

 

All of the code works great, the scheduler is a great control and now that I am down to the polishing, I have run into two issues:

1) I cannot for the life of me get the RadLoadingPanel to fire when clicking on my Insert / Update buttons in my advanced templates. Although the code works, it leaves the user wondering what is happening as the code behind processes. When I try to add the buttons to my AjaxManager, it breaks their interaction with the scheduler so I am wondering if anyone has gotten this to work.

2) When one of my users tries to delete an appointment, the modal popup that the control throws is nice, but not applicable to my app (it is a leasing tool, not an appointment scheduler). I need to be able to modify at least the text, if not replace it entirely. Anyone know how?

Thanks,

Jim

[James Legan]

Anyone? Specifically regarding the modal "delete appointment" popup.

[Peter]

Hello James,

1. Since there are not postbacks in Web Services binding mode, you cannot use RadAjaxManager and RadAjaxLoadingPanel as usual. However,  you should be able to still achieve your goal using this help topic: http://www.telerik.com/help/aspnet-ajax/ajxshowhideloadingpanel.html

I will follow up tomorrow with sample code of the above approach.

2. Please, try setting the following properties for RadScheduler:

<telerik:RadScheduler ...
Localization-ConfirmDeleteText="custom delete confirm text here..."
            Localization-ConfirmDeleteTitle="custom delete title here..."
            Localization-ConfirmRecurrenceDeleteOccurrence="custom..."
            Localization-ConfirmRecurrenceDeleteSeries="custom..."
            Localization-ConfirmRecurrenceDeleteTitle="custom"
/>

Greetings,
Peter
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.

[Peter]

Hello again James,

Here is the code sample I promised for the first question.

Add a RadAjaxLoadingPanel to your page and attach to the OnClientRequestSuccess and OnClientFormCreated events of RadScheduler:

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadScheduler runat="server"
        ID="RadScheduler1"
        OnClientRequestSuccess="OnClientRequestSuccess"
        OnClientFormCreated="OnClientFormCreated" />

Then add the following javascript code:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">

            var currentLoadingPanel = null;
            var currentUpdatedControl = null;
            var clickedFlag = false;

            function OnClientFormCreated(scheduler, eventArgs) {

                currentLoadingPanel = $find('<%=RadAjaxLoadingPanel1.ClientID %>');
                currentUpdatedControl = $find('<%=RadScheduler1.ClientID %>');

                //Save button for Advanced Edit or Insert form
                $telerik.$(".rsAdvEditSave").bind("click", function(e) {

                    if (!clickedFlag) {
                        currentLoadingPanel.show(currentUpdatedControl.get_id());
                        clickedFlag = true;
                    }

                });
                //Save button for Inline Edit or Insert form
                $telerik.$(".rsAptEditConfirm").bind("click", function(e) {

                    currentLoadingPanel.show(currentUpdatedControl.get_id());

                });
            }

            function OnClientRequestSuccess(sender) {

                if (currentLoadingPanel != null) {
                    currentLoadingPanel.hide(currentUpdatedControl.get_id());
                    currentLoadingPanel = null;
                    currentUpdatedControl = null;
                    clickedFlag = false;
                }
            }
            </script>
    </telerik:RadCodeBlock>

Please, try the above approach and let us know how it goes.


Cheers,
Peter
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.

[James Legan]

Peter,

Just for the record, I am not in WebService binding mode. I am indeed sourcing my data from a webservice, but due to the data transforms I needed to perform and the processing I needed to do when inserting a new lease, I "broke" away from the webservice binding model and am instead doing a normal bind against a List<T> that is being returned.

That said, I ran into an interesting problem today and I am wondering if the javascript provided below will neet my needs if I tweak it (not at my desk right now).

I have two values in ViewState (m_nMaxLeaseDurationMinutes and m_nMaxLeaseDurationDays).

I need to figure out how to hook up the RadDateTimePicker to handle the two values (which are mutually exlusive of one another) and adjust the min and max date/time of the EndInput RadDateTimePicker.

For example, if I were to do it in code behind (which works during the FormCreated event), the following code would prevent the "EndInput" from being set prior to "today" and if there was a value in nMaxLeaseDurationDays, it would disable any days outside of that scope:

if (Convert.ToInt32(ViewState["m_nMaxLeaseDurationDays"]) != 0)
            {
                endInput.MinDate = startInput.DateInput.SelectedDate.Value;
                endInput.MaxDate = startInput.DateInput.SelectedDate.Value.AddDays(Convert.ToInt32(ViewState["m_nMaxLeaseDurationDays"]));
            }
            else
            {

            }

However, although I have hooked on the OnSelectedDateChanged property of the StartInput control and setup autopostback for the control to both elements (date and time), I am not seeing the refresh which I believe is related to the OK/Cancel button issue you previously answered.

Also, and I apologize if this is well documented somewhere, I looked and could not find it readily accessible but is there a built in method/function for the time control to set the equiv to max and min date that will also span days? i.e. if m_nMaxDurationInMinutes was set to 1080 (16 hours) and the user selects 10/29/2009 @ 2PM, it would block out everything after 6AM the following day.

Thanks,

Jim

[Peter]

Hi James,

If you are using Server Side binding for RadScheduler, then you don't need the workaround I suggested since it is intended for Client Side binding mode. With Server Side binding you can use RadAjaxLoading panel as shown in the online demos. If you experience problems with this approach, please open a support ticket and send us a simple demo project.

As for the other question, you can use FormCreated to find the Start or End time picker controls and attach on events like this:

protected void RadScheduler1_FormCreated(object sender, Telerik.Web.UI.SchedulerFormCreatedEventArgs e)
   {
       if (e.Container.Mode == SchedulerFormMode.AdvancedInsert || e.Container.Mode == SchedulerFormMode.AdvancedEdit)
       {
           RadDatePicker startDate = e.Container.FindControl("StartDate") as RadDatePicker;
           startDate.SelectedDateChanged += new Telerik.Web.UI.Calendar.SelectedDateChangedEventHandler(startDate_SelectedDateChanged);
           startDate.AutoPostBack = true;

           RadTimePicker startTime = e.Container.FindControl("StartTime") as RadTimePicker;
           startTime.SelectedDateChanged += new Telerik.Web.UI.Calendar.SelectedDateChangedEventHandler(startTime_SelectedDateChanged);
           startTime.AutoPostBack = true;
           //Similarly, you can find and attach to events for the End time controls.
       }
   }
   void startTime_SelectedDateChanged(object sender, Telerik.Web.UI.Calendar.SelectedDateChangedEventArgs e)
   {
       //...
   }
   void startDate_SelectedDateChanged(object sender, Telerik.Web.UI.Calendar.SelectedDateChangedEventArgs e)
   {
      //...
   }

If you have already used this approach and you experience problems with it, again I have to ask you to send us a sample to test locally.


Kind regards,
Peter
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.