[Solved] Editor in window and modal dialogs

[Jozef]

Hi,

I'm using Editor in Window (which is in modal mode). When I open new modal window from editor - e.g. Insert image, underlying modal window is still active (I have there two buttons - save and cancel) and it is possible to close underlying modal dialog with actual editor, while Insert image dialog is active. I tried to solve it by attaching client-side event when opening Insert image dialog to disable temporarily close buttons, with no success. It looks it has problem with attaching client events when it is nested into window.

Thank you for suggestions.

Jozef

[Alex Gyoshev]

Hello Jozef,

Thank you for notifying us of this problem. Since the editor window does not fire events that can be captured, a work-around would be to decrease the z-index of the parent window. The following hack should do the job (this is a modified version of the popup form example):

    <%  Html.Telerik().Window()
        .Name("Window")
        .Title("Submit feedback")
        .Content(() => {%>
            <% using (Html.BeginForm("popupform", "window", FormMethod.Post, new { id = "feedback-form" }))
               { %>
                    <p class="note">This is just an example, sent data will <strong>not</strong> be saved.</p>

                    <label for="name">Name:</label>
                    <%= Html.TextBox("name") %>

                    <label for="email">E-mail:</label>
                    <%= Html.TextBox("email") %>

                    <label for="comment-value">Comments:</label>
                    <%= Html.Telerik().Editor()
                            .Name("comment")
                            .Tools(tools => tools
                                .Clear()
                                .Bold().Italic().Separator()
                                .InsertOrderedList().InsertUnorderedList().Separator()
                                .Indent().Outdent()
                                .CreateLink().InsertImage()
                            )%>

                    <div class="form-actions">
                        <button type="submit" class="t-button">Submit feedback!</button>
                    </div>

            <% } %>
        <%})
        .Width(400)
        .Draggable(true)
        .Modal(true)
        .Visible(false)
        .Render();
%>

<button id="feedback-open-button" class="t-button">Submit feedback...</button>

<% Html.Telerik().ScriptRegistrar()
    .OnDocumentReady(() =>
    {%>
        // open the initially hidden window when the button is clicked
        $('#feedback-open-button')
            .click(function(e) {
                e.preventDefault();
                $('#Window').data('tWindow').center().open();
            });

        var editor = $('#comment').data('tEditor'),
            oldExec = editor.exec;

        // capture calls to the 'exec' command of the editor
        editor.exec = function(name, params) {
            if (name == "createLink" || name == "insertImage") {
                // move parent window behind
                $('#Window').css('z-index', 9000);

                function restore() {
                    $('#Window').css('z-index', '');
                    $(editor.element).unbind('selectionChange', arguments.callee);
                    $(document.documentElement).undelegate(".t-close,.t-dialog-close", 'click', arguments.callee);
                }

                // restore z-index when command finishes
                $(editor.element).bind('selectionChange', restore);
                $(document.documentElement).delegate(".t-close,.t-dialog-close", "click", restore);
            }

            // delegate call to default exec function
            oldExec.call(editor, name, params);
        };
    <%}); %>

I have logged the issue to the issue tracking system.

Regards,
Alex Gyoshev
the Telerik team

[Jozef]

Hello Alex,

thank you for your long post. In meantime I was able to find another workaround = hook to editor's event OnExecute and if it is action opening new window (hyperlink/image), disable window's buttons. If time allows, I'll try your hack. 

Best regards,

Jozef