RadScheduler AJAX issues

Posted by Community Admin on 04-Aug-2018 18:11

RadScheduler AJAX issues

Sitefinity - Bugs & Issues

All Replies

Posted by Community Admin on 20-Sep-2011 00:00

I'm working on a website where we're using the RadScheduler nested within a RadAjaxPanel to function as a custom user control for an events calendar.  It works fine with Internet Explorer, Firefox, Safari, and Opera, and even works on a Macintosh with no problem, but it doesn't work with Google's Chrome browser.  What happens when you view the page in Chrome is the RadScheduler loads the first time with no issue, and the first time you click on any of the controls' buttons the button works as it should, but after the first click the control no longer responds to button clicks. Yet when I create a stand alone page where the events widget is the only component on the page, everything works fine in Chrome.

Included is the code for the masterpage and the calendar control and the code-behind for the control...

Masterpage

<%@ Master Language="c#" AutoEventWireup="true" CodeFile="Subpage_Site_3column_005.master.cs" Inherits="App_Master_MasterPage" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head id="Head1" runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="../app_themes/default/Global/RadVMenu.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="../app_themes/default/Global/common.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="../app_themes/default/Global/internal.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="../app_themes/default/Global/left-menu.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="../app_themes/default/Global/nav - Copy.css" rel="stylesheet" type="text/css" media="screen" />
    <title>Claflin University</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <div id="outermost-shell">
        <div id="page-container">
            <div id="header-container">
                <div id="logo-corner">
                    <asp:HyperLink ID="imgLogo" runat="server" ImageUrl="../app_themes/default/images/pagecore/Claflin-Logo-txt.png" alt="Claflin University" Width="670" Height="131" NavigateUrl="/"></asp:HyperLink>
                </div>
                <div id="search-corner"><div class="links"><a href="/">Home</a>  |  <a href="#">Directory</a></div>
                    <div id="search-text">Search</div>
                    <div id="left-cap">
                        <img src="/app_themes/default/images/pagecore/end-cap-left.png" width="12" height="23" />
                    </div>
                    <asp:ContentPlaceHolder ID="cphSearch" runat="server" />
                    <!--<input name="searchit" type="text" />-->
                    <div id="right-cap">
                        <img src="/app_themes/default/images/pagecore/end-cap-right.png" width="12" height="23" />
                    </div>
                    <!--<input name="Submit" type="button" class="btn-submit" />-->
                    <div style="margin-top: 45px"><asp:HyperLink ID="imgFacebook" runat="server" Width="25" Height="24" border="0" ImageUrl="../app_themes/default/images/pagecore/icon-facebook.png" NavigateUrl="https://www.facebook.com/pages/Claflin-University/103768076329311" Target="_blank"></asp:HyperLink>  
                    <asp:HyperLink ID="imgTwitter" runat="server" Width="25" Height="24" border="0" ImageUrl="../app_themes/default/images/pagecore/icon-twitter.png" NavigateUrl="http://twitter.com/#!/ClaflinUniv1869" Target="_blank"></asp:HyperLink></div>
                </div>
            </div>
            <!-- end header container -->
             
            <div id="nav-container">
                <div id="under-badge"></div>
                <asp:ContentPlaceHolder ID="cphNavigation" runat="server" />
            </div>
            <!-- end nav container -->
             
            <div id="page-content-container">
                <div id="page-background">
                    <div id="left-sidebar">
                        <div id="focal-left-nav">
                            <div class="content-block">
                                <asp:ContentPlaceHolder ID="cphLeftMenuTitle" runat="server" />
                                <div class="hold-content">
                                    <asp:ContentPlaceHolder ID="cphLeftMenu" runat="server" />
                                </div>
                            </div>
                        </div>
                        <br style="clear: both;" />
                        <asp:ContentPlaceHolder ID="cphLeftSidebar" runat="server" />
                    </div>
                    <div id="mid-content">
                        <asp:ContentPlaceHolder ID="cphPageTitle" runat="server" />
                        <asp:ContentPlaceHolder ID="cphBannerImage" runat="server" />
                        <div id="body-content">
                            <div id="mid-column">
                                <asp:ContentPlaceHolder ID="cphMidColumn" runat="server" />
                            </div>
                            <div id="right-column">
                                <asp:ContentPlaceHolder ID="cphRightColumn" runat="server" />
                            </div>
                        </div>
                    </div>
                    <!-- end mid-content -->
                    <br style="clear: both;" />
                </div>
                <!-- end page background-->
            </div>
            <!-- end page content container -->
        </div>
        <!-- end page container -->
    </div>
    <!-- end outermost shell -->
    <div id="footer-shell">
        <div id="footer-content-container">
            <div id="footer-wrap-stripes">
                <div id="footer-left-content">
                </div>
                <div id="footer-right-content">
                    <a href="/site-map">Site Map</a><br />
                    1-803-535-5000<br />
                    1-800-922-1276</div>
            </div>
        </div>
    </div>
    <!-- end footer shell -->
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="/app_themes/default/global/jquery.hoverIntent.minified.js"></script>
    <script type="text/javascript" src="/app_themes/default/global/jquery.plugin.menuTree.js" charset="utf-8"></script>
    <script type="text/javascript" src="/app_themes/default/global/megadropdown.js" charset="utf-8"></script>
    <script type="text/javascript">
 
        var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
        document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    </script>
    <script type="text/javascript">
        try
            var pageTracker = _gat._getTracker("UA-2362290-1");
            pageTracker._trackPageview();
        
        catch(err)
    </script>
 
    </form>
</body>
</html>

Control
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ClaflinCalendarControl.ascx.cs" Inherits="SitefinityWebApp.EventsCalendar" %>
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
     <telerik:RadScheduler
    runat="server"
    ID="Scheduler1"
    SelectedView="MonthView"
    Height="600px"
    DataKeyField = "Id"
    DataSubjectField = "Title"
    DataStartField = "EventStart"
    DataEndField = "EventEnd"
    OnAppointmentCreated="Scheduler1_AppointmentCreated"
    AllowDelete="True"
    AllowEdit="False"
    AllowInsert="False"
    EnableRecurrenceSupport="False"
    EnableResourceEditing="False"
    ReadOnly="True"
    Skin="Simple">
    <AdvancedForm EnableResourceEditing="False" />
    <AppointmentTemplate>
        <asp:HyperLink id="eventDetailsLink" runat="server" />
    </AppointmentTemplate>
</telerik:RadScheduler>
</telerik:RadAjaxPanel>

Control.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Sitefinity;
using Telerik.Sitefinity.GenericContent.Model;
using Telerik.Sitefinity.Modules.Events;
using Telerik.Sitefinity.Events.Model;
 
namespace SitefinityWebApp
 
    public partial class EventsCalendar : System.Web.UI.UserControl
    
 
        public string SinglePage
        
            get;
            set;
        
 
        protected void Page_Load(object sender, EventArgs e)
        
            Scheduler1.DataSource = GetSourceItems();
        
 
        protected virtual IList<Event> GetSourceItems()
        
            var list = new List<Event>();
            list = App.WorkWith().Events().Where(c => c.Status == Telerik.Sitefinity.GenericContent.Model.ContentLifecycleStatus.Live).Get().ToList();
            return list;
        
 
        public void Scheduler1_AppointmentCreated(object sender, Telerik.Web.UI.AppointmentCreatedEventArgs e)
        
            var EManager = EventsManager.GetManager();
            var c = (HyperLink)e.Container.FindControl("eventDetailsLink");
            var data = EManager.GetEvent(new Guid(e.Appointment.ID.ToString()));
            c.Text = data.Title;
            c.NavigateUrl = SinglePage + data.Urls.Where(u => u.RedirectToDefault == false).FirstOrDefault().Url;
        
 
 
    

This has really got me stumped... Please help!

Posted by Community Admin on 22-Sep-2011 00:00

Hello Kevin,

Actually the supported scenario for using Ajax-enabled controls in Sitefinity is a little bit different. Please find attached a revised version of your control and masterpage, as well as a sample video demonstrating how the control wokrs on the three major browsers (IE, FF, Chrome). Below I'm listing several key changes done to your implementation:
1. Declare the ScriptManager and AjaxManager on the masterpage
2. Call base.OnInit() in the masterpage codebehind, so you can be sure the updated version of the controls is loaded (you can read more on the topic in this blog post).
3. Use RadAjaxManagerProxy in your user control, and configure it to point to the Ajax controls that you're using
4. In Sitefinity backend, drop the control on a page that's based on the created masterpage, and set the page's Enable ViewState property to true (from the page's Title and Properties menu)

Greetings,
Boyan Barnev
the Telerik team

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
[View:/cfs-file/__key/communityserver-discussions-components-files/297/301817_5F00_Controls.rar:320:240]
[View:/cfs-file/__key/communityserver-discussions-components-files/297/301819_5F00_EventsScheduler_2D00_Ajax_2D00_Chrome.rar:320:240]
[View:/cfs-file/__key/communityserver-discussions-components-files/297/301818_5F00_App_2D00_Master.rar:320:240]

Posted by Community Admin on 23-Sep-2011 00:00

I implemented your solution, and although your solution creates a more attractive looking update appearance, the control still does the exact same thing as it has been... First time it works, but when I click on one of the links, the control updates, and then no link on the control works again until I completely refresh the page.

Since I've updated my code, let me repost it for you...
Masterpage

<%@ Master Language="c#" AutoEventWireup="true" CodeFile="Subpage_Site_004.master.cs" Inherits="SitefinityWebApp.App_Master.App_Master_MasterPage" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head id="Head1" runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="../app_themes/default/Global/RadVMenu.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="../app_themes/default/Global/common.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="../app_themes/default/Global/internal.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="../app_themes/default/Global/left-menu.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="../app_themes/default/Global/nav - Copy.css" rel="stylesheet" type="text/css" media="screen" />
    <title>Claflin University</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1"></telerik:RadAjaxManager>
    <div id="outermost-shell">
        <div id="page-container">
            <div id="header-container">
                <div id="logo-corner">
                    <asp:HyperLink ID="imgLogo" runat="server" ImageUrl="../app_themes/default/images/pagecore/Claflin-Logo-txt.png" alt="Claflin University" Width="670" Height="131" NavigateUrl="/"></asp:HyperLink>
                </div>
                <div id="search-corner"><div class="links"><a href="/">Home</a>  |  <a href="#">Directory</a></div>
                    <div id="search-text">Search</div>
                    <div id="left-cap">
                        <img src="/app_themes/default/images/pagecore/end-cap-left.png" width="12" height="23" />
                    </div>
                    <asp:ContentPlaceHolder ID="cphSearch" runat="server" />
                    <!--<input name="searchit" type="text" />-->
                    <div id="right-cap">
                        <img src="/app_themes/default/images/pagecore/end-cap-right.png" width="12" height="23" />
                    </div>
                    <!--<input name="Submit" type="button" class="btn-submit" />-->
                    <div style="margin-top: 45px"><asp:HyperLink ID="imgFacebook" runat="server" Width="25" Height="24" border="0" ImageUrl="../app_themes/default/images/pagecore/icon-facebook.png" NavigateUrl="https://www.facebook.com/pages/Claflin-University/103768076329311" Target="_blank"></asp:HyperLink>  
                    <asp:HyperLink ID="imgTwitter" runat="server" Width="25" Height="24" border="0" ImageUrl="../app_themes/default/images/pagecore/icon-twitter.png" NavigateUrl="http://twitter.com/#!/ClaflinUniv1869" Target="_blank"></asp:HyperLink></div>
                </div>
            </div>
            <!-- end header container -->
             
            <div id="nav-container">
                <div id="under-badge"></div>
                <asp:ContentPlaceHolder ID="cphNavigation" runat="server" />
            </div>
            <!-- end nav container -->
             
            <div id="page-content-container">
                <div id="page-background">
                    <div id="left-sidebar">
                        <div id="focal-left-nav">
                            <div class="content-block">
                                <asp:ContentPlaceHolder ID="cphLeftMenuTitle" runat="server" />
                                <div class="hold-content">
                                    <asp:ContentPlaceHolder ID="cphLeftMenu" runat="server" />
                                </div>
                            </div>
                        </div>
                        <br style="clear: both;" />
                        <asp:ContentPlaceHolder ID="cphLeftSidebar" runat="server" />
                    </div>
                    <div id="mid-content">
                        <asp:ContentPlaceHolder ID="cphMainBody" runat="server" />
                    </div>
                    <!-- end mid-content -->
                    <br style="clear: both;" />
                </div>
                <!-- end page background-->
            </div>
            <!-- end page content container -->
        </div>
        <!-- end page container -->
    </div>
    <!-- end outermost shell -->
    <div id="footer-shell">
        <div id="footer-content-container">
            <div id="footer-wrap-stripes">
                <div id="footer-left-content">
                </div>
                <div id="footer-right-content">
                    <a href="/site-map">Site Map</a><br />
                    1-803-535-5000<br />
                    1-800-922-1276</div>
            </div>
        </div>
    </div>
    <!-- end footer shell -->
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="/app_themes/default/global/jquery.hoverIntent.minified.js"></script>
    <script type="text/javascript" src="/app_themes/default/global/jquery.plugin.menuTree.js" charset="utf-8"></script>
    <script type="text/javascript" src="/app_themes/default/global/megadropdown.js" charset="utf-8"></script>
    <script type="text/javascript">
 
        var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
        document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    </script>
    <script type="text/javascript">
        try
            var pageTracker = _gat._getTracker("UA-2362290-1");
            pageTracker._trackPageview();
        
        catch(err)
    </script>
 
    </form>
</body>
</html>

Masterpage Code Behind
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
namespace SitefinityWebApp.App_Master
    public partial class App_Master_MasterPage : System.Web.UI.MasterPage
    
        protected void Page_Load(object sender, EventArgs e)
        
            base.OnInit(e);
        
    

Control
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ClaflinCalendarControl.ascx.cs" Inherits="SitefinityWebApp.Controls.EventsCalendar" %>
 
<telerik:RadAjaxManagerProxy ID="AjaxProxy" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="Scheduler1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="Scheduler1" LoadingPanelID="LoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManagerProxy>
 
<telerik:RadAjaxLoadingPanel runat="server" ID="LoadingPanel1" Skin="Default"></telerik:RadAjaxLoadingPanel>
 
<telerik:RadScheduler
    runat="server"
    ID="Scheduler1"
    SelectedView="MonthView"
    Height="600px"
    DataKeyField = "Id"
    DataSubjectField = "Title"
    DataStartField = "EventStart"
    DataEndField = "EventEnd"
    OnAppointmentCreated="Scheduler1_AppointmentCreated"
    AllowDelete="True"
    AllowEdit="False"
    AllowInsert="False"
    EnableRecurrenceSupport="False"
    EnableResourceEditing="False"
    ReadOnly="True"
    Skin="Simple">
    <AdvancedForm EnableResourceEditing="False" />
    <AppointmentTemplate>
        <asp:HyperLink id="eventDetailsLink" runat="server" />
    </AppointmentTemplate>
</telerik:RadScheduler>

Control Code Behind
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Sitefinity.Events.Model;
using Telerik.Sitefinity;
using Telerik.Sitefinity.Modules.Events;
 
namespace SitefinityWebApp.Controls
 
    public partial class EventsCalendar : System.Web.UI.UserControl
    
 
        public string SinglePage
        
            get;
            set;
        
 
        protected void Page_Load(object sender, EventArgs e)
        
            Scheduler1.DataSource = GetSourceItems();
        
 
        protected virtual IList<Event> GetSourceItems()
        
            var list = new List<Event>();
            list = App.WorkWith().Events().Where(c => c.Status == Telerik.Sitefinity.GenericContent.Model.ContentLifecycleStatus.Live).Get().ToList();
            return list;
        
 
        public void Scheduler1_AppointmentCreated(object sender, Telerik.Web.UI.AppointmentCreatedEventArgs e)
        
            var EManager = EventsManager.GetManager();
            var c = (HyperLink)e.Container.FindControl("eventDetailsLink");
            var data = EManager.GetEvent(new Guid(e.Appointment.ID.ToString()));
            c.Text = data.Title;
            c.NavigateUrl = SinglePage + data.Urls.Where(u => u.RedirectToDefault == false).FirstOrDefault().Url;
        
 
 
    


Thank you for your assistance in this matter.

Posted by Community Admin on 28-Sep-2011 00:00

Hello Kevin,

The control is working properly on my side using the code I've sent you. Please have in mind that if the AJAX settings weren't loaded properly you wouldn't see the loading panel animation at all.  Could it be that any of the controls that you have on your page are causing the problems - please check if placing the control on a blank page still reproduces this behavior?

Best wishes,
Boyan Barnev
the Telerik team

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 28-Sep-2011 00:00

Placing the control on a page by itself has always worked in all browsers.  The only time it doesn't work is when attempting to view the control through Google Chrome.

Posted by Community Admin on 28-Sep-2011 00:00

Hi Kevin,

"Placing the control on a page by itself has always worked in all browsers." I guess that includes Chrome as well, right? IN that case, I would kindly ask you to let me know what kind of controls you have on your page, along with the RadScheduler, so we can try to reproduce the issue locally and inspect the problem further. Thanks in advance!

Kind regards,
Boyan Barnev
the Telerik team

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 28-Sep-2011 00:00

The other controls on the page are RadTreeView and RadMenu.

Posted by Community Admin on 28-Sep-2011 00:00

Hi Kevin,

That's really strange, can you please test this on a blank project, created with the same version of Sitefinity Project manager? I've tested this functionality with RadMenu and RadTreeView dropped on the same page, and the control is working fine in all officially supported browsers. Please take a look at the sample video I've recorded with Chrome.

Kind regards,
Boyan Barnev
the Telerik team

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 28-Sep-2011 00:00

Yes, it seems to work in that instance, yet not in mine.  I'll experiment until I find a solution.

This thread is closed