This is a migrated thread and some comments may be shown as answers.

Custom Tools not rendering correctly

9 Answers 188 Views

Editor

This is a migrated thread and some comments may be shown as answers.

Craig asked on 27 Mar 2019, 07:33 PM

customtools.png

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">

<html xmlns='http://www.w3.org/1999/xhtml'>

<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>

<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>

9 Answers, 1 is accepted

Accepted

answered on 01 Apr 2019, 12:40 PM

CustomIcons.zip

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.

answered on 03 Apr 2019, 04:05 PM

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)?

answered on 08 Apr 2019, 12:24 PM

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.

answered on 23 Apr 2019, 03:49 PM

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.

answered on 02 May 2019, 01:52 PM

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.