Trying to Disable Checkboxes in CSS Class Layout Section of Table Properties Dialog

[Mike]

I'm trying to make a simple CSS class for my users to pick to turn on borders on a table.  Basically, an easy way for general users to emulate the old border="1" on a table before that was frowned upon.  I have found instructions on how to set up a CSS class for the table layout and call it by adding TableLayoutCssFile to my RadEditor declaration.  Then, I found another forum article from somebody who wanted to hide chunks of options on the Table Properties tab of the Table Wizard.  I've gone through the steps found at http://demos.telerik.com/aspnet-ajax/editor/examples/externaldialogspath/defaultcs.aspx.  I have been able to hide the whole CSS Class Layout section that appears on the right.  My class does show up in the drop down list under CSS Class Layout.  When I pick it, the four options (Heading Row, Last Row, First Column, Last Column) become available under the "Apply special formats to" heading.  None of the tables we're going to be creating are going to have that level of detail, so I would like to just disable those four checkboxes so as not to confuse my users.   I've attached a screen capture and circled the section I'm talking about.

Now, in the TableProperties.ascx file that I am editing and referencing via the ExternalDialogsPath property on the RadEditor declaration, I believe I found the relevant section starting around line 356.  I'm pasting it below.  Now, I can add display:none to either the td or the fieldset to hide the entire section, but I don't see where it is printing out the individual sections.  My guess is those script lines are doing the work, but I don't see any access point for me to get to the checkboxes.

<td rowspan="2" style="vertical-align: top;">
<fieldset style="height: 394px;width:375px;"  class="reTablePropertiesCssClass">
<legend>
<script type="text/javascript">document.write(localization["CssClass"]);</script>
<script type="text/javascript">document.write(localization["Layout"]);</script>
</legend>
<telerik:TableBorder id="TableBorder" runat="server"></telerik:TableBorder>
</fieldset>
</td>

Is there a way for me to disable those checkboxes under the CSS Class Layout drop down list?

[Vessy]

Hi Mike,

As per your assumption you will need to modify the Editor's external dialog in order to disable the pointed checkbox inputs. The name of the dialog that contains them, though, is named TableBorder.ascx - it is loaded in TableProperties.ascx just below the localization scripts quoted in your post. Below you can see the code-snippet from the TableBorder dialog containing the target check-boxes:

<table id="toolsTable" width="100%" border="0" cellpadding="0" cellspacing="0" style="text-align: left;
        margin-bottom: 50px;">
        <tr>
            <td style="vertical-align: top;">
                <div>
                    <input type="checkbox" disabled="disabled" checked="checked" id="HeaderRow" />
                    <script type="text/javascript">document.write(localization["HeadingRow"]);</script>
                </div>
                <div>
                    <input type="checkbox" disabled="disabled" checked="checked" id="FirstColumn" />
                    <script type="text/javascript">document.write(localization["FirstColumn"]);</script>
                </div>
            </td>
            <td style="vertical-align: top;">
                <div>
                    <input type="checkbox" disabled="disabled" checked="checked" id="LastRow" />
                    <script type="text/javascript">document.write(localization["LastRow"]);</script>
                </div>
                <div>
                    <input type="checkbox" disabled="disabled" checked="checked" id="LastColumn" />
                    <script type="text/javascript">document.write(localization["LastColumn"]);</script>
                </div>
            </td>
        </tr>
    </table>

Please, note that you will also need to handle the formatName select element value change event (or to disable the Combobox as well). I hope this information will be helpful for you.

Regards,
Vessy
Telerik

 

 

[Mike]

Thanks, Vessy, for pointing me to the correct file.  That explains why I wasn't seeing those checkboxes that I was trying to find.  I found the table section that you listed and was able to easily add a display:none; onto the existing style to hide it and the line of text above it.  It took me a little bit, but I did track down the event handler that you mentioned that's called formatNameHandler.  To meet my purposes, I added four lines in the else block to clear the checked status of the four checkboxes when a style is picked from the dropdown.  That solved my problem of unchecking those boxes each time (too many choices for our users).  So, thank you for your help.

 

To help anybody else that is looking to do the same thing and finds this post sometime in the future, I am posting the script section.  My addition is the four lines of code after the two lines of comments in the else block.  This unchecks those four checkboxes when a style is picked from the drop down list.

         _formatNameHandler: function (e)
        {
            if (e) this._canFormatTable = true;
            var formatName = this._formatName.value;

            if (!formatName)
            {
                this._tableFormat = null;
                this._clearTableFormat(this._previewTable);

                this._headerRow.checked = "checked";
                this._lastRow.checked = "checked";
                this._firstColumn.checked = "checked";
                this._lastColumn.checked = "checked";

                this._headerRow.disabled = "disabled";
                this._lastRow.disabled = "disabled";
                this._firstColumn.disabled = "disabled";
                this._lastColumn.disabled = "disabled";
            }
            else
            {
                this._headerRow.disabled = "";
                this._lastRow.disabled = "";
                this._firstColumn.disabled = "";
                this._lastColumn.disabled = "";

                // This unchecks the four checkboxes that let users check those options to set the header row, last row, first column, and last column as special styles.
                // This is probably too many options for inexperienced users, so we are hiding the checkboxes and defaulting these checkboxes to off.
                this._headerRow.checked = "";
                this._lastRow.checked = "";
                this._firstColumn.checked = "";
                this._lastColumn.checked = "";

                var formatsLength = this._formats.length;
                for (var i = 0; i < formatsLength; i++)
                {
                    var format = this._formats[i];
                    if (formatName == format.name)
                    {
                        this._tableFormat = this._formats[i];
                        this._setTableFormat(this._previewTable, this._tableFormat);
                        break;
                    }
                }
            }

[Vessy]

Hi Mike,

I am really glad the provided approach was helpful for you and you managed to achieve the desired scenario. Thank you for sharing your solution with our community! :)

Please, let us know whenever we can be of any further Telerik related assistance.

Regards,
Vessy
Telerik