strange behavior with the slider in IE6

[jeljeljel]

I have a user on IE6 that is complaining of an intermittent problem with the slider.  When the page loads the slider doesn't render correctly nor does it work.  She must refresh her page and then it will usually reset itself.

If you open the image below, you will see an example of the issue.  There are two red arrows on the screenshot.  The leftmost points to the slider button which is shifted to the left of the slider.  The rightmost points to where the slider is supposed to display.  You can see the two arrow pagers on the left and right of the slider, but no bar where the slider bar should be.

http://imagehost.bigwavesoftware.net/sliderissue.png

Has this been seen or addressed before?

Thanks,
John

[Tsvetie]

Hi John,
I have seen a problem that resembles the one in the screenshot but for IE7. It manifestes in one particular scenario - when you do not have a RadSlider control initially on your page and you load a slider control with AJAX. The problem in this case is that the client code for the slider is executed before the CSS files of the slider are loaded. This happens because the page is updated synchronously when it is loaded for the first time and after postback and asynchronously, after AJAX request. That is why there is no way to ensure that the skin of the slider will be loaded by the time its client-side code is executed.

You might ask why the slider needs its skin files in order to render correctly - the reason for that is because the slider creates its HTML and calculates the size of its elements on the client. Some sizes - for example the size for the increase/decrease handles are set in the CSS of the skin of the slider. In case those handles do not have their correct size by the time the slider tries to calculate the size of its track element, for example, the calculated size is incorrect.

In order to avoid this unpleasant effect, you can register the CSS of the skin of the slider with the page yourself, instead of using the embedded skins. That way you will ensure that the CSS of the slider is loaded before it performs its initial calculations. There are several ways that you can do this - e.g. copy the CSS files of the Vista skin to your application, register the CSS files from the DLL in the code-behind or (in my opinion the simplest way) add the following to the HEAD of your page:

<link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadSlider), "Telerik.Web.UI.Skins.Slider.css") %>'
    rel="stylesheet" type="text/css" />
<link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadSlider), "Telerik.Web.UI.Skins.Vista.Slider.Vista.css") %>'
    rel="stylesheet" type="text/css" />

Please note that in all of those cases you need to set EnableEmbeddedSkins="false" and EnableEmbeddedBaseStylesheet="false". I have attached a test page, demonstrating the third approach as well - RegisterCssFiles.zip. In case you prefer to use another approach and have problems implementing it, just let me know and I will send you the code.

Apart from registering the CSS files of the RadSlider yourself, you can use the OnClientLoaded event of the RadSlider to call its repaint method:

<telerik:RadSlider ID="RadSlider1" runat="server" OnClientLoaded="SliderLoaded"

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
    function SliderLoaded(sender, args) {
        sender.repaint();
    }
</script>
</telerik:RadCodeBlock>

In case this is not your scenario and the suggestions do not help you, please send me a running test project that I can use to research the problem.
Tsvetie
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Shailesh]

Hi,

I am having the same issue Job mentioned.  Do you think you guys are fixing this issue in next comming version?  

[Shailesh]

I tried to run your attached sample code.  I got the following error

'RadSlider' is a type and cannot be used as an expression.

Am I missing something here ?

[Shailesh]

I have already mentioned my problem in previous post.  Eventhough let me tell what I am doing to get better understanding what my problem is.

here is my aspx page

<%@ Page Language="VB" AutoEventWireup="false"  CodeFile="test.aspx.vb" Inherits="test" %>

<%@ Register src="EI/SharedObjects/Controls/Slider.ascx" tagname="SliderWrapperControl" tagprefix="uc1" %>

<%@ Reference Control="EI/SharedObjects/Controls/Slider.ascx" %>

<%@ 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">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Untitled Page</title>

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

        <link href='<%= Page.ClientScript.GetWebResourceUrl(GetType(RadSlider), "Telerik.Web.UI.Skins.Slider.css") %>'

            rel="stylesheet" type="text/css" />

        <link href='<%= Page.ClientScript.GetWebResourceUrl(GetType(RadSlider), "Telerik.Web.UI.Skins.Vista.Slider.Vista.css") %>'

            rel="stylesheet" type="text/css" />

    </telerik:RadCodeBlock>

</head>

<body>

<script src="EI/SharedObjects/JS/jquery-1.3.2.min.js" type="text/javascript"></script>

    <form id="form1" runat="server">

    <asp:ScriptManager ID="SM1" runat="server" />

<asp:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate>

    <asp:Button runat="server" Text="Slider" ID="btnSlider" />

    <asp:Panel runat="server" ID="pnltest">

    

    </asp:Panel>

</ContentTemplate>

</asp:UpdatePanel>

    </form>

</body>

</html>

Here is my code behind 

Protected Sub btnSlider_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSlider.Click

        Dim SliderControlPath As String = "~/EI/SharedObjects/Controls/slider.ascx"

        Dim MemberAgeSlider1 As EI_SharedObjects_Controls_slider

        MemberAgeSlider1 = CType(LoadControl(ResolveUrl(SliderControlPath)), EI_SharedObjects_Controls_slider)

        MemberAgeSlider1.ID = String.Concat("1", "1_MemberAgeSlider1")

        pnltest.Controls.Add(MemberAgeSlider1)

    End Sub

if I load slider control dynamic using AJAX postback, It doesn't work.  Here is the javascript error I got.  

Error: HandleClientLoaded is not defined

Source File: http://localhost/ProfilerWeb2/test.aspx

Line: 1

I tried the solution you have suggested to john's post eventhough that didn't work for me.  

Could you suggest me the solution ?

[Tsvetie]

Hello Shailesh,
The error you get is completely different from the one that is discussed in this thread. Therefore, the solution that is suggested here will not fix it.

Unfortunately, I cannot reproduce the problem locally as I do not have the code of your slider.ascx control, but from the error message "Error: HandleClientLoaded is not defined" I can tell you that the problem is that you have set the OnClientLoaded property of the RadSlider control to "HandleClientLoaded" and that you have not declared that function. In case you place the following code fragment on your aspx page, the error should disappear:

function HandleClientLoaded(sender, args)
{
}

In case you have defined the function in the user control, you should wrap it in a RadCodeBlock.

In case this information does not help you, send us the code of the slider.ascx as well.

All the best,
Tsvetie
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.