Home / Community & Support / Knowledge Base / RadControls for ASP.NET and ASP.NET AJAX / Editor / Inserting new tables with a header row as default

Inserting new tables with a header row as default

Article Info

Rating: Not rated

Article information

Article relates to

 RadEditor for ASP.NET AJAX
 Telerik.Web.UI

Created by

 Rumen Zhekov

HOW-TO
Insert new tables with a header row as default via the Insert Table dropdown or TableWizard dialog

SOLUTION
To implement this accessibility feature attach to the OnClientPasteHtml event, which will allow to catch and modify the inserted content via the InsertTable and TableWizard tools of RadEditor. Here is an example:

<telerik:radeditor runat="server" OnClientPasteHtml="OnClientPasteHtml" ID="RadEditor1">  
    <ImageManager ViewPaths="~/Images" UploadPaths="~/Images" />  
</telerik:radeditor>  
 
<script type="text/javascript">  
function OnClientPasteHtml(sender, args) {   
  var commandName = args.get_commandName();   
  var value = args.get_value();   
 
  if (commandName == "InsertTable" || commandName == "TableWizard")  
  {   
    var tempDiv = document.createElement("DIV");   
    value = value.trim();   
    Telerik.Web.UI.Editor.Utils.setElementInnerHtml(tempDiv, value);   
    var table = tempDiv.firstChild;   
    // Set css class on alternate rows   
    for (var i = 0; i < table.rows.length; i++) {   
      if ((i % 2) == 0) {   
        table.rows[i].setAttribute("class","row0");   
      }   
      else {   
        table.rows[i].setAttribute("class","row1");   
      }   
    }   
    // Insert THEAD into table   
    var colCount = table.rows[0].cells.length;   
    var newTHead = table.createTHead();   
    var newRow = newTHead.insertRow(-1);   
    for (var j = 0; j < colCount; j++) {   
      var newTh = document.createElement("TH");   
      newRow.appendChild(newTh);   
    }   
    args.set_value(tempDiv.innerHTML);   
  }   
}   
</script> 

Comments

There are no comments yet.
If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!

Please Sign In to rate this article.