Inserting a new table with 100% width, using the “InsertTable” tool.

Thread is closed for posting
9 posts, 0 answers
  1. 63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 15 Mar 2006 Link to this post

     

    Requirements

    r.a.d.editor version

    5.0+

    programming language

     JavaScript

    .NET version

    any

    browser support

    all supported by r.a.d.editor


    Attached is an aspx page that demonstrates how to insert a new table with 100% width, using the “InsertTable” tool.

    The javascript code checks whether there are existing tables in the content and applies the 100% width to the newly inserted table only.

    To run the example, simply extract the content of the archive to your web application's root folder and load the aspx file into your browser.
  3. A4CFDBDD-C536-4D7C-94A2-0628E0B59956
    A4CFDBDD-C536-4D7C-94A2-0628E0B59956 avatar
    3 posts
    Member since:
    Jan 2008

    Posted 16 Jan 2008 Link to this post

    Hey!

    How can i write

    oTable.style.border-left = "Black 1px solid" 
  5. 1BD107D2-4742-4FFC-A719-21E8E03021A3
    1BD107D2-4742-4FFC-A719-21E8E03021A3 avatar
    298 posts
    Member since:
    Sep 2012

    Posted 16 Jan 2008 Link to this post

    Hi Thomas,

    If oTable is the element on which you want to set left border you can use the following syntax:
     
    oTable.style.borderLeft = "black 1px solid"; 


    All the best,
    George

    the telerik team
  7. A4CFDBDD-C536-4D7C-94A2-0628E0B59956
    A4CFDBDD-C536-4D7C-94A2-0628E0B59956 avatar
    3 posts
    Member since:
    Jan 2008

    Posted 17 Jan 2008 Link to this post

    Thanks George!
     
    I also need to set the TH/TD borders.
    Example?

    - Thomas
  9. 1BD107D2-4742-4FFC-A719-21E8E03021A3
    1BD107D2-4742-4FFC-A719-21E8E03021A3 avatar
    298 posts
    Member since:
    Sep 2012

    Posted 17 Jan 2008 Link to this post

    Hi Thomas,

    If you have set some id of your TH element for example like

        <th id="oTh">

    You can set the border with JavaScript with this:

        var oTh = document.getElementById("oTh");
        oTh.style.border = "1px solid green";

    The same is with TD, you just need to use its id.

    Best wishes,
    George
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  11. A4CFDBDD-C536-4D7C-94A2-0628E0B59956
    A4CFDBDD-C536-4D7C-94A2-0628E0B59956 avatar
    3 posts
    Member since:
    Jan 2008

    Posted 17 Jan 2008 Link to this post

    Hello again!

    Yes, but when you insert a table without using wizard the TD/TH is missing the ID-Tag. Default?

    My mission is to see all of the table lines on insert without wizard. Why is default border 0px?



    - Thomas
  13. 1BD107D2-4742-4FFC-A719-21E8E03021A3
    1BD107D2-4742-4FFC-A719-21E8E03021A3 avatar
    298 posts
    Member since:
    Sep 2012

    Posted 17 Jan 2008 Link to this post

    Hello Thomas,

    The purpose of the wizard is to provide the styling and attributes that are not included in the basic table insert. When you insert a table without the wizard it is expected behavior to be shown basic table. That is why the table does not have any borders or colors.

    Nevertheless I have attached aspx page that demonstrates your desired behavior. Feel free to use it for your projects.

    All the best,
    George
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  15. DD6D2FC0-83F7-4BCB-973D-606FE1E4E087
    DD6D2FC0-83F7-4BCB-973D-606FE1E4E087 avatar
    41 posts
    Member since:
    Feb 2008

    Posted 15 Aug 2008 Link to this post

    Just posting an update if anyone wants to do this with the new ASP.NET AJAX version. Tested and works on 2008 Q2 723 version.

    Replace the two functions in the project zip with these updated ones.

    Regards
    Clyde

                    function OnClientCommandExecuting(editor, args)  
                    {  
                       //The command name  
                       var commandName = args.get_commandName();     
                        if ("InsertTable" == commandName) {  
                            var cArea = editor.get_contentArea();  
                            var tables = cArea.getElementsByTagName("TABLE");  
                            for (var i = 0; i < tables.length; i++) {  
                                curTables[curTables.length] = tables[i];  
                            }  
                        }  
                    }  
                    function OnClientCommandExecuted(editor, args)  
                    {  
                       //The command name  
                       var commandName = args.get_commandName();     
                        if ("InsertTable" == commandName) {  
                            //get a reference to the editor content area using the GetContentArea method  
                            var cArea = editor.get_contentArea();  
                            //get all TABLE elements in the content area  
                            var tables = cArea.getElementsByTagName("TABLE");  
                            for (var i = 0; i < tables.length; i++) {  
                                var oTable = tables[i];  
                                //Check if this table existed before the InsertTable executed.  
                                if (!IsObjectInArray(oTable, curTables)) {  
                                    //set the table widht to 100%  
                                    oTable.style.width = "100%";  
                                }  
                            }  
                        }  
                    }  
     
  17. DF60784D-55A5-4263-9F10-A12FA48C9ADC
    DF60784D-55A5-4263-9F10-A12FA48C9ADC avatar
    14477 posts
    Member since:
    Apr 2022

    Posted 18 Aug 2008 Link to this post

    Hi Clyde,

    Thank you for sharing the updated code with our community! We do appreciate your work and we updated your Telerik points.

    Best regards,
    Rumen
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.