RadSlider won't slide in after update with RadAjaxManager in IE8

4 posts, 0 answers
  1. Euroscan
    Euroscan avatar
    26 posts
    Member since:
    Apr 2006

    Posted 21 Jun 2011 Link to this post

    Hello,

    I have encountered the following problems with the RadSlider and RadAjaxLoadingPanel:

    - After a update takes place initiated by a timer event, the RadSlider will not work in IE8 anymore, before the update it will slide without any problems. After the update I can't use the drag handle anymore, clicking in the Slider will make the slider move but it will return to the original positiion almost immediately..
    I noticed that this problem only occurs with IE at around 80-90% of the time (sometimes I can use the slider without any problems) FireFox and Opera don't have any issues.

    - When I use the loadingpanel in the RadAjaxManager, the panel doesn't seem to go away after the loading is done. The panel seems to continue to stay on top. Again this problem is only in IE, Firefox/Opera don't have any problems.

    I have uploaded a demo project to rapidshare.

    If you are not able to use the provided solution, I've added the source code files for the project below:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SliderAjaxUpdate._Default" %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:Timer ID="GraphStartTimer" runat="server" Interval="10" OnTick="GraphStart_Tick">
        </asp:Timer>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="GraphStartTimer">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="pnlTruck" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="sliderPeriod">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="pnlTruck" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server">
            <asp:Label ID="Label2" runat="server" ForeColor="Red">Loading... </asp:Label>
        </telerik:RadAjaxLoadingPanel>
        <asp:Panel ID="pnlTruck" runat="server">
            <asp:Label ID="lblCurrentDate" runat="server"></asp:Label>
            <telerik:RadSlider ID="sliderPeriod" runat="server" Width="765px" ShowDecreaseHandle="false"
                ShowIncreaseHandle="false" ItemType="Tick" OnValueChanged="SliderPeriodValueChanged"
                AutoPostBack="True">
            </telerik:RadSlider>
        </asp:Panel>
        </form>
    </body>
    </html>

    using System;
    using System.Threading;
     
    namespace SliderAjaxUpdate
    {
        public partial class _Default : System.Web.UI.Page
        {
            protected void GraphStart_Tick(object sender, EventArgs e)
            {
                // First Time Loading...
                GraphStartTimer.Enabled = false;
                Thread.Sleep(5000);
                LoadPeriodData(DateTime.Now.Date.AddDays(-1), DateTime.Now);
            }
     
            private void LoadPeriodData(DateTime dtStart, DateTime dtEnd)
            {
                //first set slider max and min
                sliderPeriod.MinimumValue = Convert.ToDecimal(dtStart.ToOADate()) * 24 * 60;
                sliderPeriod.MaximumValue = Convert.ToDecimal(dtEnd.ToOADate()) * 24 * 60;
                sliderPeriod.Value = sliderPeriod.MinimumValue;
                ShowStatus();
            }
     
            protected void SliderPeriodValueChanged(object sender, EventArgs e)
            {
                ShowStatus();
            }
     
            private void ShowStatus()
            {
                //set hint to datetime           
                DateTime row = DateTime.FromOADate(Convert.ToDouble(sliderPeriod.Value) / (24 * 60));
                sliderPeriod.Value = Convert.ToDecimal(row.ToOADate()) * 24 * 60;
                lblCurrentDate.Text = sliderPeriod.DragText = row.ToString("dd-MM-yyyy HH:mm");
            }
     
        }
    }
  2. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 21 Jun 2011 Link to this post

    Hello Bernd,

    Check if the problem persists after these changes:
    1. Specify higher value for Interval property of Timer control. Lower values may cause unexpected behaviour.
    <asp:Timer ID="GraphStartTimer" runat="server" Interval="1000" OnTick="GraphStart_Tick">
    </asp:Timer>

    2. Remove Thread.Sleep(1000) from your Tick event handler.
    protected void GraphStart_Tick(object sender, EventArgs e)
    {
          // First Time Loading...
          GraphStartTimer.Enabled = false;
          //Thread.Sleep(1000);
          LoadPeriodData(DateTime.Now.Date.AddDays(-1), DateTime.Now);
    }

    Please let me know if this solution works for you.

    Regards,
    Slav
    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.

    Translate
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Euroscan
    Euroscan avatar
    26 posts
    Member since:
    Apr 2006

    Posted 21 Jun 2011 Link to this post

    Hello Slav,

    The Thread.sleep was used to simulate a (longer) loading where the loadingpanel was required.

    I have changed the interval to 1000ms an d it seems to me that the slider/loadingpanel are working correctly nowm thank you for that tip!.

    I would like to see the loading panel immediately when the page is loading. Since getting the data may take some time, and I would like to present the already loaded data. I therefor use the TimerTick event in order to generate a postback where I show the loadingpanel + start loading the "slower" part of the site.

    Is there any possibility to show the entire site and on the places that need longer loading a loading panel without using a Timer event?

    Thank you,

    Bernd
  5. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 22 Jun 2011 Link to this post

    Hello Bernd,

    If you want the show some message before loading the content on your page there are two possibilities:

    1. You can create div element with your message at the beginning of the body section of your page, with position set to absolute. Then remove it on any of these events:
    •  jQuery's $(document).ready(handler).
    • Javascript's window.onload.
    • ASP.NET Page Load event.

    2. If you are using AJAX, as in your case, you can set a RadAjaxLoadingPanel to your RadAjaxManager control as shown below:
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="LoadingPanel1">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="GraphStartTimer" >
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="pnlTruck" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="sliderPeriod">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="pnlTruck" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server">
            <asp:Label ID="Label2" runat="server" ForeColor="Red">Loading...    </asp:Label>
    </telerik:RadAjaxLoadingPanel>


    Regards,
    Slav
    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