I have a problem with ckeditor and jquery dialog window.
I have a form in which I'm dragging a div to a sortable table. When dragging I'm cloneing the div and opening a jquery dialog which contains the ckeditor.
The editor is created on the dialog's open method, and is being destroyed on close.
After dragging the edtior for the first time it opens in the dialog, but then all the dialogs in the page are not opening.
I'm getting this error: Uncaught TypeError: Object [object Object] has no method 'dialog' when trying to open another dialog or drag another div with the editor.
My code is:
var CKEditor
$("#dialog_editor").dialog({
autoOpen: false,
height: 500,
width: $("#td_form").width(),
modal: true,
zIndex: -1,
buttons: [
{
text: "Save",
"class": 'btn btn_content',
click: function () {
saveEditorContent();
}
}
],
open: function (type, data) {
$(this).parent().appendTo("#form");
CKEditor = CKEditor = CKEDITOR.replace('text_editor', {
extraPlugins: 'autogrow',
removePlugins: 'resize'
});
},
close: function () {
CKEditor.destroy();
}
});
I have searched all over the web, and still found no answer to that.
I tried adding the adapters/jquery.js and still the same problem...
You should try to update the "Uploadcare" plugin to the current version, everything should be fine just after that.
I found out that the problem was in a plugin I added to the ckeditor named "Uploadcare"
Related
I have a situation where I need to destroy kendo window once my job is complete.
Kendo window opens up on a button click and destroys when its job is complete.
But now I have a problem that I cannot open the window again on that button click once it is destroyed.
My Kendo Window code is :
var Snapshotwindow = $('#newWindow');
Snapshotwindow.kendoWindow({
width: "500px",
height: "267px",
resizable: false,
sortable: false,
modal: true,
draggable: false,
title: "New Window",
visible: false,
appendTo: "#AppBody",
});
Snapshotwindow.data("kendoWindow").center().open();
How can I achieve it?
Can I re initialize the window once it is destroyed?
When a kendo Window widget is destroyed, it removes it's HTML elements from the DOM including the root element from which it was created. This is why you are unable to open the window a second time. This leaves you with two basic approaches when using the Window widget:
Create the widget first time around, holding a reference to it. Don't destroy on close, and re-open subsequent times using the reference.
if (Snapshotwindow == null) {
Snapshotwindow = $('#newWindow').kendoWindow({
width: "500px",
height: "267px",
resizable: false,
sortable: false,
modal: true,
draggable: false,
title: "New Window",
visible: false,
appendTo: "#AppBody",
}).data("kendoWindow");
}
Snapshotwindow.center().open();
Append a new element to the DOM, turning that into a window widget before showing it. Can be safely destroyed, and the process subsequently repeated as many times as you like.
<script id="modal-editor-window" type="text/x-kendo-template">
<!-- your window content here -->
</script>
<script type="text/javascript">
var options = {
title: "Edit",
modal: true,
visible: false,
deactivate: function () {
this.destroy();
}
};
var mew = $.parseHTML($("#modal-editor-window").html().trim());
$("body").append(mew);
var mw = $(mew).kendoWindow(options).data("kendoWindow");
mw.center().open();
</script>
Since you say you need to destroy the window, option 2 is the way to go; I would suggest that loading the new DOM element is probably easiest to achieve by using a kendo template (as shown above).
This function display the dialog. While opening, it creates also a kendo editor. The problem is that, when the dialog is closed then reopened, the editor is duplicated.
function openChangeProjectStatusPopup(popupElementName) {
$("#" + popupElementName).dialog({
width: 700,
height: 400,
draggable: false,
resizable: false,
modal: true,
open: function () {
$('#changePhaseTextArea').kendoEditor();
},
close: function () {
}
});
}
To avoid duplication, I should do a check like this
if(changePhaseTextArea is a not already a kendoeditor){
$('#changePhaseTextArea').kendoEditor();
}
I've checked the kendo websites, I can't find where one can check the type of the object.
Thanks for helping
The easiest way is asking for the widget object that is referenced via data("kendoEditor") or in general data("kendo_<String>") where <String> is the name of the widget.
For your code example:
var elem = $("#changePhaseTextArea");
if (!elem.data("kendoEditor")) {
$('#changePhaseTextArea').kendoEditor();
}
I have an application. In a button clicked I tried to open a Kendo modal window. It's opening. My application is in one domain and the content of the Kendo window is from another domain. Now I want to close the modal window with a button which is inside the Kendo window. Here the issue begins. I cannot close the modal window. I searched using Google it but did not find any solution — do you know one?
After reading your comments to my previous answer I think that you question is misleading. You talk about modal, another domain and close button but seems from your comments that nothing of that is actually relevant. I conclude from your comments that you want to place a button (actually a close button but might be any other) in a KendoUI window and in addition you want to display a page (that incidentally) is in a different domain. If this is what you actually want -and foreseeing problem related to cross-domain and security- I would recommend that you should actually use content.template and define a template including your button and an iframe referencing the page www.xyz.com.
Something like this...
var myWindow2 = $("#id2").kendoWindow({
modal : true,
draggable: false,
content : {
template: 'Close' +
'<iframe src="http://www.xyz.com" frameborder="0" class="k-content-frame"></iframe>'
},
visible : false,
width : 400,
height : 200,
resizable: false,
iframe : true
}).data("kendoWindow");
$("#open2").on("click", function () {
myWindow2.center();
myWindow2.open();
});
$("#close2").on("click", function () {
myWindow2.close();
});
You might even make the button float on top of the rest of the page by defining the following style for close button.
#close2 {
position: absolute;
top: 10px;
left: 10px;
z-index: 10000;
}
The following JavaScript code defines a button for opening a modal kendoWindow. Once clicked you can press a button inside the body of the window for closing it as you want.
JavaScript code:
var myWindow = $("#id1").kendoWindow({
title : "hi",
visible: false,
modal : true
}).data("kendoWindow");
$("#open").on("click", function () {
console.log("opening");
myWindow.center();
myWindow.open();
});
$("#close").on("click", function () {
console.log("closing");
myWindow.close();
})
and the HTML:
Open
<div id="id1">
<p>this is the content of my window</p>
Close
</div>
I want to write code on Refresh button click of JQGrid. Is there any event for that?
If you need to do some actions before refresh will be started you should use beforeRefresh callback:
$("#grid_id").jqGrid('navGrid', '#gridpager', {
beforeRefresh: function () {
// some code here
}
});
If you need absolute another implementation of grid Refreshing where you will not call $("#grid_id").trigger("reloadGrid"); (which sound strange) you can do this by the usage of refresh: false option to remove the standard Refresh button and using navButtonAdd to add your custom button which looks exactly like the original one:
$("#grid_id").jqGrid('navGrid', '#gridpager', {refresh: false});
$("#grid_id").jqGrid('navButtonAdd', "#gridpager", {
caption: "", title: "Reload Grid", buttonicon: "ui-icon-refresh",
onClickButton: function () {
alert('"Refresh" button is clicked!');
}
});
The css for refresh button is ui-icon-refresh
so you can write your custom code on this css like
jQuery('.ui-icon-refresh').click(function(){
// do your work
});
In telerik mvc grid i want to display some data in popup window when i click on a link button. But not using Ajax. Below is the code i am using but it is not working. Any help is appreciated
#section JavaScript{
<script type="text/javascript" language="javascript">
$(function () {
$(".lnkShortCodeAndKeyword").click(
function (e) {
e.preventDefault();
var WShortCodeAndKeyword = $.telerik.window.create({
name: "ShortcodesWindow",
title: "Shortcodes",
contentUrl: $(this).attr('href'),
modal: true,
resizable: true,
draggable: true,
scrollable: true,
width: 960,
height: 600,
onClose: function () {
destruir(this);
}
}).data('tWindow').center();
}
}
If you are not using the Window component anywhere on your View (by using Html.Telerik().Window() for example) you will have to manually add the required JavaScript files when you define your ScriptRegistrar. Normally, if you declare the components on the page the ScriptRegistrar takes care of everything for you, but if you just try to create this on the client-side you will have to do something along the following lines:
#(Html.Telerik().ScriptRegistrar().DefaultGroup(group => group.Add("telerik.common.js").Add("telerik.draganddrop.js").Add("telerik.window.js").Combined(true).Compress(true)))
As you can see I just manually defined the JavaScript files I wanted to load. Keep in mind to not add the "min" suffix as the ScriptRegistrar takes care of this as well (.min.js will only be used in production code and not debug).