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

RTL & LTR Buttons in the radEditor Tools

11 Answers 253 Views

Editor

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

11 Answers, 1 is accepted

answered on 25 Nov 2009, 11:27 AM

Hello Tarek,

You can try the following code:

<telerik:RadEditor ID="RadEditor1" runat="server">

<Tools>

<telerik:EditorToolGroup>

<telerik:EditorTool Name="RTL" ShowText="true" ShowIcon="false" />

<telerik:EditorTool Name="LTR" ShowText="true" ShowIcon="false" />

</telerik:EditorToolGroup>

</Tools>

</telerik:RadEditor>

Telerik.Web.UI.Editor.CommandList["RTL"] = function(commandName, editor, args)

{

var oElem = editor.getSelectedElement();

if (oElem && oElem.tagName == "P")

{

oElem.setAttribute("dir","rtl");

oElem.style.textAlign = "right";

}

else if (editor.getSelectionHtml())//There is some selection

{

var toPaste = "<p dir='rtl' style='text-align: right'>" + editor.getSelectionHtml() + "</p>";

editor.pasteHtml(toPaste);

}

Telerik.Web.UI.Editor.CommandList["LTR"] = function(commandName, editor, args)

{

var oElem = editor.getSelectedElement();

if (oElem && oElem.tagName == "P")

{

oElem.setAttribute("dir","ltr");

oElem.style.textAlign = "left";

}

else if (editor.getSelectionHtml())//There is some selection

{

var toPaste = "<p dir='ltr' style='text-align: left'>" + editor.getSelectionHtml() + "</p>";

editor.pasteHtml(toPaste);

}

</script>

Kind regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 09 Dec 2010, 12:13 PM

rtl-ltr.jpg

Hello,

Thank you for your post, but unfortunatily it is not working:

Here is my code:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="FAQsSubUserControl.ascx.cs" Inherits="FAQsSubUserControl" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<table id="Table2" cellspacing="2" cellpadding="1" width="100%" border="1" rules="none"

style="BORDER-COLLAPSE: collapse">

<tr align="right">

<td colspan="2"><b>FAQs Details</b></td>

</tr>

<tr align="right">

<td>

<table id="Table3" cellspacing="1" cellpadding="1" width="100%" border="0">

<tr>

<td></td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

<asp:Label ID="FAQsGrpLabel" runat="server" Text="<%$ Resources:Resource, SecureSqlServerFAQsRadGridsSubWUCFAQsGrpLabel %>"></asp:Label>

</td>

<td>

<telerik:RadTextBox id="FAQsGrpRadTextBox" runat="server"

Text='<%# DataBinder.Eval( Container, "DataItem.FAQsGrp") %>' tabIndex="2" Width="500px"></telerik:RadTextBox>

</td>

</tr>

<tr>

<td>

<asp:Label ID="QustnLabel" runat="server" Text="<%$ Resources:Resource, SecureSqlServerFAQsRadGridsSubWUCQustnLabel %>"></asp:Label>

</td>

<td>

<telerik:RadTextBox id="QustnRadTextBox" runat="server"

Text='<%# DataBinder.Eval( Container, "DataItem.Qustn") %>' TextMode="MultiLine" Rows="6" tabIndex="3" Width="500px"></telerik:RadTextBox>

</td>

</tr>

<tr>

<td>

<asp:Label ID="AnsrLabel" runat="server" Text="<%$ Resources:Resource, SecureSqlServerFAQsRadGridsSubWUCAnsrLabel %>"></asp:Label>

</td>

<td>

<telerik:RadEditor ID="AnsrRadEditor" Content='<%# DataBinder.Eval( Container, "DataItem.Ansr") %>' runat="server">

<Tools>

<telerik:EditorToolGroup>

<telerik:EditorTool Name="RTL" ShowText="true" ShowIcon="false" />

<telerik:EditorTool Name="LTR" ShowText="true" ShowIcon="false" />

</telerik:EditorToolGroup>

</Tools>

</telerik:RadEditor>

<script type="text/javascript">

Telerik.Web.UI.Editor.CommandList["RTL"] = function (commandName, editor, args) {

var oElem = editor.getSelectedElement();

if (oElem && oElem.tagName == "P") {

oElem.setAttribute("dir", "rtl");

oElem.style.textAlign = "right";

}

else if (editor.getSelectionHtml())//There is some selection

{

var toPaste = "<p dir='rtl' style='text-align: right'>" + editor.getSelectionHtml() + "</p>";

editor.pasteHtml(toPaste);

}

Telerik.Web.UI.Editor.CommandList["LTR"] = function (commandName, editor, args) {

var oElem = editor.getSelectedElement();

if (oElem && oElem.tagName == "P") {

oElem.setAttribute("dir", "ltr");

oElem.style.textAlign = "left";

}

else if (editor.getSelectionHtml())//There is some selection

{

var toPaste = "<p dir='ltr' style='text-align: left'>" + editor.getSelectionHtml() + "</p>";

editor.pasteHtml(toPaste);

}

</script>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td align="right" colspan="2">

<asp:button id="btnUpdate" text="Update" runat="server" CommandName="Update" Visible='<%# !(DataBinder.Eval( Container, "DataItem") is Telerik.Web.UI.GridInsertionObject) %>'></asp:button>

<asp:button id="btnInsert" text="Insert" runat="server" CommandName="PerformInsert" Visible='<%# DataBinder.Eval( Container, "DataItem") is Telerik.Web.UI.GridInsertionObject %>'></asp:button>

<asp:button id="btnCancel" text="Cancel" runat="server" causesvalidation="False" commandname="Cancel"></asp:button></td>

</tr>

</table>

After running the page which contains the above usercontrol, and ckick on "RTL" or "LTR" buttons I recieve an error message (View the attached screen shot.

Please, I need your help,
It is apprecited to send me the modified code.

Regards,
Bader

answered on 09 Dec 2010, 08:23 PM

Hi All

BADER
check this page out
it is working
just do the switching i mentioed above between design and htlm

!!!!!!!!!

regards to all

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="XForm.aspx.cs" Inherits="HrhMoiAidMoneyOffice.XForm" %>

<%@ 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="RadScriptManager1" Runat="server">

</telerik:RadScriptManager>

<telerik:RadEditor ID="RadEditor1" runat="server">

<Colors>

<telerik:EditorColor Title="New EditorColor" Value="" />

</Colors>

<Paragraphs>

<telerik:EditorParagraph Tag="" Title="New EditorParagraph" />

</Paragraphs>

<Tools>

<telerik:EditorToolGroup>

<telerik:EditorTool Name="Bold" />

<telerik:EditorTool Name="Italic" />

<telerik:EditorTool Name="Underline" />

<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="Superscript" />

<telerik:EditorTool Name="Subscript" />

<telerik:EditorSeparator />

<telerik:EditorTool Name="ConvertToLower" />

<telerik:EditorTool Name="ConvertToUpper" />

<telerik:EditorTool Name="Indent" />

<telerik:EditorTool Name="Outdent" />

<telerik:EditorTool Name="InsertOrderedList" />

<telerik:EditorTool Name="InsertUnorderedList" />

<telerik:EditorTool Name="AbsolutePosition" />

<telerik:EditorTool Name="LinkManager" />

<telerik:EditorTool Name="Unlink" />

<telerik:EditorTool Name="ToggleTableBorder" />

<telerik:EditorTool Name="ToggleScreenMode" />

</telerik:EditorToolGroup>

<telerik:EditorToolGroup>

<telerik:EditorSplitButton Name="Undo" Width="80px">

</telerik:EditorSplitButton>

<telerik:EditorSplitButton Name="Redo" Width="80px">

</telerik:EditorSplitButton>

<telerik:EditorSeparator />

<telerik:EditorTool Name="Cut" />

<telerik:EditorTool Name="Copy" />

<telerik:EditorTool Name="Paste" ShortCut="CTRL+V" />

<telerik:EditorSeparator />

<telerik:EditorTool Name="PasteFromWord" />

<telerik:EditorTool Name="PasteFromWordNoFontsNoSizes" />

<telerik:EditorTool Name="PastePlainText" />

<telerik:EditorTool Name="PasteAsHtml" />

<telerik:EditorTool Name="PasteHtml" />

<telerik:EditorSeparator />

<telerik:EditorTool Name="Print" />

<telerik:EditorTool Name="FindAndReplace" />

<telerik:EditorTool Name="SelectAll" />

<telerik:EditorSeparator />

<telerik:EditorTool Name="InsertGroupbox" />

<telerik:EditorTool Name="InsertParagraph" />

<telerik:EditorTool Name="InsertHorizontalRule" />

<telerik:EditorSplitButton Name="InsertSnippet" Width="80px">

</telerik:EditorSplitButton>

<telerik:EditorSeparator />

<telerik:EditorTool Name="InsertDate" />

<telerik:EditorTool Name="InsertTime" />

<telerik:EditorSeparator />

<telerik:EditorTool Name="AboutDialog" />

<telerik:EditorTool Name="Help" />

</telerik:EditorToolGroup>

<telerik:EditorToolGroup>

<telerik:EditorTool Name="RTL" ShowText="true" ShowIcon="false" />

<telerik:EditorTool Name="LTR" ShowText="true" ShowIcon="false" />

</telerik:EditorToolGroup>

</Tools>

<Content>

</Content>

</telerik:RadEditor>

<script type="text/javascript">

Telerik.Web.UI.Editor.CommandList["RTL"] = function (commandName, editor, args) {

var oElem = editor.getSelectedElement();

if (oElem && oElem.tagName == "P") {

oElem.setAttribute("dir", "rtl");

oElem.style.textAlign = "right";

}

else if (editor.getSelectionHtml())//There is some selection

{

var toPaste = "<p dir='rtl' style='text-align: right'>" + editor.getSelectionHtml() + "</p>";

editor.pasteHtml(toPaste);

}

Telerik.Web.UI.Editor.CommandList["LTR"] = function (commandName, editor, args) {

var oElem = editor.getSelectedElement();

if (oElem && oElem.tagName == "P") {

oElem.setAttribute("dir", "ltr");

oElem.style.textAlign = "left";

}

else if (editor.getSelectionHtml())//There is some selection

{

var toPaste = "<p dir='ltr' style='text-align: left'>" + editor.getSelectionHtml() + "</p>";

editor.pasteHtml(toPaste);

}

</script>

</div>

</form>

</body>

</html>

answered on 10 Dec 2010, 04:13 PM

Hi guys,

I tested provided sample page and user control and they are both working as expected.

Could you please provide more detailed information on the specific scenarios?

Which version of RadControls for ASP.NET AJAX and .NET Framework are used in the application?
Under which browser and its version the problem occurs?
Are there any javascript errors thrown during the loading of the page?

@Bader:
This error indicates that the command assigned to the custom button is not yet registered. Please note that the command name and the tool's name have to be identical - JavaScript is a case sensitive language.

Kind regards,
Dobromir
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.

answered on 13 Dec 2010, 02:11 PM

Hello,

Thank you for your reply.
I'm using the vesion 2009.3.1314.20. and the problem is occuring using all browsers.

Here is my code:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="EmailsContentSubUserControl.ascx.cs" Inherits="EmailsContentSubUserControl" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<table id="Table2" cellspacing="2" cellpadding="1" width="100%" border="1" rules="none"

style="BORDER-COLLAPSE: collapse">

<tr align="right">

<td>

<table id="Table3" cellspacing="1" cellpadding="1" width="100%" border="0">

<tr>

<td></td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

<asp:Label ID="ETypeLabel" runat="server" Text="<%$ Resources:Resource, SecureSqlServerEmailsContentRadGridsSubWUCETypeLabel %>"></asp:Label>

</td>

<td>

<telerik:RadTextBox id="ETypeRadTextBox" runat="server"

Text='<%# DataBinder.Eval( Container, "DataItem.EType") %>' tabIndex="2" Width="500px"></telerik:RadTextBox>

</td>

</tr>

<tr>

<td>

<asp:Label ID="ESubjectLabel" runat="server" Text="<%$ Resources:Resource, SecureSqlServerEmailsContentRadGridsSubWUCESubjectLabel %>"></asp:Label>

</td>

<td>

<telerik:RadTextBox id="ESubjectRadTextBox" runat="server"

Text='<%# DataBinder.Eval( Container, "DataItem.ESubject") %>' TextMode="MultiLine" Rows="6" tabIndex="3" Width="500px"></

telerik:RadTextBox>

</td>

</tr>

<tr>

<td>

<asp:Label ID="EContentLabel" runat="server" Text="<%$ Resources:Resource, SecureSqlServerEmailsContentRadGridsSubWUCEContentLabel %>"></asp:Label>

</td>

<td>

<telerik:RadEditor ID="EContentRadEditor" Content='<%# DataBinder.Eval( Container, "DataItem.EContent") %>' runat="server">

<Colors>

<telerik:EditorColor Title="New EditorColor" Value="" />

</Colors>

<Paragraphs>

<telerik:EditorParagraph Tag="" Title="New EditorParagraph" />

</Paragraphs>

<Tools>

<telerik:EditorToolGroup>

<telerik:EditorTool Name="Bold" />

<telerik:EditorTool Name="Italic" />

<telerik:EditorTool Name="Underline" />

<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="Superscript" />

<telerik:EditorTool Name="Subscript" />

<telerik:EditorSeparator />

<telerik:EditorTool Name="ConvertToLower" />

<telerik:EditorTool Name="ConvertToUpper" />

<telerik:EditorTool Name="Indent" />

<telerik:EditorTool Name="Outdent" />

<telerik:EditorTool Name="InsertOrderedList" />

<telerik:EditorTool Name="InsertUnorderedList" />

<telerik:EditorTool Name="AbsolutePosition" />

<telerik:EditorTool Name="LinkManager" />

<telerik:EditorTool Name="Unlink" />

<telerik:EditorTool Name="ToggleTableBorder" />

<telerik:EditorTool Name="ToggleScreenMode" />

</telerik:EditorToolGroup>

<telerik:EditorToolGroup>

<telerik:EditorSplitButton Name="Undo" Width="80px">

</telerik:EditorSplitButton>

<telerik:EditorSplitButton Name="Redo" Width="80px">

</telerik:EditorSplitButton>

<telerik:EditorSeparator />

<telerik:EditorTool Name="Cut" />

<telerik:EditorTool Name="Copy" />

<telerik:EditorTool Name="Paste" ShortCut="CTRL+V" />

<telerik:EditorSeparator />

<telerik:EditorTool Name="PasteFromWord" />

<telerik:EditorTool Name="PasteFromWordNoFontsNoSizes" />

<telerik:EditorTool Name="PastePlainText" />

<telerik:EditorTool Name="PasteAsHtml" />

<telerik:EditorTool Name="PasteHtml" />

<telerik:EditorSeparator />

<telerik:EditorTool Name="Print" />

<telerik:EditorTool Name="FindAndReplace" />

<telerik:EditorTool Name="SelectAll" />

<telerik:EditorSeparator />

<telerik:EditorTool Name="InsertGroupbox" />

<telerik:EditorTool Name="InsertParagraph" />

<telerik:EditorTool Name="InsertHorizontalRule" />

<telerik:EditorSplitButton Name="InsertSnippet" Width="80px">

</telerik:EditorSplitButton>

<telerik:EditorSeparator />

<telerik:EditorTool Name="InsertDate" />

<telerik:EditorTool Name="InsertTime" />

<telerik:EditorSeparator />

<telerik:EditorTool Name="AboutDialog" />

<telerik:EditorTool Name="Help" />

</telerik:EditorToolGroup>

<telerik:EditorToolGroup>

<telerik:EditorTool Name="RTL" ShowText="true" ShowIcon="false" />

<telerik:EditorTool Name="LTR" ShowText="true" ShowIcon="false" />

</telerik:EditorToolGroup>

</Tools>

<Content>

</Content>

</telerik:RadEditor>

<script type="text/javascript">

Telerik.Web.UI.Editor.CommandList["RTL"] = function (commandName, editor, args) {

var oElem = editor.getSelectedElement();

if (oElem && oElem.tagName == "P") {

oElem.setAttribute("dir", "rtl");

oElem.style.textAlign = "right";

}

else if (editor.getSelectionHtml())//There is some selection

{

var toPaste = "<p dir='rtl' style='text-align: right'>" + editor.getSelectionHtml() + "</p>";

editor.pasteHtml(toPaste);

}

Telerik.Web.UI.Editor.CommandList["LTR"] = function (commandName, editor, args) {

var oElem = editor.getSelectedElement();

if (oElem && oElem.tagName == "P") {

oElem.setAttribute("dir", "ltr");

oElem.style.textAlign = "left";

}

else if (editor.getSelectionHtml())//There is some selection

{

var toPaste = "<p dir='ltr' style='text-align: left'>" + editor.getSelectionHtml() + "</p>";

editor.pasteHtml(toPaste);

}

</script>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td align="right" colspan="2">

<asp:button id="btnCancel" text="Cancel" runat="server" causesvalidation="False" commandname="Cancel"></asp:button></td>

</tr>

</table>

Please, I need your help,
It is appreciated to send me the modified code.

Regards,
Bader

answered on 16 Dec 2010, 01:14 PM

Hi guys,

I tested the provided sample page and user control using the version pointed by Bader and the latest one but was not able to reproduce the problems once again.

To be able to run the usercontrol I had to remove any controls using DataBinder. The following video demonstrates my test, could you please see if I am doing something wrong?
http://screencast.com/t/dIX0ecFG9

In order to be able to provide further assistance we will need reliable steps to reproduce the problem locally. If possible could you please open a support tickets and provide a sample fully runnable projects demonstrating the issue so we can investigate it further?

Best wishes,
Dobromir
the Telerik team

answered on 27 Jan 2011, 09:49 AM

Hi Tarek,

If I understand you correctly, you have a RadGrid with pop-up edit form as a user control with RadEditor in it. In this case, the JavaScript that registers the custom commands inside the user control.

If this is not the case, could you please provide more information on the specific scenario? A sample page demonstrating the issue will be of great help solving the issue.

All the best,
Dobromir
the Telerik team

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

RTL &amp; LTR Buttons in the radEditor Tools

11 Answers, 1 is accepted

RTL & LTR Buttons in the radEditor Tools