i have a kendo window which opens an iframe form. when they submit the form and it shows the results i want the window to widen. how can i set the of the window on click of button.
var window = $("#PCwindow"),
PCopen = $("#PCopen").bind("click", function() {
window.data("kendoWindow").center();
window.data("kendoWindow").open();
});
window.kendoWindow({
visible: false,
modal: true,
width: "500px",
height: "500px",
title: "Performance Checker",
content: "PCchecker.html",
iframe: true
});
i want the window to go to 700px wide
Use:
window.data("kendoWindow").setOptions({width : 700});
In addition, and in order to optimize your code, I would suggest reducing the number of times that you execute window.data("kendoWindow") by writing it as:
var window = $("#PCwindow"),
PCopen = $("#PCopen").bind("click", function () {
window.data("kendoWindow")
.center()
.open()
.setOptions({width: 700});
});
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).
I am trying to load different static html files into a KendoWindow based on a link the user clicks. I am using the following to load the content.
$(document.body).append('<div id="formWindow"></div>');
$('#formWindow').kendoWindow({
visible: false,
iframe: true,
height: "auto",
maxWidth: 700,
title: noticeTitle,
modal: true,
resizable: true,
width: 700,
refresh: function() {
this.center();
},
close: function(e) {
var dialog = $("#formWindow").data("kendoWindow");
dialog.destroy();
},
content: formContent
});
When I use "iframe: false", the window size (height) is the correct size. However I need an iframe because sometimes the loaded page is a form for submitting data and I don't want the whole browser page to change, just the contents of the KendoWindow. When "iframe: true" is used, the KendoWindow size is almost the height of the browser screen (i.e. way too tall).
I would like to be able to adjust the window to fit the dynamically loaded contents, but I cannot figure out how to use JavaScript or JQuery to get the height of the window contents.
My content is always balanced tags and a page fragment (i.e. no tags).
Thanks!
I don't think you can. However, I found this: http://www.telerik.com/forums/automatic-width-and-height-on-window#Gx4FWdFC8EG4JXoxoq2PLw
I have an ExtJS popup in my application.
Inside the popup there is a BoxComponent with an image. The image usually takes a few seconds to load. I would like to show a "Loading..." spinner message in the box to inform the user know that something is happening.
Here is a sample of my code right now:
function createPopup(id) {
picUrl='/create_image.py?date='+id
popup = new GeoExt.Popup({
title: 'Info: ' + id,
height: 350,
width:425,
items: [pic]
});
pic = new Ext.BoxComponent({
id: 'pic',
autoEl: {tag: 'img', src: picUrl},
border: false,
width: 400,
height: 300,
listeners: {
//SHOULD I HANDLE MY PROGRESS SPINNER SOMEWHERE HERE???
}
});
popup.show();
}
I'm a newbie to ExtJs and I couldn't figure out how to do this.
I assume that I probably must create two event listeners:
The first event is when the BoxComponent (or the popup?) appears.
The second event is when the image finishes loading. In the first event, I show the progress spinner and in the second event, I hide the progress spinner.
What are the events in the Ext.BoxComponent or in the Ext.Popup that I should use?
Or is there an easier way to show the progress spinner while the image is loading?
I suggest by default having a rule on an image component that shows a background image of spinner, and then place a listener for onload which would remove the rule to hide it.
The suggestion by Vu Nguyen set me on the right track. My version of ExtJs is 3.4 so I couldn't use 'image component'. But I discovered the Ext.LoadMask component that works well as a loading progress spinner. First, I attached the LoadMask to the popup.el element. The next trick was to capture the render event of the BoxComponent and the load event of the image. In the render event I show the LoadMask spinner and in the load event I hide it:
pic = new Ext.BoxComponent({
id: 'pic',
autoEl: {
tag: 'img',
src: picUrl
},
border: false,
width: 400,
height: 300,
listeners: {
render: function (c) {
var myMask = new Ext.LoadMask(popup.el, {
msg: "Loading station data..."
})
//show the spinner when image starts loading
myMask.show()
c.getEl().on('load', function () {
//hide the spinner when image finishes loading
myMask.hide()
})
}
}
})
popup = new GeoExt.Popup({
title: 'Info: ' + stname,
height: 350,
width: 425,
items: [pic]
})
popup.show()
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 have a Firefox extension which adds a toolbar Widget with a panel which should display when the widget is clicked. Under certain circumstances, the panel should not show when the toolbar widget is clicked.
I am instantiating the toolbar and panel like so:
var popup = panel.Panel({
width: 310,
height: 400,
contentURL: self.data.url('panel.html'),
contentScriptFile: self.data.url('panel.js'),
// NOTE: You can't use the contentStyleFile option here.
});
var toolbarOptions = {
id: 'someid',
label: 'Some Label',
contentURL: self.data.url('icon-16.png'),
panel: popup
};
// There doesn't seem to be a way to remove the toolbar in PB mode.
var toolbar = widgets.Widget(toolbarOptions);
How can I cancel the panel opening from the widget click handler? It seems to always open no matter what logic I put in there.
toolbar.on('click', function() {
if (dontShowPanel()){
// I want to somehow cancel the panel opening at this point.
} else {
panel.show();
}
});
I have tried to return false; from the click hander which doesn't seem to work. I have also tried to call panel.hide(). That doesn't seem to work either.
I'm using version 1.10 of the add-on SDK.
Your click event handler is called before the panel shows up which means that you can still change the panel at this point. However, something that is non-obvious: changing the panel of the Widget object won't have any immediate effect, you need to change it for the WidgetView object (the widget instance in the particular browser window). That object is being passed as a parameter to the click event handler. So your toolbar options could look like this:
var toolbarOptions = {
id: 'someid',
label: 'Some Label',
contentURL: self.data.url('icon-16.png'),
onClick: function(view) {
if (dontShowPanel()){
view.panel = null;
} else {
view.panel = popup;
}
}
};
When you create the widget, you need to add the panel instance as a property:
var panel = require("panel").Panel({
width: 250,
height: 250,
contentURL: data.url('panel.html')
});
require("widget").Widget({
id: 'id',
label: 'my-label',
contentURL: data.url('http://www.mozilla.org/favicon.ico'),
panel: panel
});
Update: sorry I didn't understand the entire question. As far as I know there is no way to conditionally prevent show the panel based on the click event, in a way that will preserve the anchoring.