The web page is simple, and I have a kendo window, which I show right away at document ready, but no matter what I do, the window is not pinned. I would like the window to be fixed on the screen and let content roll underneath it.
I have not used Kendo much, but would like to do so for a couple of projects.
Any insights on what I am missing?
$(document).ready(function( event ) {
var window = $("#add-comment");
window.kendoWindow({
width: "300px",
height: "315px",
position: {
top: 100,
left: 100
},
title: "Add Comment",
modal: true,
pinned: true,
visible: true,
actions: ["Maximize", "Close"],
});
Although pinned is in the documentation here it is not in the latest release of code (v2013.1.514). Hopefully any time soon. Maybe this time they updated the documentation sooner than the code :-)
In the meantime, you can get it by defining a CSS style as this:
.ob-pinned {
position: fixed !important;
}
And adding the following piece of code (compatible with your initialization):
win = $("#add-comment").data("kendoWindow");
if (win.options.pinned) {
win.wrapper.addClass("ob-pinned")
.css("top", win.options.position.top)
.css("left", win.options.position.left);
}
Example here: http://jsfiddle.net/OnaBai/dcPex/
Related
I have an Electron app that opens a window like this:
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
titleBarStyle: 'hidden',
titleBarOverlay: {
color: '#6a7b8d',
symbolColor: '#eee'
},
//...etc
})
By passing titleBarOverlay.color and titleBarOverlay.symbolColor to the constructor, I'm able to change the style of the minimize/maximize/close buttons when the app is open in Windows.
Now the problem comes due to the fact that I'm planning to have themes. When the user changes themes, how can I change the color and symbolColor without having to restart the app completely?
I was thinking that I could save the state, close the window and reopen a new one. Is there a less complicated way though?
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).
In this jsfiddle I have two KendoWindow objects. The first one, dialog1, has a custom icon on the bar. The second one, dialog2, doesn't have the icon even though the "actions" attribute is set with setOptions.
Any ideas why setOptions is not working?
This is the javascript:
$("#dialog1").kendoWindow({
width: 200,
height: 200,
actions: ["Custom", "Close"]
});
$("#dialog1").closest(".k-window").css({
top: 20,
left: 20
});
$("#dialog2").kendoWindow();
var dialog2 = $("#dialog2").data("kendoWindow");
dialog2.setOptions({
width: 200,
height: 200,
actions: ["Custom", "Close"]
});
$("#dialog2").closest(".k-window").css({
top: 20,
left: 300
});
The Kendo team actually just fixed this bug Oct 14, 2014.
Here is the issue on GitHub and the commit that fixes it.
You can wait for the next release, or if you are using the free/opensource Kendo UI Core, then you can make a new build from the GitHub repo. I think if you are using the paid version of Kendo UI, there might be a way to download the latest internal build from your Telerik account.
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've got an interesting issue with creating a subgrid in the excellent jqGrid plugin. The main grid is working fine itself. However, when I add the parameters to create the subgrid, I get the new first column but do not get the plus sign. When I inspect the demo using Firebug I see that an href and several classes are added to the first column. I do not see those classes in the first column of my grid. Here's the code:
$("#quotelist").jqGrid({
datatype:'xml',
url:'getQuotes',
mtype: 'GET',
postData:{"a":$("#AccountNumber").val(),
"op":"y",
"cl":"n",
"cd":"All",
"eq":"All",
"sess":$("#SessionID").val(),
"d":new Date().getTime()
},
colNames:['Origin Zip', 'Destination Zip', 'Equipment', 'Commodity'],
colModel:[
{name:'ozip', index:'ozip', title:false, width:140},
{name:'dzip', index:'dzip', title:false, width:40},
{name:'equipment', index:'equipment', title:false, width:40},
{name:'commodity', index:'commodity', title:false, width:40}
],
loadError:function(xhr, st, err) {
alert('loaderror on quote request grid - ' + st)
},
pager:'#pager',
height: 550,
width: 425,
rowNum: -1,
hidegrid: false,
gridview: true,
gridstate:'hidden',
viewrecords: true,
altRows: true,
sortname: 'ozip',
sortorder: 'asc',
caption: 'Carriers',
subGrid:true,
subGridUrl:"getQuoteResponse&a="+$("#AccountNumber").val() +
"&sess=" + $("#SessionID").val(),
subGridModel: [
{name:['Carrier Name','Status'], width:[200,100]}
]
});
Other information:
I included the 'pager' to make sure the icons appear on the pager - they do. I've tried this on jqGrid versions 3.8.2 and 3.6.5 with the same result. jQuery version is 1.4.2, jquery UI version 1.8.2.
I think that the plus isn't appearing because I'm not getting the new classes in the first column when the grid loads, but I have no idea why not. It's weird that the first column appears when subGrid is set to true but then the plus sign isn't loaded.
Any idea? Many thanks for any suggestions!
edit: nevermind! I was editing this post to fix some formatting and found the problem. Too many parameters about hidegrid, gridview, etc. Those were left over from my initial experimentation with jqGrid.
The main problem is that gridview:true can not be used in your case. In the description of the gridview option in the documentation you will find
If set to true we can not use
treeGrid, subGrid, or afterInsertRow
event.
I gone through the same problem when I was working with jQuery Grid. In my case plus icon is not appearing but when I clicked on first column cell my subgrid appear. After searching for hour I finally got solution. In ui.jqgrid.css file include this code.
.ui-icon-plus {
height: 10px;
width: 10px;
background-image: url('../../Images/plus.gif');
}
.ui-icon-minus {
height: 10px;
width: 10px;
background-image: url('../../Images/minus.gif');
}
Image path will be your Image path. I am not giving height and width of image that's why I am not able to see in UI. Hope this help.