This is a migrated thread and some comments may be shown as answers.

[Solved] Default first row of table as header?

3 Answers 117 Views

Editor

This is a migrated thread and some comments may be shown as answers.

Nick asked on 20 Apr 2009, 02:41 PM

I have found buried away in the table accessibility options a textbox for specifying the number of header rows, can I set a default value for this so that it creates new tables with a header row as default?

Ideally what I'd like a table to default to is:

    
            <table> 
        
              <thead> 
        
                <tr> 
        
                  <th></th> 
        
                  <th></th> 
        
                  <th></th> 
        
                  <th></th> 
        
                </tr> 
        
              </thead> 
        
              <tbody> 
        
                <tr> 
        
                  <td></td> 
        
                  <td></td> 
        
                  <td></td> 
        
                  <td></td> 
        
                </tr> 
        
                  ..... 
        
                </tbody> 
        
            </table>

Cheers,
Nick

3 Answers, 1 is accepted

Accepted

answered on 23 Apr 2009, 11:17 AM

Hi Nick,

I suggest you to use the OnClientPasteHtml event to achieve the desired functionality. This event is fired when the command is executed. It is useful in scenarios when the pasted content should be modified and inserted in the content area.

In the following address you can find an online demo http://demos.telerik.com/aspnet-ajax/editor/examples/onclientpastehtml/defaultcs.aspx where you can see how when a new table is added its border color is altered to red. You can use the same approach and change the first row TD elements to TH elements.

I hope this helps.

Kind regards,
Stanimir
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.

answered on 23 Apr 2009, 03:47 PM

Hi Stanimir ,

Thanks for the reply. That's worked great.

In case anyone else is interested, this is what I ended up with:

    
                function OnClientPasteHtml(sender, args) { 
        
                  var commandName = args.get_commandName(); 
        
                  var value = args.get_value(); 
        
                  if (commandName == "InsertTable") { 
        
                    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); 
        
                  } 
        
                }