Custom Tools not rendering correctly

10 posts, 1 answers
  1. Craig
    Craig avatar
    26 posts
    Member since:
    Jan 2019

    Posted 27 Mar Link to this post

    I have an editor that I can't seem to get my custom tools loaded into correctly. The group and tools load (the custom events are working also), but the text on the tools doesn't.  All I see is the groups, with buttons that have a gear icon on them (but the tooltips correctly show the text). Since the editor shouldn't have the custom tools in every user scenario, I left this part to be loaded in by the code behind and the rest of the tools are loaded by an XML file.  Not sure if it matters, but I am doing this with the Ribbon appearance. And the aspx page is being rendered inside of an iFrame.

    cs code (called from Page_Load)

    private void LoadFileTab()
    {
        //----------------------------------------------------
        // Export Group (File Tab)
        //----------------------------------------------------
        EditorToolGroup exportGroup = new EditorToolGroup();
        exportGroup.Tab = "File";
        exportGroup.Tag = "Export";
        theEditor.Tools.Insert(0, exportGroup);
     
        EditorTool exportDOCX = new EditorTool();
        exportDOCX.Name = "ExportDOCX";
        exportDOCX.Text = "Export as DOCX";
        exportDOCX.ShowText = true;
        exportDOCX.Visible = true;
        exportDOCX.RenderMode = RenderMode.Auto;
        exportGroup.Tools.Add(exportDOCX);
     
        EditorTool exportPDF = new EditorTool();
        exportPDF.Name = "ExportPDF";
        exportPDF.Text = "Export as PDF";
        exportPDF.ShowText = true;
        exportPDF.Visible = true;
        exportPDF.RenderMode = RenderMode.Classic;
        exportGroup.Tools.Add(exportPDF);
     
        //----------------------------------------------------
        // Save/Submit Group (File Tab)
        //----------------------------------------------------
        EditorToolGroup saveGroup = new EditorToolGroup();
        saveGroup.Tab = "File";
        saveGroup.Tag = "Save/Submit";
        theEditor.Tools.Insert(0, saveGroup);
     
        EditorTool save = new EditorTool();
        save.Name = "Save";
        save.Text = "Save Draft";
        save.ShowText = true;
        save.Visible = true;
        save.RenderMode = RenderMode.Lightweight;
        saveGroup.Tools.Add(save);
     
        EditorTool submit = new EditorTool();
        submit.Name = "Submit";
        submit.Text = "Submit Draft";
        submit.ShowText = true;
        submit.Visible = true;
        submit.RenderMode = RenderMode.Native;
        saveGroup.Tools.Add(submit);
    }

     

    aspx

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="StandardEditor.aspx.cs" Inherits="FIS.Presentation.EWAPPM.DocumentScreens.DocEditor" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
     
        <script type="text/javascript">
            function OnClientLoad(editor, args)
            {
                editor.fire("ToggleScreenMode");
            }
     
        </script>
     
        <head runat="server">
            <link href="../Content/Telerik/styles.css" rel="stylesheet" type="text/css" />
            <link href="./Telerik/styles.css" rel="stylesheet" />
            <title></title>
        </head>
      
        <body>
            <form id="form1" runat="server">
                <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
                <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="false" />
                <div class="demo-containers">
                    <div class="demo-container">
                        <telerik:RadEditor RenderMode="Lightweight" Skin="MetroTouch" ID="theEditor" EnableTrackChanges="true" EnableComments="true" runat="server" Width="100%" ToolsFile="./EditorTools/StandardEditorTools.xml" EnableResize="False" ContentAreaMode="Div" DialogHandlerUrl="~/Telerik.Web.UI.DialogHandler.axd" ToolbarMode="RibbonBar" OnClientLoad="OnClientLoad" ContentFilters="DefaultFilters,PdfExportFilter">
                            <TrackChangesSettings CanAcceptTrackChanges="true" UserCssId="reU0"></TrackChangesSettings>              
                             
                            <ExportSettings OpenInNewWindow="true">
                                <Docx />
                                <Pdf />
                            </ExportSettings>
     
                            <ImageManager EnableAsyncUpload="true" >
                            </ImageManager>
     
                            <Content>
                            </Content>
     
                            <Modules>
                                <telerik:EditorModule Name="RadEditorHtmlInspector" Enabled="false" />
                                <telerik:EditorModule Name="RadEditorNodeInspector" Enabled="false" />
                                <telerik:EditorModule Name="RadEditorDomInspector" Enabled="false" />
                                <telerik:EditorModule Name="RadEditorStatistics" Enabled="false" />
                            </Modules>
     
                        </telerik:RadEditor>
                        <script type="text/javascript">
                            Telerik.Web.UI.Editor.CommandList["ExportPDF"] = function (commandName, editor, args)
                            {
                                __doPostBack("", commandName);
                            }
     
                            Telerik.Web.UI.Editor.CommandList["ExportDOCX"] = function (commandName, editor, args)
                            {
                                __doPostBack("", commandName);
                            }
     
                            Telerik.Web.UI.Editor.CommandList["Save"] = function (commandName, editor, oTool)
                            {
                                fireAjaxRequest("Save");
                            }
     
                            Telerik.Web.UI.Editor.CommandList["Submit"] = function (commandName, editor, oTool)
                            {
                                fireAjaxRequest("Submit");
                            }
                        </script>
                    </div>
                </div>
                <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
                    <AjaxSettings>
                        <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                            <UpdatedControls>
                                <telerik:AjaxUpdatedControl ControlID="theEditor" LoadingPanelID="RadAjaxLoadingPanel1" />
                                <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" />
                            </UpdatedControls>
                        </telerik:AjaxSetting>
                    </AjaxSettings>
                </telerik:RadAjaxManager>
                <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
                    <script type="text/javascript">   
                        function fireAjaxRequest(operation)   
                        {      
                            var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");      
                            ajaxManager.ajaxRequest(operation);   
                        }   
                    </script>
                </telerik:RadScriptBlock>
                <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Visible="False">
                </telerik:RadAjaxLoadingPanel>
            </form>
        </body>
    </html>

     

  2. Answer
    Rumen
    Admin
    Rumen avatar
    13980 posts

    Posted 01 Apr Link to this post

    Hi Craig,

    The syntax for custom ribbonbar icons is:

    <style>
        .re<comman_name> {
            background-image: url('<path_to_icon_file>');
            background-size: 22px;
        }
     
            .re<comman_name>.reToolIcon:before {
                content: none; /*this hides the default font icon*/
            }
     
        .reExportPDF {
            background-image: url('images/Export_PDF.gif');
            background-size: 22px;
        }
     
            .reExportPDF.reToolIcon:before {
                content: none;
            }
     
        .reExportDOCX {
            background-image: url('images/Export_DOCX.gif');
            background-size: 22px;
        }
     
            .reExportDOCX.reToolIcon:before {
                content: none;
            }
     
        .reSave {
            background-image: url('images/Save.gif');
            background-size: 22px;
        }
     
            .reSave.reToolIcon:before {
                content: none;
            }
    </style>


    For your convenience I have attached my test files.


    Best regards,
    Rumen
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Craig
    Craig avatar
    26 posts
    Member since:
    Jan 2019

    Posted 01 Apr in reply to Rumen Link to this post

    You're awesome.  Thank you so much for all of your help!
  4. Rumen
    Admin
    Rumen avatar
    13980 posts

    Posted 01 Apr Link to this post

    Thank you for the nice words! Glad that the solution helps!

    Regards,
    Rumen
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Craig
    Craig avatar
    26 posts
    Member since:
    Jan 2019

    Posted 03 Apr in reply to Rumen Link to this post

    Rumen,

      Now that I was able to get the icons working correctly, can you tell me if there is a way to set the tool "size" from code behind?  I have defined most of the tools using the tools XML file, but not all tools will be available in all situations (based on user roles and which page I'm rendering the editor into).  So I either need to be able to add them from code behind, or I can add them in the XML, but have to be able to remove or disable them from code behind.  Any thoughts on how to best accomplish that (besides making multiple versions of the aspx, or the toolset file)?

  6. Rumen
    Admin
    Rumen avatar
    13980 posts

    Posted 08 Apr Link to this post

    Hi Craig,

    You can control the size of the buttons of the Ribbonbar using this API - tool1.Attributes["size"] = "Small";

        private void Page_Load(object sender, EventArgs e)
        {
            // Add new section group in Home tab
            EditorToolGroup fontGroup = new EditorToolGroup();
            // Define the place of the new toolgroup via the Tab property.
            fontGroup.Tab = "Home";
            // And the group by using the Tag property.
            fontGroup.Tag = "Font";
     
            EditorTool tool1 = new EditorTool("Bold");
            tool1.Attributes["size"] = "Small"; // Set "Large" for large button size, and Medium for medium
            fontGroup.Tools.Add(tool1);
     
    ...

    You can find more information at 
    https://docs.telerik.com/devtools/aspnet-ajax/controls/editor/functionality/toolbars/using-ribbonbar#changing-tools-in-ribbonbar
    https://docs.telerik.com/devtools/aspnet-ajax/controls/ribbonbar/appearance-and-styling/item-sizes

    Regards,
    Rumen
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  7. Craig
    Craig avatar
    26 posts
    Member since:
    Jan 2019

    Posted 08 Apr in reply to Rumen Link to this post

    Perfect! Thank you yet again!
  8. Rumen
    Admin
    Rumen avatar
    13980 posts

    Posted 08 Apr Link to this post

    You are welcome!

    Regards,
    Rumen
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  9. Craig
    Craig avatar
    26 posts
    Member since:
    Jan 2019

    Posted 23 Apr in reply to Rumen Link to this post

    You've been a big help with all of the questions.  I have another that is related to this question... How would I configure the CSS to display an image for a "Large" tool?

    EditorTool lockInfo = new EditorTool();
    lockInfo.Name = "EmailLockedBy";
    lockInfo.Text = "Locked by Mark Arkanum<br/>Click here to email user";
    lockInfo.ShowText = true;
    lockInfo.ShowIcon = true;
    lockInfo.Visible = true;
    lockInfo.ImageUrl = "~/Images/EditorImages/delete.png";
    lockInfo.Attributes["size"] = "Large";
    lockGroup.Tools.Add(lockInfo);

     

    .reEmailLockedBy {
        background-image: url(../../Images/EditorImages/email.png);
        background-size: 22px;
        background-position-x: center;
        background-position-y: center;
    }
     
        .reEmailLockedBy.reToolIcon:before {
            content: none;
        }

     

    Also, is there a way to make a tooltip that is different than the Text of the tool?

    My application allows multiple users to collaborate on a document, but I need to be able to lock and unlock that document so that only 1 person is able to modify it at a given time. The button I'm working on above will allow a user to email the person who has it locked.

    Hopefully my questions prove helpful for others in a similar situation.

  10. Rumen
    Admin
    Rumen avatar
    13980 posts

    Posted 02 May Link to this post

    Thank you for your kind words!

    Here is an example how to set an image for an icon of a large ribbon bar custom button:

    <style>
        .RadEditor .RadRibbonBar .reRibbonTool .rrbImagePlaceholder img {
            display: inline !important;
        }
     
        .reEmailLockedBy:before {
            content: none !important;
        }
    </style>

    The idea is to hide the custom font icon and to show the initially hidden image.

    You can also check this article: https://docs.telerik.com/devtools/aspnet-ajax/controls/editor/functionality/toolbars/buttons/set-button-state#lightweight-rendermode.

    As to the tooltip: the possibility to have separate functionality for the ToolTip from the Button name is in the ToDo list, but with low priority due to lack of requests for its implementation.

    You can achieve it client-side using the provided solution below:

    <script type="text/javascript">
        function OnClientLoad(editor, args) {
            var buttonsHolder = $get(editor.get_id() + "Top");
            
            var buttons = buttonsHolder.getElementsByTagName("A");
            for (var i = 0; i < buttons.length; i++) {
                if (buttons[i].title == "Locked by Mark Arkanum<br/>Click here to email user") {
                    buttons[i].title = "New Tooltip";
                }
            }
        }
    </script>
    <telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad"></telerik:RadEditor>


    Regards,
    Rumen
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top