[Solved] Set table borders off by default

[Simon Forrest]

When I load the editor, I'd like the table borders to be off, requiring the user to click the ToggleTableBorder (aka Show/Hide Border) button to show the borders. Currently, the editor loads with this button activated by default.

Is there a way to set ToggleTableBorder so that it is initially toggled off, either declaratively in the ToolsFile.xml or through server-side code? (I'd rather not do this client-side through JavaScript, although I have the code to do that if necessary.)

Thanks,

Simon

[Tervel]

Hello Simon,

Using one line of client-script is the best (and easiest) way to achieve your desired result, e.g. editor.fire("ToggleTableBorder");

Since you are aware of this solution, but for some reason prefer not to use it and are looking forward to a non-client side approach, the only option would be to change the ContentAreaCssFile (this is the CSS file where the "system" settings such as dashed table borders in Design mode are defined). An example about this property can be seen here:
http://demos.telerik.com/aspnet-ajax/editor/examples/settingcontentareadefaults/defaultcs.aspx


All the best,
Tervel
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Simon Forrest]

Hi Tervel,

Thanks for the reply. Could you tell me where I can find the current default CSS file that's used as the ContentAreaCssFile so that I can duplicate and amend it, presumably by swapping the CSS values for the "on" and "off" states of the table borders and the related button.

Thanks,

Simon

[Tervel]

Hello Simon,

In your RadControls installation there is a folder called Skins. Then, in case you are using Q1 2009, there is a folder Common, where the file is, e.g: Skins/Common/EditorContentArea.css.

In case you are using a version prior to Q1, you will find this file in the folder Skins/[SKIN NAME]/EditorContentArea.css

Greetings,
Tervel
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Simon Forrest]

Hi Tervel,

Thanks for that. Unfortunately it doesn't work. If I remove the dashed border formatting from the CSS file, the content loads without borders, which is fine, but the button still loads in the toggled on state. In itself that wouldn't be too bad, but the button no longer works - it appears to change the padding (ie the content shifts slightly) but the dashed borders no longer appear when it's clicked.

As there isn't a proper setting (ie something I can change declaratively or in code) for the initial toggle state, I guess I'll have to resort to using script. I'd wanted to avoid this simply so that I didn't have to add script for each editor to set the state, which seems like a rather clunky way to address the problem.

I find the decision to default to showing the table borders rather odd. It means that you're no longer seeing the content as it will appear, which breaks the concept of a WYSIWYG editor. Perhaps a setting to define the initial state could be added to a future version?

Thanks again,

Simon

[Tervel]

Hi Simon,

Please note that tables will look like you make them to be - the css style settings are there for you to use and experiment with. For example, you wrote:

"but the button still loads in the toggled on state. In itself that wouldn't be too bad, but the button no longer works - it appears to change the padding (ie the content shifts slightly) but the dashed borders no longer appear when it's clicked.padding (ie the content shifts slightly) "
This is only logical - the content shifts slightly because the table size is increased - each border now is one pixel wide, where there was none before. To not experience any shift you need to set TD padding:1px when there are no borders, and padding:0px when borders are enabled.


"I find the decision to default to showing the table borders rather odd. It means that you're no longer seeing the content as it will appear, which breaks the concept of a WYSIWYG editor."
This is exactly why borders are there at all - to allow users to see the layout/ data better and to recognize that a table is used. No borders creates a very confusing experience, especially when inserting new tables which are all empty. Navigating and locating a particular cell is then almost impossible. This is exactly why the editor also features a Preview mode in addition to Design. In preview mode the borders are removed.


"Perhaps a setting to define the initial state could be added to a future version?"
There is always the need to keep the editor properties as few in number as possible. For a control as complex and as diverse as the editor this is an absolute must in order to keep things manageable and understandable to end users. Hence, it has been a conscious decision to implement as many properties as Enum/Flags (which allow for multiple settings), as well as to keep more rare scenarios possible, but through some kind of extra code.

In the current scenario this is exactly the case - we provided you with two easy, reasonable alternatives that do exactly the needed thing - e.g. turn off borders.

Best regards,
Tervel
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.