InsertTableLight.ascx not overriding built-in dialog

9 posts, 1 answers
  1. Jim
    Jim avatar
    17 posts
    Member since:
    Apr 2018

    Posted 17 May 2018 Link to this post

    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.

     

  2. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    4931 posts

    Posted 22 May 2018 Link to this post

    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.
  3. Jim
    Jim avatar
    17 posts
    Member since:
    Apr 2018

    Posted 22 May 2018 Link to this post

    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.

  4. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4931 posts

    Posted 22 May 2018 Link to this post

    Hello Jim,

    That's because I hid it to showcase the approach works (your initial post tried to hide elements so I included that in my example).

    You should take the vanilla version (usually installed in a path like this C:\Program Files (x86)\Progress\Telerik UI for ASP.NET AJAX R2 2018\EditorDialogs).


    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.
  5. Jim
    Jim avatar
    17 posts
    Member since:
    Apr 2018

    Posted 22 May 2018 in reply to Marin Bratanov Link to this post

    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>

     

  6. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4931 posts

    Posted 24 May 2018 Link to this post

    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.
  7. Jim
    Jim avatar
    17 posts
    Member since:
    Apr 2018

    Posted 24 May 2018 in reply to Marin Bratanov Link to this post

    Hi Marin,

    I can't get this sample to show the alignment button either, but I think I'm going to stick with the Classic rendering anyway (which shows the alignment button) so it's a moot point.

    Thanks anyway.

  8. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4931 posts

    Posted 24 May 2018 Link to this post

    Hello Jim,

    Does this happen in all browsers? If it happens in IE only perhaps the issue is with font blocking being set in the group policy.

    That said, I hope the classic mode fits your needs.


    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.
  9. Jim
    Jim avatar
    17 posts
    Member since:
    Apr 2018

    Posted 24 May 2018 in reply to Marin Bratanov Link to this post

    Hi Marin,

    Unfortunately, I does occur in other browsers (I tried Chrome).  Classic should work for me with a skin.

Back to Top