The Select Table button does not appear on table click when the table is not part of the visible content area

Progress® Telerik® UI for ASP.NET AJAX Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

Last Updated: 25 May 2022 13:27 by ADMIN

Release R2 2022 SP1

Liyuan

Created on: 18 May 2022 14:35

Category: Editor

Type: Bug Report

The Select Table button does not appear on table click when the table is not part of the visible content area

If the table is not part of the visible part of the content area and you have to scroll to see it, then the X select table button does not appear (its display="none" property does not get updated). So technically the span element is available in the DOM but hidden:

1 comment

ADMIN

Rumen

Posted on: 25 May 2022 13:27

Hi Liyuan,

Thank you for reporting the problem!

I have good news that it will be fixed in the upcoming R2 2022 SP1 release due in June.

In the meantime, you can fix it by adding the following script override to the page with RadEditor declaration:

<script>
    var $T = Telerik.Web.UI;
    var $E = $T.Editor;
    var $ = $telerik.$
    $E.SelectDeleteTable.prototype._setSelectButtonPosition = function (button, table) {
        var that = this;
        var editor = that.editor;
        var contentArea = editor.get_contentArea();
        var contentParent = editor._view.contentAreaContainer();
        var tableOffset = $E.Utils.getOffset(table, contentArea);
        var isIframeMode = editor.get_contentAreaMode() == Telerik.Web.UI.EditorContentAreaMode.Iframe;
        var parentElement = isIframeMode ? contentArea.parentNode : contentArea;
        var tableScroll = that.isMobile ? { left: 0, top: 0 } : $E.Utils.getScrollOffset(table, parentElement);

        if (!that.isMobile && (tableOffset.left < tableScroll.left ||
            tableOffset.left > tableScroll.left + contentParent.offsetWidth ||
            tableScroll.top > tableOffset.top ||
            tableOffset.top - tableScroll.top > contentParent.offsetHeight)) {
            return false;
        }
        else {
            var buttonOffset = that._getSelectBtnOffset();
            $(button).css({
                left: tableOffset.left - tableScroll.left + buttonOffset.left,
                top: tableOffset.top - tableScroll.top + buttonOffset.top
            });
            return true;
        }
    },

    $E.SelectDeleteTable.prototype._setDeleteButtonPosition = function (button, table) {
        var that = this;
        var editor = that.editor;
        var contentArea = editor.get_contentArea();
        var contentParent = editor._view.contentAreaContainer();
        var tableOffset = $E.Utils.getOffset(table, contentArea);
        var isIframeMode = editor.get_contentAreaMode() == Telerik.Web.UI.EditorContentAreaMode.Iframe;
        var parentElement = isIframeMode ? contentArea.parentNode : contentArea;
        var tableScroll = that.isMobile ? { left: 0, top: 0 } : $E.Utils.getScrollOffset(table, parentElement);
        var tableWidth = table.offsetWidth;

        if (!that.isMobile && (tableOffset.left + tableWidth < tableScroll.left ||
            tableOffset.left + tableWidth > tableScroll.left + contentParent.offsetWidth ||
            tableScroll.top > tableOffset.top ||
            tableOffset.top - tableScroll.top > contentParent.offsetHeight)) {
            return false;
        }
        else {
            var deleteBtnOffset = that._getDeleteBtnOffset();
                        
            $(button).css({
                left: tableOffset.left - tableScroll.left + tableWidth + deleteBtnOffset.left,
                top: tableOffset.top - tableScroll.top + deleteBtnOffset.top
            });
            return true;
        }
    }
</script>
<telerik:RadEditor ID="RadEditor1" runat="server" ContentAreaMode="iframe">
    <Content>
                    <table>
                        <tr>
                            <td>test</td>
                        </tr>
                    </table>
                    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
                    <table>
                        <tr>
                            <td>test</td>
                        </tr>
                    </table>
    </Content>
</telerik:RadEditor>

Regards,
Rumen
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.