RadSlider Skin not rendering

3 posts, 1 answers
  1. Chad
    Chad avatar
    3 posts
    Member since:
    Jan 2011

    Posted 11 Oct 2011 Link to this post

    I have a custom paging control that I am using in my application.
    The markup for the control is listed below. The problem I am having is that the slider doesn't always render the skin correctly. When it renders the only thing I see is a link with the word "Drag"; please see the attached image. I tried adding the reference to the top of the page to Get the WebResource for the skin but that didn't work. Any help would be greatly appreciated.

    <asp:Panel ID="pagerContainer" CssClass="pagercontainer" runat="server">
     
        <table border="0" width="100%" cellpadding="2" cellspacing="2">
            <tr>
                <td valign="middle" width="105px" nowrap="nowrap">
                    <asp:Panel ID="LeftContainer" runat="server" CssClass="pagerCommand">
                        <asp:ImageButton AlternateText="First Page" CommandName="First" ID="firstPageButton"
                            ImageAlign="AbsMiddle" ImageUrl="~/Images/first.gif" runat="server" ToolTip="First Page" />
                        <asp:ImageButton AlternateText="Previous Page" CommandName="Previous" ID="previousPageButton"
                            ImageAlign="AbsMiddle" ImageUrl="~/Images/prev.gif" runat="server" ToolTip="Previous Page" />
                    </asp:Panel>
                </td>
                <td valign="middle" width="175px">
                    <asp:Panel ID="sliderPanel" CssClass="pagerCommand" runat="server">
                    <telerik:RadSlider ID="slider" runat="server" AnimationDuration="0" 
                            Orientation="Horizontal" EnableViewState="true"
                        SmallChange="1" ShowDecreaseHandle="false" ShowIncreaseHandle="false" Width="175px"
                        Skin="Web20" AutoPostBack="true"
                        EnableEmbeddedSkins="true">
                    </telerik:RadSlider>
                    </asp:Panel>
                </td>
                <td valign="middle" width="105px">
                    <asp:Panel ID="rightContainer" runat="server" CssClass="pagerCommand">
                        <asp:ImageButton AlternateText="Next Page" CommandName="Next" ID="nextPageButton"
                            ImageAlign="AbsMiddle" ImageUrl="~/Images/next.gif" runat="server" ToolTip="Next Page" />
                        <asp:ImageButton AlternateText="Last Page" CommandName="Last" ID="lastPageButton"
                            ImageAlign="AbsMiddle" ImageUrl="~/Images/last.gif" runat="server" ToolTip="Last Page" />
                    </asp:Panel>
                </td>
                <td align="right">
                    <asp:Label ID="positionLabel" runat="server" CssClass="pagerinfo" />
                </td>
            </tr>
        </table>
     
    <asp:HiddenField ID="SliderHiddenField" runat="server" />
     
    </asp:Panel>

  2. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 11 Oct 2011 Link to this post

    Hello Chad,

    As I could see from your screehsnots some of the Slider resources are not loaded on the page. I could not tell what is happening with your application, but I have tested your code with a very few changes (I have added some absolute img urls):

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:Panel ID="pagerContainer" CssClass="pagercontainer" runat="server">
            <table border="0" width="100%" cellpadding="2" cellspacing="2">
                <tr>
                    <td valign="middle" width="105px" nowrap="nowrap">
                        <asp:Panel ID="LeftContainer" runat="server" CssClass="pagerCommand">
                            <asp:ImageButton AlternateText="First Page" CommandName="First" ID="firstPageButton"
                                ImageAlign="AbsMiddle" ImageUrl="http://cdn1.iconfinder.com/data/icons/Primo_Icons/PNG/48x48/button_black_rew.png"
                                runat="server" ToolTip="First Page" />
                            <asp:ImageButton AlternateText="Previous Page" CommandName="Previous" ID="previousPageButton"
                                ImageAlign="AbsMiddle" ImageUrl="http://cdn1.iconfinder.com/data/icons/Primo_Icons/PNG/48x48/button_black_rew.png"
                                runat="server" ToolTip="Previous Page" />
                        </asp:Panel>
                    </td>
                    <td valign="middle" width="175px">
                        <asp:Panel ID="sliderPanel" CssClass="pagerCommand" runat="server">
                            <telerik:RadSlider ID="slider" runat="server" EnableViewState="true" ShowIncreaseHandle="false"
                                Width="175px" Skin="Black" AutoPostBack="true">
                            </telerik:RadSlider>
                        </asp:Panel>
                    </td>
                    <td valign="middle" width="105px">
                        <asp:Panel ID="rightContainer" runat="server" CssClass="pagerCommand">
                            <asp:ImageButton AlternateText="Next Page" CommandName="Next" ID="nextPageButton"
                                ImageAlign="AbsMiddle" ImageUrl="http://cdn1.iconfinder.com/data/icons/Primo_Icons/PNG/48x48/button_black_rew.png"
                                runat="server" ToolTip="Next Page" />
                            <asp:ImageButton AlternateText="Last Page" CommandName="Last" ID="lastPageButton"
                                ImageAlign="AbsMiddle" ImageUrl="http://cdn1.iconfinder.com/data/icons/Primo_Icons/PNG/48x48/button_black_rew.png"
                                runat="server" ToolTip="Last Page" />
                        </asp:Panel>
                    </td>
                    <td align="right">
                        <asp:Label ID="positionLabel" runat="server" CssClass="pagerinfo" />
                    </td>
                </tr>
            </table>
            <asp:HiddenField ID="SliderHiddenField" runat="server" />
        </asp:Panel>
        </form>
    </body>
    </html>

    Attached is sliderPlayer.gif showing the result in the browser. I could only guess if this is similar to the result that you expect. If it`s close and it works on my side but does not work on yours, we will need us to send us a simple sample project with your application and the issue reproduced, so we would be able to investigate it further.

    As I could see only a picture od the problem, this is also a guess, but it could be the known IE CSS limitation problem, and that`s why some of the CSS resources were not loaded on the page.

    There is a blog post on our website: Internet Explorer CSS Limits where the problem is described in detail and suggests several ways to fix the issue.

    But in shortly, I will suggest you to add RadStyleSheetManager to your application. RadStyleSheetManager control gives developers the advantage of a simple drag-and-drop to achieve the combination of resources to a single request. All you need is to add a RadStyleSheetManager to your page and the stylesheet requests will be combined into a single request:

    <telerik:RadStyleSheetManager ID="RadStyleShM1" runat="server"></telerik:RadStyleSheetManager>

    All the best,
    Bozhidar
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Chad
    Chad avatar
    3 posts
    Member since:
    Jan 2011

    Posted 17 Oct 2011 Link to this post

    Thanks for the help.You were correct in your assumption of the issue. The issue was related to the 31 stylesheet limitation; which at the time I was unaware of until this issue arose. I  appreciate the quick reply and help with this issue.
Back to Top