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

Kendo Editor inside Kendo Window(s)

3 Answers 292 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Mark asked on 26 Apr 2012, 01:58 PM
I am having issues when trying to combine these two widgets in an application.

The process I want is for a user to be able to:

1) Launch a kendo window
2) FROM the kendo window launch a second kendo window (using custom action) that contains a kendo editor

HTML snippets:

<div id="viewPort"><br><div id="viewPortTools"><input id="zoomSlider" /></div><br><div id="viewer"><br><img id="viewImg" style="zoom: 1.0" alt="graphic" src="http://localhost:1334/GetCachedImage.aspx?GUID=8954aa7f-dfd4-4273-945e-03b0f2a6dee9" /><br><div id="editorPort"><div><textarea id="editor" rows="10" cols="40"></textarea></div></div><br></div>


JavaScript:

$(document).ready(function () {

var viewport = $("#viewPort").kendoWindow({
        actions: ["Custom", "Refresh", "Maximize", "Minimize", "Close"],
        draggable: false,
        visible: false,
        height: "95%",
        width: "95%",
        modal: true,
        resizable: false,
        title: "ViewPort"
    }).data("kendoWindow").wrapper.find(".k-custom").click(function (e) {
            console.log(e);
            var editport = $("#editorPort").data("kendoWindow");
            editport.center();
            var editor = $("#editor")
            editport.open();
            e.preventDefault();
        });
        
    //Configure editor used for annotations inside popup modal window.
    $("#editor").kendoEditor({
        tools: [
             "bold",
             "italic",
             "underline",
             "foreColor"
         ]
    });
    //Configure editor popup window used by editor
    var editport = $("#editorPort").kendoWindow({
        actions: ["Close"],
        draggable: true,
        visible: false,
        height: "200px",
        modal: false,
        resizable: false,
        title: "Editor Full Window",
        width: "400px"
    }).data("kendoWindow");
    //Placeholder function to test viewPort
    $("#folderTitle").click(function () {


        var viewport = $("#viewPort").data("kendoWindow");
        viewport.center();
        viewport.open();
    });
});

However depending on the order of the editor and window declarations and the placement of the div that contains the editor (#editorPort) either of the following occurs:

1) Inline editor - Toolbar is corrupted and buttons displayed one below the other. Edit are works (e.g. contenteditable)
2) outline editor - Toolbar is fine however editor is not well editable. (by outline I mean that the #editorPort is placed outside of #viewPort in the DOM).

Any thoughts/comments?

Thanks,

Mark.

3 Answers, 1 is accepted

Sort by
0
Vivek
Top achievements
Rank 1
answered on 29 Apr 2012, 08:10 PM
Where have you placed the HTML for the windows? I've found that unless its placed no more than one level deep inside <body> it leads to problems like you describe.
0
Mark
Top achievements
Rank 1
answered on 30 Apr 2012, 12:10 PM
Hi Vivek,

I have tried placing the HTML for the window immediately after the body tag per your comment and it still exhibits the second problem i.e. the editor is not editable when it's HTML is part of a kendo window. So the issue still occurs irrespective of the first popup window given in my example below.

Thanks,

Mark.
0
Joshua
Top achievements
Rank 1
Veteran
Iron
answered on 06 Jul 2012, 08:45 PM
has anyone resolved this?

In IE9, I find that if i open a window with an editor on it, then i can open it 3 times. the third time, i cannot edit it.

I get the following chain of errors:

SEC7111: HTTPS security is compromised by (null) 
html>"
SCRIPT438: Object doesn't support property or method 'open' 
kendo.all.min.js, line 8 character 200364
SEC7111: HTTPS security is compromised by (null) 
html>"
SCRIPT70: Permission denied 
kendo.all.min.js, line 8 character 219525
Tags
Editor
Asked by
Mark
Top achievements
Rank 1
Answers by
Vivek
Top achievements
Rank 1
Mark
Top achievements
Rank 1
Joshua
Top achievements
Rank 1
Veteran
Iron
Share this question
or