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:
JavaScript:
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.
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();
});
});
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
0
Vivek
Top achievements
Rank 1
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
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.
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 2
Iron
Veteran
Iron
Rank 2
Iron
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
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