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.
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.
5 Answers, 1 is accepted
0
Accepted
Shinu
Top achievements
Rank 2
Rank 2
answered on 11 Mar 2013, 09:48 AM
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:
2. Using the RadStyleSheetManager to load the styles:
ASPX:
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:
Thanks,
Shinu.
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.
0
Ralph
Top achievements
Rank 1
Rank 1
answered on 24 Apr 2013, 03:11 PM
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
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
0
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
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.
0
Ralph
Top achievements
Rank 1
Rank 1
answered on 29 Apr 2013, 03:49 PM
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
-Ralph
0
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
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.