Slider in ajax modalpopup

7 posts, 0 answers
  1. Dimitris
    Dimitris avatar
    2 posts
    Member since:
    Nov 2009

    Posted 04 Nov 2009 Link to this post

    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.
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 04 Nov 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dimitris
    Dimitris avatar
    2 posts
    Member since:
    Nov 2009

    Posted 05 Nov 2009 Link to this post

    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) 

  5. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 05 Nov 2009 Link to this post

    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.
  6. Chris Marisic
    Chris Marisic avatar
    30 posts
    Member since:
    Sep 2009

    Posted 22 Feb 2010 Link to this post

    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?
  7. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 23 Feb 2010 Link to this post

    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.
  8. Chris Marisic
    Chris Marisic avatar
    30 posts
    Member since:
    Sep 2009

    Posted 23 Feb 2010 Link to this post

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




Back to Top
UI for ASP.NET Ajax is Ready for VS 2017