Custom css layout style inside Rad Editor table properties - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Custom css layout style inside Rad Editor table properties

  • Custom css layout style inside Rad Editor table properties
  • Hello,

    In Table Wizard: Table Properties: CSS Class Layout , there is a drop down with pre-defined styles. Is it possible to create your own custom styles that apply to tables, and how is this done?

    Thank you,
    Aaron
  • Hello Aaron,

     You can implement custom Table Layouts by creating a CSS file using the following pattern and point this file to the RadEditor's TableLayoutCssFile property:

    /*Table class*/
    .myClass
      
    /*Table Header classes*/
    .myClassTable tr.myClassTableHeaderRow
    .myClassTable td.myClassTableHeaderFirstCol
    .myClassTable td.myClassTableHeaderLastCol
    .myClassTable td.myClassTableHeaderOddCol
    .myClassTable td.myClassTableHeaderEvenCol
      
    /*Table Body classes*/
    .myClassTable tr.myClassTableOddRow
    .myClassTable tr.myClassTableEvenRow
    .myClassTable td.myClassTableFirstCol
    .myClassTable td.myClassTableLastCol
    .myClassTable td.myClassTableOddCol
    .myClassTable td.myClassTableEvenCol
      
    /*Table Footer classes*/
    .myClassTable tr.myClassTableFooterRow
    .myClassTable td.myClassTableFooterFirstCol
    .myClassTable td.myClassTableFooterLastCol
    .myClassTable td.myClassTableFooterOddCol
    .myClassTable td.myClassTableFooterEvenCol

    Please take a look at the following live demo for more detailed information on the subject:
    Table Properties CSS Class Layout tool 

    Greetings,
    Jen Peleva
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  • That's all nice when I use the editor in a custom control (I then can edit the code of the editor). But is it possible to add a custom Table Layout in the editor that Sitefinity uses when editing content?
  • Hello David,

    You can achieve this by mapping the control template for the HTML field control (which contains the RadEditor). You can find more information in this forum post: ViewMap SDK template examples.

    The host type of the HTML field control is: Telerik.Sitefinity.Web.UI.Fields.HtmlField.

    Regards,
    Radoslav Georgiev
    Telerik
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
  • More about......CSS Styling Tables

    Mercal