Default first row of table as header?

4 posts, 1 answers
  1. Nick
    Nick avatar
    86 posts
    Member since:
    Mar 2008

    Posted 20 Apr 2009 Link to this post

    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
  2. Answer
    Stanimir
    Admin
    Stanimir avatar
    1653 posts

    Posted 23 Apr 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Nick
    Nick avatar
    86 posts
    Member since:
    Mar 2008

    Posted 23 Apr 2009 Link to this post

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

  5. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 27 Apr 2009 Link to this post

    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.
Back to Top