Hi,
We want to have the default style for tables set to style="border: 1px solid black;". We know how to attain this from manipulating the stylesheet, but this will not add the tag to HTML mode. So when storing to the DB it will not store the border properties, and when retrieving the data for a report it will not have any borders.
We are now using OnClientCommandExecuting and OnClientCommandExecuted to manipulate the table border formatting. But this way of doing it is causing our pages with many radeditor controls to load extremely slow.
Code used for JS function call manipulation;
Is there any other way of attaining the desired behaviour?
We want to have the default style for tables set to style="border: 1px solid black;". We know how to attain this from manipulating the stylesheet, but this will not add the tag to HTML mode. So when storing to the DB it will not store the border properties, and when retrieving the data for a report it will not have any borders.
We are now using OnClientCommandExecuting and OnClientCommandExecuted to manipulate the table border formatting. But this way of doing it is causing our pages with many radeditor controls to load extremely slow.
Code used for JS function call manipulation;
<telerik:RadEditor |
ID="RadEditor1" |
runat="server" |
Width="100%" |
ToolsFile="../RadControls/Editor/BasicTools.xml" |
skin="Vista" |
EditModes="Design" |
EnableResize="False" |
EnableTheming="True" |
StripFormattingOptions="AllExceptNewLines" |
ToolbarMode="Default" |
OnClientCommandExecuting="OnClientCommandExecuting" |
OnClientCommandExecuted="OnClientCommandExecuted"> |
</telerik:RadEditor> |
var curTables = []; |
var curTds = []; |
function IsObjectInArray(elem, array) |
{ |
if (!array || !array.length) return false; |
for (var i=0; i < array.length; i++) |
{ |
if (elem == array[i]) return true; |
} |
return false; |
} |
function OnClientCommandExecuting(editor, args) { |
var commandName = args.get_commandName(); |
if ("InsertTable" == commandName) { |
var cArea = editor.get_contentArea(); |
var tables = cArea.getElementsByTagName("TABLE"); |
var tds = cArea.getElementsByTagName("TD"); |
for (var i = 0; i < tables.length; i++) { |
curTables[curTables.length] = tables[i]; |
} |
for (var j = 0; j < tds.length; j++) { |
curTds[curTds.length] = tds[j]; |
} |
} |
} |
function OnClientCommandExecuted(editor, args) { |
var commandName = args.get_commandName(); |
if ("InsertTable" == commandName) { |
var cArea = editor.get_contentArea(); |
var tables = cArea.getElementsByTagName("TABLE"); |
var tds = cArea.getElementsByTagName("TD"); |
for (var i = 0; i < tables.length; i++) { |
var oTable = tables[i]; |
if (!IsObjectInArray(oTable, curTables)) { |
oTable.style.borderCollapse = "collapse"; |
oTable.style.border = "Black 1px solid"; |
oTable.style.width = "100%"; |
} |
} |
for (var j = 0; j < tds.length; j++) { |
var oTd = tds[j]; |
if (!IsObjectInArray(oTd, curTds)) { |
oTd.style.border = "1px solid black"; |
} |
} |
} |
} |
Is there any other way of attaining the desired behaviour?