Apply custom Css on Context menu in radeditor

2 posts, 0 answers
  1. Gyan
    Gyan avatar
    13 posts
    Member since:
    Nov 2012

    Posted 11 Jul 2013 Link to this post

    Hi,
     I am using Rad Editor in my project that I have created with VS2010. In my project i have created a custom context menu. i want to apply custom css class on this context menu. please give me any idea or help.
    i have use following code.

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="b.aspx.vb" Inherits="ComplianceTable.b" %>

    <%@ 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">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <telerik:RadScriptManager ID="ScriptManager1" runat="server" />
               <telerik:RadEditor runat="server" ID="RadEditor1">
                <ContextMenus>
                    <telerik:EditorContextMenu Enabled="false" TagName="TD">
                    </telerik:EditorContextMenu>
                    <telerik:EditorContextMenu Enabled="false" TagName="TABLE">
                    </telerik:EditorContextMenu>
                    <telerik:EditorContextMenu TagName="TD">
                        <telerik:EditorTool Name="EditTable" Text="EditTable" ImageUrl="Images/modify.png" />
                        <telerik:EditorTool Name="SetCellProperties" />
                        <telerik:EditorTool Name="SetTableProperties" />
                    </telerik:EditorContextMenu>
                </ContextMenus>
                <Content>
                  
                   <table style="margin: 0pt auto; clear: both; width: 500px; height: 50px;">
        <thead>
            <tr>
                <th style="background-color: #ebf1dd;">Browser/OS</th>
                <th style="background-color: #ebf1dd;">Windows</th>
                <th style="background-color: #ebf1dd;">Mac OS</th>
                <th style="background-color: #ebf1dd;">Linux</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="text-align: left; vertical-align: middle;">&nbsp; Internet Explorer</td>
                <td style="background-color: #f2f2f2; height: 3px;">6.0+</td>
                <td style="background-color: #e5e0ec;">- </td>
                <td style="background-color: #dbeef3;">- </td>
            </tr>
            <tr>
                <td>&nbsp; Firefox</td>
                <td style="background-color: #f2f2f2;">1.5+</td>
                <td style="background-color: #e5e0ec;">1.5+</td>
                <td style="background-color: #dbeef3;">1.5+</td>
            </tr>
            <tr>
                <td>&nbsp; Google Chrome</td>
                <td style="background-color: #f2f2f2;">0.2+</td>
                <td style="background-color: #e5e0ec;">5.0+</td>
                <td style="background-color: #dbeef3;">5.0+</td>
            </tr>
        </tbody>    
    </table>
                </Content>
            </telerik:RadEditor>
    </div>
        </form>
    </body>
    </html>
  2. Ianko
    Admin
    Ianko avatar
    1864 posts

    Posted 16 Jul 2013 Link to this post

    Hi Gyan,

    You could do that by creating a custom CSS file and link it to your document. The context menus of the RadEditor are in a wrapper with class name reDropDownBody. You can use this class name as parent element to style the child elements. You can find more information about the RadEdtiror's class names in this help article.  

    I am attaching you an example project with custom stylization of the context menu, so that you could follow it as a guide for your CSS styles.

    Regards,
    Ianko
    Telerik
    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 the blog feed now.
Back to Top