Home / Community & Support / Code Library / ASP.NET and ASP.NET AJAX > Editor > Inserting a new table with 100% width, using the “InsertTable” tool.

• Telerik Admin Master

  Posted on Mar 15, 2006 (permalink)

   

  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.

  Attached files

  • InsertTable.zip

  Reply

• Thomas

  Posted on Jan 16, 2008 (permalink)

  Hey!
  
  How can i write

  oTable.style.border-left = "Black 1px solid" 

  Reply

• George George

  Posted on Jan 16, 2008 (permalink)

  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

  
  www.telerik.com | dnn.telerik.com | www.sharepointcontrols.com | www.sitefinity.com | www.mcmscontrols.com

  Reply

• Thomas

  Posted on Jan 17, 2008 (permalink)

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

  Reply

• George George

  Posted on Jan 17, 2008 (permalink)

  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

  Reply

• Thomas

  Posted on Jan 17, 2008 (permalink)

  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

  Reply

• George George

  Posted on Jan 17, 2008 (permalink)

  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

  Attached files

  • EditorTableSolidBorder.zip

  Reply

• Clyde

  Posted on Aug 15, 2008 (permalink)

  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%";

  }

  }

  }

  }

  Reply

• Rumen Rumen

  Posted on Aug 18, 2008 (permalink)

  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.

  Reply

Back to Top

Home / Community & Support / Code Library / ASP.NET and ASP.NET AJAX > Editor > Inserting a new table with 100% width, using the “InsertTable” tool.