I have a page with a modal popup (extender) on it. When opening the modal popup I dynamically load a usercontrol in the popup which has three radsliders on it. The only problem is that they don't work, they do not render correctly as well. I fixed the faulty rendering with the redraw function but i still cannot move the sliders.
Any help is apreciated.
6 Answers, 1 is accepted
I assume that the problem comes from the fact that the slider has a parent element set with display:none. In such scenario, the slider will not be rendered correctly if the parent element become visible.
We have fixed this bug and as far as we know it could not occur in other browsers than Safari. However, what I can suggest is to test the workaround we provide for Safari and see whether it fixes teh issue. The wrokaround is pretty simple and it consists of calling the repaint() method to force the slider to reaint. More information and a detailed KB article are available below:
http://www.telerik.com/support/kb/aspnet-ajax/slider/radslider-inside-initially-hidden-elements-e-g-radtooltip.aspx
If this does not help, you can test to repaint the slider with a small timeout.
Let me know what are the results of your tests and whether my suggestions helped.
All the best,
Svetlina
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.
I'm afraid the suggested solution did not work. We're using version 2008.2.1001.20 of the radControls. Maybe this can help. The controls are never set in a parent element with display:none or any other hidden type. (but maybe the ajax modal popup extender in which they are in, does this automatically)
Yes, the modal popup extender internally sets display:none to the popup element and this is expected. However, I tested my suggestion with the version you say and it fixed the issue on my side. I attached my test demo to the thread, please use the same fix on your side and let me know how it goes.
Kind regards,
Svetlina
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.
I ran into this issue today and in working to resolve it found a similar post on here that said about manually embedding the CSS files into the page for the slider which that worked however this solution seems like the more appaopriate fix however I can't get this to work.
I tried
<telerik:RadCodeBlock ID="RadCodeBlock2" runat="server"> |
<script type="text/javascript"> |
function OnClientShow(sender, eventArgs) { |
var slider = $find("<%= slider.ClientID %>"); |
slider.repaint(); |
</script> |
</telerik:RadCodeBlock> |
and tried to invoke that from the slider on my page with
<telerik:RadSlider ID="slider" runat="server" MinimumValue="0" MaximumValue="10" |
SmallChange="1" ItemType="Tick" Width="350px" Height="25px" Value="5" Skin="Windows7" |
LiveDrag="true" OnClientLoaded="OnClientShow"> |
</telerik:RadSlider> |
I tried both the OnClientLoad method and the OnClientLoaded method however neither worked. Is there a better event to hook into? Or is the issue that the paint event needs to be called from inside a settimeout like I saw in the sample aspx page in this thread?
You need to call the repaint method of the slider control as soon as its invisible parent becomes visible. The RadSlider control does not get notified, when this happens and that is why, you cannot use any of the client events of the slider, but rather an event that its invisible parent fires.
Kind regards,
Tsvetie
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
On my page
<telerik:RadCodeBlock runat="server"> |
<script type="text/javascript"> |
function RepaintSliders() { |
var slider = $find("<%= RadSlider1.ClientID %>"); |
slider.repaint(); |
} |
</script> |
</telerik:RadCodeBlock> |
And at the bottom of my button click event
const string script = @"setTimeout(RepaintSliders, 75);"; |
if(!radAjaxManager.IsAjaxRequest) return; |
radAjaxManager.ResponseScripts.Add(script); |