Scheduler, AjaxManager, ScriptManager and AjaxLoading Panel issue.

4 posts, 0 answers
  1. Matt
    Matt avatar
    2 posts
    Member since:
    Mar 2011

    Posted 20 Apr 2011 Link to this post

    Hello all -

    I've been trying to get a solution put together for about a week now, and have run into an obstacle I can't seem to overcome. The solution code is in large part copied from examples provided on this site.

    I have an ASP form with a scheduler on it. When the user double clicks an appointment, I want to display my own custom edit form, which I achieved by following the code in demo:

    http://demos.telerik.com/aspnet-ajax/scheduler/examples/raddock/defaultcs.aspx

    That works fine.

    Now, as part of my app, I also need to take timezones into account on the scheduler. To do that, I incorporated the code from the sample: http://www.telerik.com/help/aspnet-ajax/schedule_localizationhandlingtimezones.html into my project.

    That works fine.

    I also wanted to display an ajaxloading panel, which was included as part of the timezone sample.

    That works fine.

    Now the problem.

    The radajaxmanager requires that there be a radscriptmanager present, and that it be located before the radajaxmanager. No problem, I put one in. Having done this, the AjaxLoadingPanel displays properly; however, the custom edit form for the scheduler refuses to display any of the data I set in it in the codebehind. In other words, I double click an appointment and the 2 raddatetimepickers I use are blank (They are the only 2 controls on my custom edit form, aside from an OK and Cancel button).

    If I move the radscriptmanager _after_ the radajaxmanager, the custom appointment editor works fine (the datetimepickers are populated), however, the AjaxLoadingPanel quits displaying.

    Here is a snippet of the code in which the AjaxLoadingPanel displays; however my edit form is broken, as described above.

    <telerik:RadScriptManager ID="RadScriptManager" runat="server" EnablePageMethods="False"/> 
        <telerik:RadAjaxManager ID="RadAjaxManager" runat="server" 
            OnAjaxRequest="RadAjaxManager_AjaxRequest" DefaultLoadingPanelID="RadAjaxLoadingPanel">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="InterviewScheduler">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="InterviewScheduler" 
                            LoadingPanelID="RadAjaxLoadingPanel" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="SaveAddressButton">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="InterviewScheduler" 
                            LoadingPanelID="RadAjaxLoadingPanel" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>     
         <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel" runat="server" 
            Skin="Windows7">
            Loading...
        </telerik:RadAjaxLoadingPanel>

    As part of my custom edit form, I use some javascript, again, pulled straight from the demo code:

    <telerik:RadScriptBlock runat="server" ID="RadScriptBlock">
            <script type="text/javascript">
                function openForm() {
                    var dock = $find("<%= RadDock.ClientID %>");
                    // Center the RadDock on the screen
                    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 });
      
                    dock.set_closed(false);
                    Sys.Application.remove_load(openForm);
                }
      
                function hideForm() {
                    var dock = $find("<%= RadDock.ClientID %>");
                    dock.set_closed(true);
      
                    return true;
                }
      
                function dockMoved(sender, args) {
                    //Return RadDock to his original HTML parent so it gets updated via ajax
                    $get("<%= DockPanel.ClientID %>").appendChild(sender.get_element());
                }              
            </script>
        </telerik:RadScriptBlock>

    The code for my custom edit form:

    <asp:Panel runat="server" ID="DockPanel">
            <telerik:RadDock runat="server" ID="RadDock" Width="320px" Height="220px" Closed="true"
                Style="z-index: 2000;" Title="Edit" OnClientDockPositionChanged="dockMoved" Skin="Web20">
                <%--            <Commands>
                    <telerik:DockCloseCommand   />
                </Commands>--%>
                <ContentTemplate>
                    <div class="editForm">
                        <div class="header">
                            <asp:Label runat="server" ID="StatusLabel"></asp:Label>
                        </div>
                        <div class="content">
                            <fieldset style="width: 280px">
                                <legend style="font-family: verdana; font-size: 8pt; font-weight: normal">Date Selection</legend>
                                <table width="100%">
                                    <tr>
                                        <td>
                                            Starts at:
                                        </td>
                                        <td>
                                            <telerik:RadDateTimePicker AutoPostBackControl="Both" ID="StartTime" runat="server" SharedCalendarID="SharedCalendar"
                                                Skin="Office2007" OnSelectedDateChanged="StartTime_SelectedDateChanged">
                                            </telerik:RadDateTimePicker>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Ends at:
                                        </td>
                                        <td>
                                            <telerik:RadDateTimePicker ID="EndTime" runat="server" SharedCalendarID="SharedCalendar"
                                                EnableTyping="False" Skin="Office2007">
                                            </telerik:RadDateTimePicker>
                                        </td>
                                    </tr>
                                </table>
                            </fieldset>
                        </div>
                        <div class="footer">
                            <telerik:RadButton ID="SubmitButton" runat="server" Text="OK" OnClick="SubmitButton_Click"
                                Skin="Windows7" />
                            <telerik:RadButton ID="CancelButton" runat="server" Text="Cancel" OnClick="CancelButton_Click"
                                Skin="Windows7" />
                        </div>
                        <telerik:RadCalendar ID="SharedCalendar" runat="server" EnableMonthYearFastNavigation="False"
                            EnableMultiSelect="False" UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False"
                            Skin="Windows7" SelectedDate="" ViewSelectorText="x">
                            <WeekendDayStyle CssClass="rcWeekend" />
                            <CalendarTableStyle CssClass="rcMainTable" />
                            <OtherMonthDayStyle CssClass="rcOtherMonth" />
                            <OutOfRangeDayStyle CssClass="rcOutOfRange" />
                            <DisabledDayStyle CssClass="rcDisabled" />
                            <SelectedDayStyle CssClass="rcSelected" />
                            <DayOverStyle CssClass="rcHover" />
                            <FastNavigationStyle CssClass="RadCalendarMonthView RadCalendarMonthView_Windows7" />
                            <ViewSelectorStyle CssClass="rcViewSel" />
                        </telerik:RadCalendar>
                    </div>
                </ContentTemplate>
            </telerik:RadDock>
        </asp:Panel>


    Finally, here is the codebehind that I use to populate my custom edit form:
    if (ApptSched.Count() > 0)
    {
        ScriptManager.RegisterStartupScript(Page, GetType(), "formScript", "Sys.Application.add_load(openForm);", true);
        InterviewScheduler.PrepareToEdit(e.Appointment, false);
          StartTime.SelectedDate = (DateTime)e.Appointment.Start.ToLocalTime();
        EndTime.SelectedDate = Convert.ToDateTime(StartTime.SelectedDate).Add((TimeSpan)Session["EstimatedTimePerInterview"]);
        EndTime.Enabled = false;
        Session["ID"] = ApptSched.FirstOrDefault().ID.ToString();
    }


    I realize this is a lot to throw at you in one post, but if you could provide a sample of the demo which takes timezones into account (http://www.telerik.com/help/aspnet-ajax/schedule_localizationhandlingtimezones.html); which also used a custom form editor on the scheduler..... my issue would (I think) be resolved, or you would have a test case which replicates the problem. Please let me know if more code snippets are needed...

    Thanks
    Matt
  2. Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 26 Apr 2011 Link to this post

    Hi Matt,

    Thank you for the detailed description of the issue.

    We have questions before for ajaxifying the "External Edit in RadDock" demo but we faced a lot of constraints when trying to update the demo so we finally realized that there is no way to do this.

    Please accept my apologies for the caused inconvenience.

    Greetings,
    Veronica Milcheva
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. Matt
    Matt avatar
    2 posts
    Member since:
    Mar 2011

    Posted 26 Apr 2011 Link to this post

    When you say "there is no way to do this", do you mean there is no way to accomplish what I'm trying to do, or that you couldn't put a sample/test case together?

    I can put a sample together if it helps any.

    Thanks
    Matt
  4. Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 28 Apr 2011 Link to this post

    Hello Matt,

    Could you please attach your full code in a .zip file and send it to me so me and our Ajax specialists can inspect it and help you?

    Thank you!

    Kind regards,
    Veronica Milcheva
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top