Hiding and Showing RadScheduler

[Scott]

I'm trying to be able to hide and show a RadScheduler on demand. I'm fairly sure this is a client side scripting question.

The first problem I was having was hiding the scheduler on page load. It would hide ok, but when shown, it would be empty. I solved this by calling repaint() after showing its wrapper div.

Now the problem is even though its showing ok, appointments cannot be dragged and dropped.

Specifically, if the RadScheduler is hidden, and an Ajax call is made which rebinds the data, lets say an appointment is moved back two weeks, when the wrapper div is shown and the scheduler is repainted, it does show the appointment on the correct new date, however it is no longer dragable.

Is there another client side method I can call that will reenable dragging support?

Thanks,

<asp:Content ID="Content1" ContentPlaceHolderID="cphHead" Runat="Server">
<script type="text/javascript">
    var rsEvents = null;
    var rgEvents = null;
    var rsPastEvents = null;
    var rgPastEvents = null;
    function onResponseEnd(sender, args) {
        if (args.EventTarget.replace(/\$/g, '_') == rgEvents.ClientID || args.EventTarget == rgPastEvents.ClientID) {
            $('#schedEvents').data('nr', true);
            $('#schedPastEvents').data('nr', true);
        }
    }
    $(document).ready(function () {
        $('#evtCalBtn').click(function () {
            $('#schedEvents').toggle('blind', {}, 500, null);
            if ($('#schedEvents').data('nr') == true) {
                rsEvents.repaint();
                rsEvents.rebind();
            }
        });
        $('#pastEvtCalBtn').click(function () {
            $('#schedPastEvents').toggle('blind', {}, 500, null);
            if ($('#schedPastEvents').data('nr') == true) {
                rsPastEvents.repaint();
                rsEvents.rebind();
            }
        });
    });

    $(window).load(function () {
        $('#schedEvents').hide();
        $('#schedPastEvents').hide();

        rsEvents = $find('<%= rsEvents.ClientID %>');
        rgEvents = $find('<%= rgEvents.ClientID %>');
        rsPastEvents = $find('<%= rsPastEvents.ClientID %>');
        rgPastEvents = $find('<%= rgPastEvents.ClientID %>');
        $('#schedEvents').data('nr', false);
        $('#schedPastEvents').data('nr', false);
    });
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cphBody" Runat="Server">

<div>
    <div class="acnt">
    <p>Upcoming Events <span id="evtCalBtn" class="viewCalender">(View Calendar)</span></p>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="rgEvents">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="rsEvents" UpdatePanelHeight="" />
                        <telerik:AjaxUpdatedControl ControlID="rgPastEvents" UpdatePanelHeight="" />
                        <telerik:AjaxUpdatedControl ControlID="rsPastEvents" UpdatePanelHeight="" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="rsEvents">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="rgEvents" UpdatePanelHeight="" />
                        <telerik:AjaxUpdatedControl ControlID="rgPastEvents" UpdatePanelHeight="" />
                        <telerik:AjaxUpdatedControl ControlID="rsPastEvents" UpdatePanelHeight="" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="rgPastEvents">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="rgEvents" UpdatePanelHeight="" />
                        <telerik:AjaxUpdatedControl ControlID="rsEvents" UpdatePanelHeight="" />
                        <telerik:AjaxUpdatedControl ControlID="rsPastEvents" UpdatePanelHeight="" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="rsPastEvents">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="rgEvents" UpdatePanelHeight="" />
                        <telerik:AjaxUpdatedControl ControlID="rsEvents" UpdatePanelHeight="" />
                        <telerik:AjaxUpdatedControl ControlID="rgPastEvents" UpdatePanelHeight="" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
            <ClientEvents OnResponseEnd="onResponseEnd" />
        </telerik:RadAjaxManager>
            <telerik:RadGrid ID="rgEvents" runat="server" AllowSorting="True"
                    AutoGenerateColumns="False" DataSourceID="sqldsEvents" GridLines="None"
                    Skin="Windows7" onitemcommand="rgEvents_ItemCommand" AllowPaging="True">
                <MasterTableView DataKeyNames="EventID" DataSourceID="sqldsEvents">
                <CommandItemSettings ExportToPdfText="Export to Pdf"></CommandItemSettings>
                    <Columns>
                        <telerik:GridBoundColumn DataField="EventID" DataType="System.Int32"
                            HeaderText="EventID" ReadOnly="True" SortExpression="EventID"
                            UniqueName="EventID" Visible="False">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="StartDT" DataFormatString="{0:MM-dd-yyyy}"
                            DataType="System.DateTime" HeaderText="StartDT" SortExpression="Date"
                            UniqueName="StartDT">
                            <HeaderStyle Width="60px" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="EventName" HeaderText="EventName"
                            SortExpression="Event" UniqueName="EventName">
                            <HeaderStyle Width="100%" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Seats" DataType="System.Int32"
                            HeaderText="Seats" SortExpression="# Seats" UniqueName="Seats">
                            <HeaderStyle Width="40px" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="SeatsLeft" DataType="System.Int32"
                            HeaderText="SeatsLeft" ReadOnly="True" SortExpression="# Left"
                            UniqueName="SeatsLeft">
                            <HeaderStyle Width="40px" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Cost" DataFormatString="{0:$#,0.00}"
                            DataType="System.Decimal" HeaderText="Cost" SortExpression="Cost"
                            UniqueName="Cost">
                            <HeaderStyle Width="60px" />
                        </telerik:GridBoundColumn>
                        <telerik:GridHyperLinkColumn AllowFiltering="False" Groupable="False"
                            Reorderable="False" Resizable="False" ShowSortIcon="False" Target="_blank"
                            Text="View" UniqueName="colView" DataNavigateUrlFields="EventID"
                            DataNavigateUrlFormatString="../../events.aspx?id={0}">
                            <ItemStyle Font-Size="7pt" />
                        </telerik:GridHyperLinkColumn>
                        <telerik:GridButtonColumn CommandName="Delete" Text="Delete"
                            UniqueName="colDelete"
                            ConfirmText="Are you sure you want to cancel this event? You should send an email notiying them of the cancelation before continuing."
                            ConfirmTitle="Question">
                            <ItemStyle Font-Size="7pt" />
                        </telerik:GridButtonColumn>
                        <telerik:GridButtonColumn CommandName="Email" Text="Email"
                            UniqueName="colEmail">
                            <ItemStyle Font-Size="7pt" />
                        </telerik:GridButtonColumn>
                        <telerik:GridButtonColumn CommandName="Copy" Text="Copy"
                            UniqueName="colCopy">
                            <ItemStyle Font-Size="7pt" />
                        </telerik:GridButtonColumn>
                        <telerik:GridButtonColumn CommandName="Manage" Text="Manage"
                            UniqueName="colManage">
                            <ItemStyle Font-Size="7pt" />
                        </telerik:GridButtonColumn>
                    </Columns>
                </MasterTableView>
            </telerik:RadGrid>

        <div id="schedEvents" style="display: block">
            <telerik:RadScheduler runat="server" ID="rsEvents" Height="580px" Width="100%"
                SelectedView="MonthView" ShowViewTabs="False"
            ShowNavigationPane="True" DataEndField="EndDT" DataKeyField="EventID"
            DataSourceID="sqldsEvents" DataStartField="StartDT"
            DataSubjectField="EventName" Skin="Windows7"
            onappointmentupdate="rsEvents_AppointmentUpdate"
            EnableAdvancedForm="False"
            onappointmentdelete="rsEvents_AppointmentDelete" Localization-ConfirmDeleteTitle="Question"
            Localization-ConfirmDeleteText="Are you sure you want to cancel this event? You should send an email notiying them of the cancelation before continuing."

                onappointmentcontextmenuitemclicked="rsEvents_AppointmentContextMenuItemClicked"
                AllowInsert="False"
                StartEditingInAdvancedForm="False"
                ontimeslotcontextmenuitemclicked="rsEvents_TimeSlotContextMenuItemClicked">
            <AdvancedForm Modal="true" Enabled="False" />

<Localization ConfirmDeleteTitle="Question" ConfirmDeleteText="Are you sure you want to cancel this event? You should send an email notiying them of the cancelation before continuing."></Localization>

            <TimeSlotContextMenuSettings EnableDefault="true" />
                <AppointmentContextMenus>
                    <telerik:RadSchedulerContextMenu ID="RadSchedulerContextMenu1" runat="server">
                        <Items>
                            <telerik:RadMenuItem runat="server" Text="View" Value="View">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem runat="server" Text="Delete" Value="CommandDelete">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem runat="server" Text="Email" Value="Email">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem runat="server" Text="Copy" Value="Copy">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem runat="server" Text="Manage" Value="Manage">
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadSchedulerContextMenu>
                    <telerik:RadSchedulerContextMenu ID="RadSchedulerContextMenu2" runat="server">
                    </telerik:RadSchedulerContextMenu>
                </AppointmentContextMenus>

            </telerik:RadScheduler>
        </div>
    <br />
    <p>Templates</p>
    <asp:UpdatePanel ID="upTemplates" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
            <telerik:RadGrid ID="rgTemplates" runat="server" AllowSorting="True"
                    AutoGenerateColumns="False" DataSourceID="sqldsTemplates" GridLines="None"
                    Skin="Windows7" onitemcommand="rgTemplates_ItemCommand" AllowPaging="True">
                <MasterTableView DataKeyNames="EventID" DataSourceID="sqldsTemplates">
                <CommandItemSettings ExportToPdfText="Export to Pdf"></CommandItemSettings>
                    <Columns>
                        <telerik:GridBoundColumn DataField="EventID" DataType="System.Int32"
                            HeaderText="EventID" ReadOnly="True" SortExpression="EventID"
                            UniqueName="EventID" Visible="False">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="EventName" HeaderText="EventName"
                            SortExpression="Event" UniqueName="EventName">
                            <HeaderStyle Width="100%" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Seats" DataType="System.Int32"
                            HeaderText="Seats" SortExpression="# Seats" UniqueName="Seats">
                            <HeaderStyle Width="40px" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Cost" DataFormatString="{0:$#,0.00}"
                            DataType="System.Decimal" HeaderText="Cost" SortExpression="Cost"
                            UniqueName="Cost">
                            <HeaderStyle Width="60px" />
                        </telerik:GridBoundColumn>
                        <telerik:GridButtonColumn CommandName="Delete" Text="Delete"
                            UniqueName="colDelete"
                            ConfirmText="Are you sure you want to cancel this event? You should send an email notiying them of the cancelation before continuing."
                            ConfirmTitle="Question">
                            <ItemStyle Font-Size="7pt" />
                        </telerik:GridButtonColumn>
                        <telerik:GridButtonColumn CommandName="Copy" Text="Copy"
                            UniqueName="colCopy">
                            <ItemStyle Font-Size="7pt" />
                        </telerik:GridButtonColumn>
                        <telerik:GridButtonColumn CommandName="Manage" Text="Manage"
                            UniqueName="colManage">
                            <ItemStyle Font-Size="7pt" />
                        </telerik:GridButtonColumn>
                    </Columns>
                </MasterTableView>
            </telerik:RadGrid>
        </ContentTemplate>
        </asp:UpdatePanel>
    <br />
    <p>Past Events <span id="pastEvtCalBtn" class="viewCalender">(View Calendar)</span></p>
                <telerik:RadGrid ID="rgPastEvents" runat="server" AllowSorting="True"
                    AutoGenerateColumns="False" DataSourceID="sqldsPastEvents" GridLines="None"
                    Skin="Windows7" onitemcommand="rgPastEvents_ItemCommand" AllowPaging="True">
                <MasterTableView DataKeyNames="EventID" DataSourceID="sqldsPastEvents">
                <CommandItemSettings ExportToPdfText="Export to Pdf"></CommandItemSettings>
                    <Columns>
                        <telerik:GridBoundColumn DataField="EventID" DataType="System.Int32"
                            HeaderText="EventID" ReadOnly="True" SortExpression="EventID"
                            UniqueName="EventID" Visible="False">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="StartDT" DataFormatString="{0:MM-dd-yyyy}"
                            DataType="System.DateTime" HeaderText="StartDT" SortExpression="Date"
                            UniqueName="StartDT">
                            <HeaderStyle Width="60px" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="EventName" HeaderText="EventName"
                            SortExpression="Event" UniqueName="EventName">
                            <HeaderStyle Width="100%" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Seats" DataType="System.Int32"
                            HeaderText="Seats" SortExpression="# Seats" UniqueName="Seats">
                            <HeaderStyle Width="40px" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="SeatsLeft" DataType="System.Int32"
                            HeaderText="SeatsLeft" ReadOnly="True" SortExpression="# Left"
                            UniqueName="SeatsLeft">
                            <HeaderStyle Width="40px" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Cost" DataFormatString="{0:$#,0.00}"
                            DataType="System.Decimal" HeaderText="Cost" SortExpression="Cost"
                            UniqueName="Cost">
                            <HeaderStyle Width="60px" />
                        </telerik:GridBoundColumn>
                        <telerik:GridHyperLinkColumn AllowFiltering="False" Groupable="False"
                            Reorderable="False" Resizable="False" ShowSortIcon="False" Target="_blank"
                            Text="View" UniqueName="colView" DataNavigateUrlFields="EventID"
                            DataNavigateUrlFormatString="../../events.aspx?id={0}">
                            <ItemStyle Font-Size="7pt" />
                        </telerik:GridHyperLinkColumn>
                        <telerik:GridButtonColumn CommandName="Delete" Text="Delete"
                            UniqueName="colDelete"
                            ConfirmText="Are you sure you want to cancel this event? You should send an email notiying them of the cancelation before continuing."
                            ConfirmTitle="Question">
                            <ItemStyle Font-Size="7pt" />
                        </telerik:GridButtonColumn>
                        <telerik:GridButtonColumn CommandName="Email" Text="Email"
                            UniqueName="colEmail">
                            <ItemStyle Font-Size="7pt" />
                        </telerik:GridButtonColumn>
                        <telerik:GridButtonColumn CommandName="Copy" Text="Copy"
                            UniqueName="colCopy">
                            <ItemStyle Font-Size="7pt" />
                        </telerik:GridButtonColumn>
                        <telerik:GridButtonColumn CommandName="Manage" Text="Manage"
                            UniqueName="colManage">
                            <ItemStyle Font-Size="7pt" />
                        </telerik:GridButtonColumn>
                    </Columns>
                </MasterTableView>
            </telerik:RadGrid>
    <div id="schedPastEvents" style="display: block">
            <telerik:RadScheduler runat="server" ID="rsPastEvents" Height="580px" Width="100%"
                SelectedView="MonthView" ShowViewTabs="False"
            ShowNavigationPane="True" DataEndField="EndDT" DataKeyField="EventID"
            DataSourceID="sqldsPastEvents" DataStartField="StartDT"
            DataSubjectField="EventName" Skin="Windows7"
            onappointmentupdate="rsPastEvents_AppointmentUpdate"
            EnableAdvancedForm="False"
            onappointmentdelete="rsPastEvents_AppointmentDelete" Localization-ConfirmDeleteTitle="Question"
            Localization-ConfirmDeleteText="Are you sure you want to cancel this event? You should send an email notiying them of the cancelation before continuing."

                onappointmentcontextmenuitemclicked="rsPastEvents_AppointmentContextMenuItemClicked"
                AllowInsert="False"
                StartEditingInAdvancedForm="False"
                ontimeslotcontextmenuitemclicked="rsPastEvents_TimeSlotContextMenuItemClicked">
            <AdvancedForm Modal="true" Enabled="False" />

<Localization ConfirmDeleteTitle="Question" ConfirmDeleteText="Are you sure you want to cancel this event? You should send an email notiying them of the cancelation before continuing."></Localization>

            <TimeSlotContextMenuSettings EnableDefault="true" />
                <AppointmentContextMenus>
                    <telerik:RadSchedulerContextMenu ID="RadSchedulerContextMenu3" runat="server">
                        <Items>
                            <telerik:RadMenuItem runat="server" Text="View" Value="View">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem runat="server" Text="Delete" Value="CommandDelete">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem runat="server" Text="Email" Value="Email">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem runat="server" Text="Copy" Value="Copy">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem runat="server" Text="Manage" Value="Manage">
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadSchedulerContextMenu>
                    <telerik:RadSchedulerContextMenu ID="RadSchedulerContextMenu4" runat="server">
                    </telerik:RadSchedulerContextMenu>
                </AppointmentContextMenus>

            </telerik:RadScheduler>
        </div>

    </div>
</div>

[Peter]

Hello Scott,

We tested your code (after some modification like removing the grids since we don't have the data sources and binding RadScheduler with XmlSchedulerProvider) but the problem didn't show up at our side. We were able to drag appointments after showing RadScheduler. Can you please open a support ticket and send us a simple working demo of the issue?


Regards,
Peter
the Telerik team