Slider Items Flicker on Postback

[Ryan]

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

[Tsvetie]

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.

[Ryan]

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.