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

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

3 Answers 64 Views
Slider
This is a migrated thread and some comments may be shown as answers.
Dave
Top achievements
Rank 1
Dave asked on 21 Jun 2011, 10:49 AM
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");
        }
 
    }
}

3 Answers, 1 is accepted

Sort by
0
Slav
Telerik team
answered on 21 Jun 2011, 05:17 PM
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
0
Dave
Top achievements
Rank 1
answered on 21 Jun 2011, 05:29 PM
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
0
Slav
Telerik team
answered on 22 Jun 2011, 11:44 AM
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.

Tags
Slider
Asked by
Dave
Top achievements
Rank 1
Answers by
Slav
Telerik team
Dave
Top achievements
Rank 1
Share this question
or