More in this section

Forums / Bugs & Issues / RadScheduler AJAX issues

RadScheduler AJAX issues

9 posts, 0 answered
  1. Kevin
    Kevin avatar
    38 posts
    Registered:
    06 Sep 2011
    20 Sep 2011
    Link to this post
    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!
  2. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    30 Oct 2017
    22 Sep 2011
    Link to this post
    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
  3. Kevin
    Kevin avatar
    38 posts
    Registered:
    06 Sep 2011
    23 Sep 2011
    Link to this post
    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.
  4. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    30 Oct 2017
    28 Sep 2011
    Link to this post
    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
  5. Kevin
    Kevin avatar
    38 posts
    Registered:
    06 Sep 2011
    28 Sep 2011
    Link to this post
    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.
  6. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    30 Oct 2017
    28 Sep 2011
    Link to this post
    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
  7. Kevin
    Kevin avatar
    38 posts
    Registered:
    06 Sep 2011
    28 Sep 2011
    Link to this post
    The other controls on the page are RadTreeView and RadMenu.
  8. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    30 Oct 2017
    28 Sep 2011
    Link to this post
    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
  9. Kevin
    Kevin avatar
    38 posts
    Registered:
    06 Sep 2011
    28 Sep 2011
    Link to this post
    Yes, it seems to work in that instance, yet not in mine.  I'll experiment until I find a solution.
9 posts, 0 answered