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

9 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1679 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.
  2. Thomas
    Thomas 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" 
  3. George
    Admin
    George avatar
    298 posts

    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
  4. Thomas
    Thomas 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
  5. George
    Admin
    George avatar
    298 posts

    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
  6. Thomas
    Thomas 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
  7. George
    Admin
    George avatar
    298 posts

    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
  8. Clyde
    Clyde 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%";  
                                }  
                            }  
                        }  
                    }  
     
  9. Rumen
    Admin
    Rumen avatar
    12848 posts

    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