Close events for comments dialog

[Shan]

Hello, I am reviewing the commenting feature of the radeditor and have a few questions related to closing a comments dialog. For reference, I'm referring to http://demos.telerik.com/aspnet-ajax/editor/examples/comments/defaultcs.aspx. 

1. When a comment is clicked, the comment dialog pops up. Once the dialog is open, it seems that the comment dialog can be closed in one of two ways - either pressing the "cancel" button on the comment dialog once it appears, or, clicking somewhere in the editor outside of a comment. Is it possible out of the box to auto-close the comment dialog when clicking anywhere outside of the comment dialog, regardless of whether you click somewhere in the editor or out of the editor?

2. Is it possible out of the box to have a close widget on the comment dialog? 

Thanks
Shan

[Ianko]

Hello Shan,

Unfortunately such events are not available for out-of-the-box solution. You can further customize the RadEditorTrackChangesInfo module by investigating the rendered HTML elements of the module. You can follow also this example custom code that provides similar functionality to the desired one.

<telerik:RadEditor ID="theEditor" runat="server" Width="600" Height="400" EnableComments="true">
    <TrackChangesSettings Author="RadEditorUser" UserCssId="reU1"></TrackChangesSettings>
</telerik:RadEditor>

<script type="text/javascript">
    Telerik.Web.UI.Editor.Modules.RadEditorTrackChangesInfo.prototype.originalInitialize =
        Telerik.Web.UI.Editor.Modules.RadEditorTrackChangesInfo.prototype.initialize;

    Telerik.Web.UI.Editor.Modules.RadEditorTrackChangesInfo.prototype.initialize = function () {
        this.originalInitialize();
        this.CustomFunctionality();
    }

    Telerik.Web.UI.Editor.Modules.RadEditorTrackChangesInfo.prototype.CustomFunctionality = function () {
        var $ = $telerik.$;
        var saveBtn = $("#" + "rade_tccomment_save_id_" + this._editor._clientStateFieldID);
        var cancelBtn = $("#" + "rade_tccomment_cancel_id_" + this._editor._clientStateFieldID);
        var textarea = this._textarea;

        textarea.onblur = function () {
            if (textarea.value !== "<Enter here>")
                $(saveBtn).trigger("click");
            else
                $(cancelBtn).trigger("click");
        }
    }
</script>

Regards,
Ianko
Telerik

 

 

[Shan]

This seems to work, although I haven't extensively tested. I just decided to look at the comment dialog class and bind to a jQuery event to check when a mouse click occurs outside of the comment dialog.

        $(document).mouseup(function (e)
        {
            var container = $(".reCommentInfoPanel");

            if (!container.is(e.target) // if the target of the click isn't the container...
                && container.has(e.target).length === 0) // ... nor a descendant of the container
            {
                container.hide();
            }
        });