Default Table Style in RadEditor

9 posts, 1 answers
  1. Trygve
    Trygve avatar
    9 posts
    Member since:
    Mar 2009

    Posted 10 Mar 2009 Link to this post

    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;
            <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?
  3. Rumen
    Admin
    Rumen avatar
    14362 posts

    Posted 12 Mar 2009 Link to this post

    Hello Trygve,

    My suggestion is to use the OnClientPasteHtml event property of RadEditor which is fired when the InsertTable command is executed. This event is useful in scenarios where the developers need to examine or modify the HTML to be pasted by an editor tool before it is inserted in the editor content area. You can obtain the content pasted via the TableWizard and InsertTable tools via the args.get_value() method, modify it and paste it in the editor. This operation will be faster that you current approach.

    Greetings,
    Rumen
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  5. Trygve
    Trygve avatar
    9 posts
    Member since:
    Mar 2009

    Posted 13 Mar 2009 Link to this post

    Hi and thanks for your answer, however I can not get this to work yet. I think I might be keeping to much of the old code when trying to implement the new way of solving it. Below is my new code:

                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 OnClientPasteHtml(sender, args) { 
                    var commandName = args.get_commandName(); 
                    var value = args.get_value(); 
     
                    if ("InsertTable" == commandName) { 
                        var cArea = sender.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]; 
                            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++) { 
                            curTds[curTds.length] = tds[j]; 
                            var oTd = tds[j]; 
                            if (!IsObjectInArray(oTd, curTds)) { 
                                oTd.style.border = "1px solid black"; 
                            } 
                        } 
                    }  
                } 

    RadEditor declaration:
    <telerik:RadEditor ID="RadEditor1" runat="server" OnClientPasteHtml="OnClientPasteHtml" EditModes="All" EnableResize="False" 
    EnableTheming="True" Skin="Vista" StripFormattingOptions="AllExceptNewLines" ToolbarMode="Default" ToolsFile="RadControls/Editor/BasicTools.xml" Width="100%" Height="300px"> 
    <Modules> 
    <telerik:EditorModule Name="RadEditorStatistics" Enabled="true" Visible="true" /> 
    </Modules> 
    </telerik:RadEditor> 

    Any help is appreciated. Thanks!


  7. Answer
    Rumen
    Admin
    Rumen avatar
    14362 posts

    Posted 16 Mar 2009 Link to this post

    Hello Trygve,

    Indeed, the solution is much simple. Here is how to implement the solution:

    <script type="text/javascript"> 
    function OnClientPasteHtml(sender, args)  
    {  
        var commandName = args.get_commandName();  
        var value = args.get_value(); //here is the content that will be inserted via the InsertTable dialog 
      
        if ("InsertTable" == commandName || "TableWizard" == commandName)  
        {  
            var div = document.createElement("DIV"); 
          
            div.innerHTML = value;
            
            var table = div.firstChild;  
            table.style.border = "1px solid red";  
            args.set_value(div.innerHTML); 
        }   
    }  
    </script> 
             
    <telerik:RadEditor ID="RadEditor1" runat="server" OnClientPasteHtml="OnClientPasteHtml" />  

    I hope this helps.

    Kind regards,
    Rumen
    the Telerik team


    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  8.
  9. Trygve
    Trygve avatar
    9 posts
    Member since:
    Mar 2009

    Posted 17 Mar 2009 Link to this post

    Thanks! That does exactly what I need :)
  11. Trygve
    Trygve avatar
    9 posts
    Member since:
    Mar 2009

    Posted 18 Mar 2009 Link to this post

    I modified the provided example a bit to include table cells. It now sets borders for the whole table including cells.

                function OnClientPastehtml(sender, args) { 
                    var commandName = args.get_commandName(); 
                    var value = args.get_value(); //here is the content that will be inserted via the InsertTable dialog  
     
                    if ("InsertTable" == commandName || "TableWizard" == commandName) { 
                        var div = document.createElement("DIV"); 
     
                        div.innerhtml = value; 
                        //Sets the border around the table 
                        var table = div.firstChild; 
                        table.style.border = "1px solid black"; 
                        table.style.width = "100%"; 
                        table.style.borderCollapse = "collapse"; 
                        //Sets the border around the cells 
                        var vTD = div.getElementsByTagName("TD"); 
                        for (var j = 0; j < vTD.length; j++) { 
                            var oTd = vTD[j]; 
                            oTd.style.border = "1px solid black"; 
                        } 
     
                        args.set_value(div.innerhtml); 
                    } 
                } 

  13. Rumen
    Admin
    Rumen avatar
    14362 posts

    Posted 18 Mar 2009 Link to this post

    Hi Trygve,

    I am glad that you have achieved your goal. If you would like you can post the whole solution in our code library system. I will also add you 1000 Telerik points for this.

    Greetings,
    Rumen
    the Telerik team


    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  14.
  15. Raghu R
    Raghu R avatar
    1 posts
    Member since:
    Nov 2012

    Posted 08 Jan 2014 Link to this post

    Hello Rumen,

    I need to achieve the same with <telerik:RadRichTextBox /> control.

    Could you please help me out ?

    Thanks
    Raghu R
  17. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5529 posts

    Posted 10 Jan 2014 Link to this post

    Hello Raghu,

    There is no RadRichTextBox control in the RadControls for ASP.NET AJAX suite, so I can only assume that you are looking for help with one of other bundles. If so, I would advise that you post in the respective forum for the control:
    http://www.telerik.com/community/forums/silverlight/richtextbox.aspx
    http://www.telerik.com/community/forums/winforms/richtextbox.aspx
    http://www.telerik.com/community/forums/wpf/richtextbox.aspx

    Regards,
    Marin Bratanov
    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