RadSlider display issue.

6 posts, 1 answers
  1. Merlin
    Merlin avatar
    15 posts
    Member since:
    Feb 2013

    Posted 11 Mar 2013 Link to this post

    Hello,

    I have a RadSlider which is hidden when the page initially loads. Later it is loaded onto the page using Ajax and that time there is some display issues with the skin. I have experienced the same issue with few other controls also. Is this a bug?

    Thank you,
    Merlin.
  2. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 11 Mar 2013 Link to this post

    Hello Merlin,

    When the RadSlider in not initially visible on the page and it is loaded through AJAX, its skin may not be loaded correctly. This is a known issue. This is a common issue when dynamically loading controls through AJAX requests. The reason for this behavior is that the control relies on its CSS resources to be already loaded on the page during initialization and rendering, whereas they are still loading. The way around this issue is to have the styles already loaded on the page.

    There are two basic ways to do this.     

    1.Using the GetWebResourceUrl method to load the styles:    
       
        ASPX:
        
    <head>
        <title></title>
        <link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadSlider), "Telerik.Web.UI.Skins.Slider.css") %>' rel="stylesheet" type="text/css" />
        <link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadSlider), "Telerik.Web.UI.Skins.Default.Slider.Default.css") %>' rel="stylesheet" type="text/css" />
    </head>

    2. Using the RadStyleSheetManager to load the styles:

        ASPX:
       
    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">
       <StyleSheets>
            <telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Slider.css" />
            <telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Default.Slider.Default.css" />
       </StyleSheets>
    </telerik:RadStyleSheetManager>
        
    Regardless of the approach you choose, you need to make sure that the control does not try to load the CSS on its own by preventing its embedded base stylesheets and skin:

    ASPX:
    <telerik:RadSlider runat="server" ID="RadSlider1" EnableEmbeddedBaseStylesheet="false" EnableEmbeddedSkins="false">
    </telerik:RadSlider>

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ralph
    Ralph avatar
    2 posts
    Member since:
    Mar 2013

    Posted 24 Apr 2013 Link to this post

    I have experienced this same issue when I use a slider for page control in my RadGrids.  But I am not using a <telerik:RadSlider> tag to create my slider, I am using <PagerStyle> within the RadGrid where the mode property is set to slider.

    Since <PagerStyle> does not have the EnableEmbeddedSkins or EnableEmbeddedBaseStylesheet properties, I had to come up with a different method of getting the slider to load properly.  I did the following:

    1) Set the AlwaysVisible property on the PagerStyle to true, causing it to load with the page.

    2) Set the CssClass of PagerStyle to a class where the visibility is set to hidden and display to none

    3)  In my project records appear in the grid after a button is pushed and things are processed on the server side via Ajax.  In the server side code, right after the Rebind() call, I check to see if there are enough records for the slider to be needed.  If so I set the Grid.PagerStyle.CssClass to a class where the visibility is visible and the display is inline-flex .  If not I set it to my hidden class in case previous calls have caused the slider to be visible.  Inline-flex seems to play nice with the way the grids are rendered, many other display values I tried do not.

    If there is a better solution I would love to hear it, but this is working for me.

    -Ralph
  5. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 29 Apr 2013 Link to this post

    Hello Ralph,

    In this case manually loading the skins of the RadSlider as shown in approach 2 from the previous post is the recommended solution. Please try this and let me know if it helped you.

    Greetings,
    Slav
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Ralph
    Ralph avatar
    2 posts
    Member since:
    Mar 2013

    Posted 29 Apr 2013 Link to this post

    But PagerStyle doesn't have the EnableEmbeddedBaseStylesheet property.  It has been a while now, but my recollection is that setting that to false on the grid worked for the grid, but not on the slider created by the PagerStyle. It was still looking for CSS that hadn't been loaded even though I had in fact loaded the Slider CSS through the RadStyleSheetManager.

    -Ralph
  7. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 30 Apr 2013 Link to this post

    Hello Ralph,

    Indeed, PagerStyle does not have a property EnableEmbeddedBaseStylesheet, nevertheless the styles that are loaded via the RadStyleSheetManager will override the ones that are loaded by the control. This means that you should be able to include them manually with a RadStyleSheetManager without setting EnableEmbeddedBaseStylesheet of the slider, used by the RadGrid pager, to false.

    Greetings,
    Slav
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017