Slider Items Flicker on Postback

3 posts, 1 answers
  1. Ryan
    Ryan avatar
    61 posts
    Member since:
    Jul 2009

    Posted 18 Sep 2009 Link to this post

    I have various sliders in my application, and have noticed that every time the page (or even UpdatePanel) posts back, the slider's items flicker.  When the slider's items are dynamically retrieved from a database, this flickering is much more noticeable and interfering.  I tried implementing a simple slider with only a few hard-coded items, and I still get the flicker (see code below).

    <asp:UpdatePanel runat="server" ID="upSlider">  
        <ContentTemplate> 
            <telerik:RadSlider runat="server" ID="sldrTest" AutoPostBack="true" ItemType="Item">  
                <Items> 
                    <telerik:RadSliderItem Text="Value 1" Value="1" /> 
                    <telerik:RadSliderItem Text="Value 2" Value="2" /> 
                    <telerik:RadSliderItem Text="Value 3" Value="3" /> 
                    <telerik:RadSliderItem Text="Value 4" Value="4" /> 
                    <telerik:RadSliderItem Text="Value 5" Value="5" /> 
                </Items> 
            </telerik:RadSlider> 
        </ContentTemplate> 
    </asp:UpdatePanel> 

    Is there any way to have my slider persist its items across postbacks, without having to re-draw them?  Obviously, if I set AutoPostBack="false" then there won't be any flickering, but I would have no way to handle a value change.

    I've already tried the following:
    • Setting EnableAjaxSkinRendering="true"
    • Setting EnableViewState="true"
    • Setting AutoPostBack="false"
    • Placing slider inside and outside of an <asp:UpdatePanel>
    • Hard-coding slider items and dynamically adding slider items
  2. Answer
    Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 23 Sep 2009 Link to this post

    Hello Ryan,
    The current version of the RadSlider control does not have server-side rendering. Its HTML is created entirely on the client and that is why in case you update the control itself there is no way to avoid the flickering you describe.

    However, I suppose that you do not need to update the RadSlider control. That is why, you can simply move it outside of the UpdatePanel and use a trigger to update the content of the UpdatePanel when the value of the slider changes:
    <asp:UpdatePanel runat="server" ID="upSlider"
        <ContentTemplate> 
            <asp:Label ID="Label1" runat="server" Text="Initial"></asp:Label> 
        </ContentTemplate> 
        <Triggers> 
            <asp:AsyncPostBackTrigger ControlID="sldrTest" EventName="ValueChanged" /> 
        </Triggers> 
    </asp:UpdatePanel> 
    <telerik:RadSlider runat="server" ID="sldrTest" OnValueChanged="sldrTest_ValueChanged" AutoPostBack="true" ItemType="Item"
        <Items> 
            <telerik:RadSliderItem Text="Value 1" Value="1" /> 
            <telerik:RadSliderItem Text="Value 2" Value="2" /> 
            <telerik:RadSliderItem Text="Value 3" Value="3" /> 
            <telerik:RadSliderItem Text="Value 4" Value="4" /> 
            <telerik:RadSliderItem Text="Value 5" Value="5" /> 
        </Items> 
    </telerik:RadSlider> 

    protected void sldrTest_ValueChanged(object sender, EventArgs e) 
        Label1.Text = "Updated"

    Regards,
    Tsvetie
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ryan
    Ryan avatar
    61 posts
    Member since:
    Jul 2009

    Posted 23 Sep 2009 Link to this post

    Thank you for the response.  I am looking forward to the RadSlider release with server-side rendering.  Until then, i will be sure to leave the slider outside of the UpdatePanel, while leaving its ValueChanged event as the UpdatePanel's AsyncPostBackTrigger.

     

    Thanks again.

Back to Top