This is a migrated thread and some comments may be shown as answers.

Scheduler, AjaxManager, ScriptManager and AjaxLoading Panel issue.

3 Answers 120 Views

Scheduler

This is a migrated thread and some comments may be shown as answers.

Matt asked on 20 Apr 2011, 08:29 PM

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

3 Answers, 1 is accepted

answered on 26 Apr 2011, 10:28 AM

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.