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
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).
When editing content that includes a table in ckeditor, it shows a border around table cells even though there is no border in the markup. This seems to be a convenience feature, so I'd like to be able to toggle it, perhaps via a checkbox in the toolbar. Is this possible? Perhaps there is a plugin of some sort that I have not configured? Thanks for your help.
Screen shot of table borders
This this best example to hide table border. Key player is : startupShowBorders: false,
$(function () {
var editor = CKEDITOR.replace("textarea", {
width: 750, height: 500, fullPage: true,
extraPlugins: 'stylesheetparser',
allowedContent: true,
qtBorder: '0',
startupShowBorders: false,
////pasteFilter: 'semantic-content',
//// Custom stylesheet for editor content.
//// contentsCss: ['content/css/html-email.css'],
//// Do not load the default Styles configuration.
stylesSet: []
});
});
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});
});
If table contains big multi-line text column, pressing jqgrid view toolbar button creates view window
with big height and without scrollbar. Most of data is outside screen and is not visible.
I tried to add scrollbars and restrict its height using
jQuery.extend(jQuery.jgrid.view, {
savekey: [true, 13],
recreateForm: true,
closeOnEscape: true,
dataheight: screen.height-230,
height: 0.82* screen.height,
width: 0.96*screen.width,
top:5
});
but those settings are ignored ( they work for edit window only if jQuery.jgrid.edit is used).
How to add scrollbar(s) and retrict view window height if it contains more data than fits to screen ?
I suggest to get the demo from the answer and extend the code a little. In the method beforeShowForm I suggest to include additional line
$(this).children("span").css({
overflow: "auto",
"text-align": "inherit", // overwrite 'text-align: "right"' if exist
display: "inline-block",
"max-height": "100px"
});
You can see the results on the demo. The height of the View form will be variable, but the maximal height of every field will be restricted to 100px (see max-height above):
or
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).