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

Slider in ajax modalpopup

6 Answers 175 Views
Slider
This is a migrated thread and some comments may be shown as answers.
Dimitris
Top achievements
Rank 1
Dimitris asked on 04 Nov 2009, 02:23 PM
Hi,

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

Sort by
0
Svetlina Anati
Telerik team
answered on 04 Nov 2009, 03:46 PM
Hello Dimitris,

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.
0
Dimitris
Top achievements
Rank 1
answered on 05 Nov 2009, 07:14 AM
Hi,

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) 

0
Svetlina Anati
Telerik team
answered on 05 Nov 2009, 12:19 PM
Hi Dimitris,

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.
0
Chris Marisic
Top achievements
Rank 1
answered on 22 Feb 2010, 10:47 PM
Svetlina,

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?
0
Tsvetie
Telerik team
answered on 23 Feb 2010, 07:55 AM
Hello Chris Marisic,
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.
0
Chris Marisic
Top achievements
Rank 1
answered on 23 Feb 2010, 03:45 PM
Tsvetie your response made me understand better understand the real issue that the slider doesn't know it's become visible for it to fire it's client methods which is why it couldn't repaint itself to start with. This is what I ended up with and I think it might end up helping others.

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); 




Tags
Slider
Asked by
Dimitris
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
Dimitris
Top achievements
Rank 1
Chris Marisic
Top achievements
Rank 1
Tsvetie
Telerik team
Share this question
or