css doesn't load when customizing toolbar items

2 posts, 1 answers
  1. TazDeveloper
    TazDeveloper avatar
    18 posts
    Member since:
    Feb 2010

    Posted 01 Aug 2011 Link to this post

    I have been trying to get CSS styles to load into a RadEditor with no luck.  The editor needs to show image manger, unordered list, indent, outdent and Apply Styles.  I was going nuts thinking it was something in my code, so I created a new Telerik Web Application.  My test app only has the default page that is created when you do new project.  I placed a RadEditor on the page and included my CSS stylesheet linked on the page.

    The problem is that when the tools are changed/added, the stylesheet does not load.  I am not even writing any code, I am letting the configuration manager put the changes into the file.  See code below...

    Is this a bug, or do I need to do something special?

    Thanks,
            Paul


    When the apsx page contains the following the Apply Styles works great:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
     
    <!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>
        <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
        <link href="css/style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <%--Needed for JavaScript IntelliSense in VS2010--%>
                <%--For VS2008 replace RadScriptManager with ScriptManager--%>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <script type="text/javascript">
            //Put your JavaScript code here.
        </script>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
      
        <telerik:RadSkinManager ID="RadSkinManager1" Runat="server" Skin="Hay">
        </telerik:RadSkinManager>
        <div>
         
            <telerik:RadEditor ID="RadEditor1" Runat="server">
            </telerik:RadEditor>
        </div>
        </form>
    </body>
    </html>

    When I customize the toolbar and the code looks like this, I get no dropdown for the Apply Styles.

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
     
    <!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>
        <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
        <link href="css/style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <%--Needed for JavaScript IntelliSense in VS2010--%>
                <%--For VS2008 replace RadScriptManager with ScriptManager--%>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <script type="text/javascript">
            //Put your JavaScript code here.
        </script>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
      
        <telerik:RadSkinManager ID="RadSkinManager1" Runat="server" Skin="Hay">
        </telerik:RadSkinManager>
        <div>
         
            <telerik:RadEditor ID="RadEditor1" Runat="server">
                <Tools>
                    <telerik:EditorToolGroup Tag="MainToolbar">
                        <telerik:EditorTool Name="Print" ShortCut="CTRL+P" />
                        <telerik:EditorTool Name="AjaxSpellCheck" />
                        <telerik:EditorTool Name="FindAndReplace" ShortCut="CTRL+F" />
                        <telerik:EditorTool Name="SelectAll" ShortCut="CTRL+A" />
                        <telerik:EditorTool Name="Cut" />
                        <telerik:EditorTool Name="Copy" ShortCut="CTRL+C" />
                        <telerik:EditorTool Name="Paste" ShortCut="CTRL+V" />
                        <telerik:EditorToolStrip Name="PasteStrip">
                        </telerik:EditorToolStrip>
                        <telerik:EditorSeparator />
                        <telerik:EditorSplitButton Name="Undo">
                        </telerik:EditorSplitButton>
                        <telerik:EditorSplitButton Name="Redo">
                        </telerik:EditorSplitButton>
                    </telerik:EditorToolGroup>
                    <telerik:EditorToolGroup Tag="InsertToolbar">
                        <telerik:EditorTool Name="ImageManager" ShortCut="CTRL+G" />
                        <telerik:EditorTool Name="DocumentManager" />
                        <telerik:EditorTool Name="FlashManager" />
                        <telerik:EditorTool Name="MediaManager" />
                        <telerik:EditorTool Name="TemplateManager" />
                        <telerik:EditorSeparator />
                        <telerik:EditorTool Name="LinkManager" ShortCut="CTRL+K" />
                        <telerik:EditorTool Name="Unlink" ShortCut="CTRL+SHIFT+K" />
                    </telerik:EditorToolGroup>
                    <telerik:EditorToolGroup>
                        <telerik:EditorTool Name="Superscript" />
                        <telerik:EditorTool Name="Subscript" />
                        <telerik:EditorTool Name="InsertParagraph" />
                        <telerik:EditorTool Name="InsertGroupbox" />
                        <telerik:EditorTool Name="InsertHorizontalRule" />
                        <telerik:EditorTool Name="InsertDate" />
                        <telerik:EditorTool Name="InsertTime" />
                        <telerik:EditorSeparator />
                        <telerik:EditorTool Name="FormatCodeBlock" />
                    </telerik:EditorToolGroup>
                    <telerik:EditorToolGroup>
                        <telerik:EditorDropDown Name="FormatBlock">
                        </telerik:EditorDropDown>
                        <telerik:EditorDropDown Name="FontName">
                        </telerik:EditorDropDown>
                        <telerik:EditorDropDown Name="RealFontSize">
                        </telerik:EditorDropDown>
                    </telerik:EditorToolGroup>
                    <telerik:EditorToolGroup>
                        <telerik:EditorTool Name="AbsolutePosition" />
                        <telerik:EditorSeparator />
                        <telerik:EditorTool Name="Bold" ShortCut="CTRL+B" />
                        <telerik:EditorTool Name="Italic" ShortCut="CTRL+I" />
                        <telerik:EditorTool Name="Underline" ShortCut="CTRL+U" />
                        <telerik:EditorTool Name="StrikeThrough" />
                        <telerik:EditorSeparator />
                        <telerik:EditorTool Name="JustifyLeft" />
                        <telerik:EditorTool Name="JustifyCenter" />
                        <telerik:EditorTool Name="JustifyRight" />
                        <telerik:EditorTool Name="JustifyFull" />
                        <telerik:EditorTool Name="JustifyNone" />
                        <telerik:EditorSeparator />
                        <telerik:EditorTool Name="Indent" />
                        <telerik:EditorTool Name="Outdent" />
                        <telerik:EditorSeparator />
                        <telerik:EditorTool Name="InsertOrderedList" />
                        <telerik:EditorTool Name="InsertUnorderedList" />
                        <telerik:EditorSeparator />
                        <telerik:EditorTool Name="ToggleTableBorder" />
                        <telerik:EditorTool Name="XhtmlValidator" />
                    </telerik:EditorToolGroup>
                    <telerik:EditorToolGroup>
                        <telerik:EditorSplitButton Name="ForeColor">
                        </telerik:EditorSplitButton>
                        <telerik:EditorSplitButton Name="BackColor">
                        </telerik:EditorSplitButton>
                        <telerik:EditorDropDown Name="ApplyClass">
                        </telerik:EditorDropDown>
                        <telerik:EditorToolStrip Name="FormatStripper">
                        </telerik:EditorToolStrip>
                    </telerik:EditorToolGroup>
                    <telerik:EditorToolGroup Tag="DropdownToolbar">
                        <telerik:EditorSplitButton Name="InsertSymbol">
                        </telerik:EditorSplitButton>
                        <telerik:EditorToolStrip Name="InsertTable">
                        </telerik:EditorToolStrip>
                        <telerik:EditorToolStrip Name="InsertFormElement">
                        </telerik:EditorToolStrip>
                        <telerik:EditorSplitButton Name="InsertSnippet">
                        </telerik:EditorSplitButton>
                        <telerik:EditorTool Name="ImageMapDialog" />
                        <telerik:EditorDropDown Name="InsertCustomLink">
                        </telerik:EditorDropDown>
                        <telerik:EditorSeparator />
                        <telerik:EditorTool Name="ConvertToLower" />
                        <telerik:EditorTool Name="ConvertToUpper" />
                        <telerik:EditorSeparator />
                        <telerik:EditorDropDown Name="Zoom">
                        </telerik:EditorDropDown>
                        <telerik:EditorSplitButton Name="ModuleManager">
                        </telerik:EditorSplitButton>
                        <telerik:EditorTool Name="ToggleScreenMode" ShortCut="F11" />
                        <telerik:EditorTool Name="AboutDialog" />
                    </telerik:EditorToolGroup>
                </Tools>
                <Content>
    </Content>
            </telerik:RadEditor>
        </div>
        </form>
    </body>
    </html>
  2. Answer
    Rumen
    Admin
    Rumen avatar
    14028 posts

    Posted 04 Aug 2011 Link to this post

    Hi,


    All you need to do is to replace the

    <telerik:EditorDropDown Name="ApplyClass"></telerik:EditorDropDown>

    tag with the following one:

    <telerik:EditorTool Name="ApplyClass"></telerik:EditorTool>

    Greetings,
    Rumen
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top