1-888-365-2779
+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Striped table layout in RAD editor

Striped table layout in RAD editor

6 posts, 0 answered
  1. Chris
    Chris avatar
    57 posts
    Registered:
    12 Nov 2008
    07 Jan 2009
    Link to this post
    Hi,

    Is it possible to tweak the RAD editor to be able to create a striped table layout? The result should look something like this:
    http://devfiles.myopera.com/articles/480/zebra2.png

    I couldn't find any comfortable way of accomplishing this. The 2 ways I found were:
    • Select the appropriate rows in the content editor and change their background (or edit the HTML code of the <tr> tags)
    • Add custom CSS classes (TableRow and TableAlternatingRow), and apply them to each cell in the "Table Wizard" editor.

    Both ways are not very user friendly, so is there a way of adding this behavior on an automatic basis?

    Cheers, Chris
  2. Parvan
    Parvan avatar
    151 posts
    Registered:
    24 Sep 2012
    10 Jan 2009
    Link to this post
    Hello Chris,

    Thanks for contacting us.
    You can automate creating of custom table in the way described below. Do it for templates located in
    [your site]/Sitefinity/Admin/ControlTemplates/Generic_Content/ControlPanelEdit.ascx and
    [your site]/Sitefinity/Admin/ControlTemplates/Generic_Content/ControlPanelInsert.ascx

    1. Add this Javascript block in each of  the templates(yellow background lines). The green-colored code shows where you can edit html that will be automatically appended to RadEditor.
    ...  
    <%@ Register TagPrefix="sfCtg" Namespace="Telerik.Cms.Engine.WebControls.Categories" 
        Assembly="Telerik.Cms.Engine" %> 
          
    <script type="text/javascript">  
    function InsertTable()  
    {  
        var editor = $find("<%=contentEditor.ClientID%>");  
        var oldHtml = editor.get_html();  
        editor.set_html(oldHtml + "<table><tr class=\"TableRow\"><td></td><td></td></tr><tr class=\"TableAlternatingRow\"><td></td><td></td></tr></table>");   
    }   
    </script> 
     
    ... 

    2. Add button in templates which invokes javascript function from step 1 (yellow background lines).
    <input type="button" value="Insert Custom Table" onclick="InsertTable()" /> 
    <sfGCn:ContentMetaFields ID="editMetaFields" runat="server">  

    When you click on the button, html will be automatically added to RadEditor.

    Hope this solution helps you.

    All the best,
    Parvan
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. Chris
    Chris avatar
    57 posts
    Registered:
    12 Nov 2008
    13 Jan 2009
    Link to this post
    Hi, Thanks for the extensive reply.

    Unfortunately, this doesn't help me much. First of all, it looks like the ControlPanelEdit.asxc and ControlPanelInsert.ascx aren't being used at all. Instead, my installation uses the EditorTemplate.ascx (was that a change in SF 3.5?).
    Still, if I understand that code snippet correctly, it only adds a pre-defined table in the current editor. If I want to add some rows later, does it apply the appropriate classes?

    What I was actually trying to achieve was to modify the output of the existing Table Wizard, sorry ifI wasn't really clear about that.

    Cheers, Chris
  4. SelAromDotNet
    SelAromDotNet avatar
    912 posts
    Registered:
    18 Jul 2012
    13 Jan 2009
    Link to this post
    a great solution is to use jquery! you can access the table by class, id, or as a sub element of another element that has a class or id. there's a detailed tutorial on how it works here:

    http://15daysofjquery.com/examples/zebra/

    just place the javascript code in the header and it will execute whenever it encounters the selector (either class or id) you use to define the table. it will set an alternate css class on even (or odd) rows which you can define in a separate included css file.

    of course this will not work if javascript is disabled, but in all other cases it will work just fine!

    hope this is helpful!
  5. Georgi
    Georgi avatar
    3583 posts
    Registered:
    28 Oct 2016
    16 Jan 2009
    Link to this post
    Hello,

    This sounds as a possible solution.

    When you insert a table, you can edit it anytime. If you add new rows or columns, they will have the same tag classes.
    Other than that, the Table is build with standard html tags, which you can find (to edit them) in the HTML DOM tree.

    Sincerely yours,
    Georgi
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. Chris
    Chris avatar
    57 posts
    Registered:
    12 Nov 2008
    16 Jan 2009
    Link to this post
    Thanks for the hint about jQuery, I just gave that a try and it works like a charm!

    Since neither the navigation (RadPanel) nor any forms (.NET) will work properly without JavaScript enabled, this is a suitable option.

    Editing the HTML DOM tree would be suitable for myself, but is definitely out of reach for any of the future users of the system (they will brake it at some point and then I have to go and fix it...). Also, it would take quite a while to do this sort of thing by hand on a 200 row table.

    Cheers,
    Chris
Register for webinar
6 posts, 0 answered