This is a migrated thread and some comments may be shown as answers.

InsertTableLight.ascx not overriding built-in dialog

8 Answers 110 Views

Editor

This is a migrated thread and some comments may be shown as answers.

Jim asked on 17 May 2018, 03:09 PM

dialog.png

Any changes I make to the InsertTableLight.ascx (and place in my project's EditorDialogs directory) are not reflected when I invoke the dialog from the RadEditor.

I know the overrides are working because I have already modified the dialogs for InsertLink.ascx and InsertSelectDialog.ascx, and they are working perfectly.

I've made obvious changes such as:

<label class="reDialogLabelLight" for="Columns" style="display: none;">

<span class="short">[columns]</span>

</label>

But I still get the dialog in the attached screenshot.

8 Answers, 1 is accepted

Accepted

answered on 22 May 2018, 11:49 AM

sample.zip

Hello Jim,

I am attaching here an example that works as expected. My best guess as to why it is not working as expected in your project is that there is a mismatch between the render mode of the editor instance and the user control that is being modified. I hope my additions at the beginning of the user controls will clarify this.

Regards,
Marin Bratanov
Progress Telerik

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

answered on 22 May 2018, 01:37 PM

screenshot.png

Thanks Marin, renaming the control file to "Lite" worked. That's confusing though because I didn't have to rename the other dialogs to get the alterations to work (InsertLink.ascx, InsertSelectDialog.ascx, SetImageProperties.ascx).

Now I have one more problem: the alignment splitbutton isn't showing. I've included a screenshot of your dialog, but it has no alignment button.

answered on 22 May 2018, 06:10 PM

screenshot.png

Hi Marin,

The vanilla version doesn't seem to be working either (see attachment), and I can't see the attachment being hidden in the vanilla code anywhere so I'm not sure what's happening here.

<%@ Control Language="C#" %>

<div id="InsertTableLight" class="reInsertTableLightWrapper" style="display: none;">

<table cellspacing="0" cellpadding="0" border="0" class="reControlsLayout">

<caption style="display: none;"

>It contains the Insert Table light dialog, which has the important properties to insert a table into your document: Columns, Rows, Alignment, Cell Padding, Cell Spacing and Border. In the light dialog you also have a button (All Properties) that allows you to switch from Insert Table dialog to Table Wizard dialog if you decide you want to access all table properties options.</

caption>

<thead style="display: none;">

<tr>

<th scope="col">

<span>Insert Table Light Dialog's wrapper</span>

</th>

</tr>

</thead>

<tbody>

<tr>

<td colspan="2" class="reTablePropertyControlCell">

<div class="lightTable" style="border: 0 none;">

<table cellpadding="0" cellspacing="0">

<caption style="display: none;">Table's properties - Columns, Rows, Alignment, Cell Padding, Cell Spacing and Border</caption>

<thead style="display: none;">

<tr>

<th scope="col">

<span>Labels - Columns, Rows and Alignment</span>

</th>

<th scope="col">

<span>Columns, Rows and Alignment</span>

</th>

<th scope="col">

<span>Labels - Cell Padding, Cell Spacing and Border</span>

</th>

<th scope="col">

<span>Cell Padding, Cell Spacing and Border</span>

</th>

</tr>

</thead>

<tbody>

<tr>

<th scope="row" style="display: none;">

Columns and Cell Padding

</th>

<td>

<label class="reDialogLabelLight" for="Columns">

<span class="short">[columns]</span>

</label>

</td>

<td>

<input type="text" id="Columns" class="rfdIgnore" />

</td>

<td>

<label class="reDialogLabelLight" for="CellPadding">

<span class="short">[cellpadding]</span>

</label>

</td>

<td>

<input type="text" id="CellPadding" class="rfdIgnore" />

</td>

</tr>

<tr>

<th scope="row" style="display: none;">

Rows and Cell Spacing

</th>

<td>

<label class="reDialogLabelLight" for="Rows">

<span class="short">[rows]</span>

</label>

</td>

<td>

<input type="text" id="Rows" class="rfdIgnore" />

</td>

<td>

<label class="reDialogLabelLight" for="CellSpacing">

<span class="short">[cellspacing]</span>

</label>

</td>

<td>

<input type="text" id="CellSpacing" class="rfdIgnore" />

</td>

</tr>

<tr>

<th scope="row" style="display: none;">

Alignment and Border

</th>

<td>

<label class="reDialogLabelLight" for="AlignmentSelectorTable">

<span>[alignment]</span>

</label>

</td>

<td>

<div class="reDialog reToolWrapper">

<a id="AlignmentSelectorTable" title="AlignmentSelector" class="reTool reSplitButton"

href="#"><span class="AlignmentSelector"> </span><span class="split_arrow"> </span></a>

</div>

</td>

<td>

<label class="reDialogLabelLight" for="BorderWidth">

<span class="short">[border]</span>

</label>

</td>

<td>

<input type="text" id="BorderWidth" class="rfdIgnore" /> px

</td>

</tr>

</tbody>

</table>

</div>

</td>

</tr>

<tr>

<td colspan="2">

<table border="0" cellpadding="0" cellspacing="0" class="reConfirmCancelButtonsTblLight">

<caption style="display: none;">Buttons - All Properties, OK and Cancel</caption>

<thead style="display: none;">

<tr>

<th scope="col">

<span>All Properties Button</span>

</th>

<th scope="col">

<span>OK Button</span>

</th>

<th scope="col">

<span>Cancel Button</span>

</th>

</tr>

</thead>

<tbody>

<tr>

<td class="reAllPropertiesLight" style="padding-left: 3px;">

<button type="button" id="itlAllProperties" class="rfdFlatButton">

[allproperties]

</button>

</td>

<td>

<button type="button" id="itlInsertBtn" class="rfdPrimaryButton rfdFlatButton">

[ok]

</button>

</td>

<td>

<button type="button" id="itlCancelBtn" class="rfdFlatButton">

[cancel]

</button>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</div>

answered on 24 May 2018, 12:20 PM

editor-custom-lite-dialog.zip

result.png

Hi Jim,

I am attaching here a sample with the vanilla dialog that works fine for me and a comparison between the built-in and custom loaded one. I suggest you take this as a base and apply modifications after that.

Regards,
Marin Bratanov
Progress Telerik

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.