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.
Related
Under some circumstances I need to enlarge the edit and add form dialog in jqgrid.
I tried with
$("#contratos").jqGrid('navGrid', '#paginacion', {}, {width: 900});
Without success.
I am using JQGrid 4.5.2.
To set width for both edit and add dialogs you should use
$("#contratos").jqGrid('navGrid', '#paginacion', {}, {width: 900}, {width: 900});
or
var formEditOptions = { width: 900 };
...
$("#contratos").jqGrid('navGrid', '#paginacion', {}, formEditOptions, formEditOptions);
Such settings will still work not dynamically (see the title of your question). One can use beforeShowForm callback instead:
var formEditOptions = {
beforeShowForm: function ($form) {
$form.closest(".ui-jqdialog").width(500);
}
};
...
$("#contratos").jqGrid('navGrid', '#paginacion', {}, formEditOptions, formEditOptions);
Finally I'd recommend you to consider to upgrade from the retro version 4.5.2 to the current version of free jqGrid (the version 4.13.6). The version 4.5.2 was published almost 4 years ago (21 May 2013) at the time of Chrome 26, Firefox 21, IE 10. One uses now Chrome 55, Firefox 50, Edge 38 and IE 11. I'd recommend you to try free jqGrid 4.13.6 by loading jqGrid files directly from CDN (see the wiki article).
I recently upgraded my jqGrid from an older version (4.4.5) up to (4.13.4-pre)
"autowidth": false,
"shrinkToFit": true,
"loadonce": true,
"scroll": 1,
FWIW - I'm using it inside a paneled layout (acheived via jQuery UI Layout )
Everything works great, both versions initially load up my data and display nicely - no need to change my startup grid options or colModel etc..
However, if I hover my mouse over the data region and use the wheel to start scrolling through the data, eventually the 4.13.4 version of the jqGrid will flicker or refresh to build up the next page of data and that's when it introduced the undesired scrollbar state shown here:
I have some resizing logic already in place so that when the parent panel is resized, the grid snaps into correct position - same for when the user resized the window. All of that functions just as well on both versions of jqGrid -
Just wondering if there was something I missed in the meantime - I feel like I've uncovered a bug, however.
UPDATE
I've been able to isolate the jqGrid control from the aforementioned jquery UI Layout scripts. The bad behavior persists.
When the page is finished loading, I call a script like this to "patch up" the width and size of my jqGrid so it fits inside a desired parent DIV:
function patchUpJQGrid_FitInParentDiv() {
var newWidth, newHeight, myGridCtrl;
myGridCtrl = $("#mainGridControl");
newWidth = $("#parentMainGridDiv").width() - 50;
newHeight = $("#parentMainGridDiv").height() - 50;
myGridCtrl.jqGrid('setGridWidth', newWidth, false);
myGridCtrl.jqGrid('setGridHeight', newHeight);
}
window.setTimeout(patchUpJQGrid_FitInParentDiv, 5000);//ensure jqGrid correctly sized
Thus, after the above script runs, the UI is all set and sized correctly.. but then you begin scrolling (either with mouse wheel or using scroll bar) and eventually the grid width disregards what was initially instructed via 'setGridWidth' and now the parent DIV is essentially masking or eclipsing the vertical scrollbar that you need if you want to continue scrolling..
SOLUTION
See the accepted answer below for more details. I'd like to mention that these add'l options (copied from another Oleg answer) are helping me acheive what I want in my jqGrid instances (see updated jsfiddle demo)
cmTemplate: { autoResizable: true },
autoResizing: { compact: true },
autoresizeOnLoad: true
Some jqGrid options, which you use in jqGrid are wrong in case of usage scroll: 1. You fixed the problems in old jqGrid by usage patchUpJQGrid_FitInParentDiv. To make the code working in free jqGrid you need just fix the original options of jqGrid.
The main problem in the options is the usage of height: 'auto' and specifying of no width options. It's wrong if you use scroll: 1. One should specify any fixed values for height and width options. You can modify the values later, but the initial values are very important and there modifies the behavior of resizing.
What you need to do is to change the options
...
pager: '#pager1',
altRows: true,
altclass: 'myAltRowClass',
rownumbers: true,
gridview: true,
rowNum: 50,
rowList: [50, 100, 250],
height: 'auto',
caption: "Test Queue",
scrollOffset: 2,
viewrecords: true,
sortorder: 'desc',
}
to
pager: '#pager1',
altRows: true,
altclass: 'myAltRowClass',
rownumbers: true,
gridview: true,
//rowNum: 50,
//rowList: [50, 100, 250],
//height: 'auto',
width: 450,
height: 404,
caption: "Test Queue",
//scrollOffset: 2,
viewrecords: true
//sortorder: 'desc',
}
After the changes one can remove the call of patchUpJQGrid_FitInParentDiv because it's no more required.
I want to stress that the above changes are strictly recommended event for the old jqGrid versions. The changes are required for free jqGrid.
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/
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.
i have written this code to apply 'jQuery Tooltip plugin' to ajax loaded elements.
i mean the row i want to show tooltip on its mouseover is loaded into page by ajax.
here's the code:
$("[id^=pane]").delegate("[id^=comm]","mouseover",function() {
$(this).tooltip({
// each trashcan image works as a trigger
tip: "#tooltip",
// custom positioning
position: "center right",
// move tooltip a little bit to the right
offset: [0, 15],
// there is no delay when the mouse is moved away from the trigger
delay: 0
}).dynamic({ bottom: { direction: "down", bounce: true } });
});
the tooltip is shown when mouseover but firebug report this error:
"$(this).tooltip({tip: "#tooltip", position: "center right", offset: [0, 15], delay: 0}).dynamic is not a function"
is it because of using $(this) ???
The problem is that you haven't loaded the dynamic function. From the jQuery tools documentation:
the dynamic plugin and the slide effect are not included in the standard jQuery Tools distribution. You must download a custom combination to include those effects.
Furthermore, you don't need your delegate call. You are redoing the tooltip creation on every mouseover. You only need to do it once; the plugin will handle the events internally.
$("[id^=pane] [id^=comm]").tooltip({/*...*/})
.dynamic({/*...*/});
This selects all elements with ids beginning comm that are children of elements with ids beginning pane. Note that adding appropriate classes to all these elements would speed up your selection significantly.
it is solved now,i searched more in google and found the solution.
here it is:
$("[id^=pane]").delegate("[id^=comm]:not(.hastooltip)","mouseover",function() {
$(this).addClass("hastooltip").tooltip({
tip: "#tooltip",
position: "bottom center",
offset: [-10, 0],
delay: 0
}).dynamic({ bottom: { direction: "down", bounce: true } }).mouseover();
});