Default first row of table as header?

[Nick]

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

[Stanimir]

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.

[Nick]

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);
      }
    }

[Rumen]

Hi Nick,

To share your solution with more developers, I created a KB article on the subject with your code: Inserting new tables with a header row as default. I also added Telerik points to your account for your nice work.

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