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).
Related
I am using angularjs-dragula and I am not able to auto scroll to the overflow container that is hidden from the screen.
This is my issue:
I have five containers in my dragula and the 5th container is hidden from the screen. Now I want to drag an element from the first container and drop it in the 5th container. But I am not able to do this, since the screen is not auto scrolling to the 5th container.
Does angularjs-dragula support vertical scrolling? or is there a property that I'm missing?
Example Plunkr : https://plnkr.co/edit/iD38MugmHIx298p7OlrI?p=preview
var app = angular.module('angular-dragula-demo', [angularDragula(angular)]);
app.controller('MainCtrl', function($scope, dragulaService) {
dragulaService.options($scope, 'fifth-bag', {
copy: true
});
});
It seems like this option is not implemented in Dragula. Dragula's developer suggests to use the module dom-autoscroller.
See this issue on Github: https://github.com/bevacqua/dragula/issues/121
To implement this functionality with AngularJS:
1) Download dom-autoscroller from the official repo: https://github.com/hollowdoor/dom_autoscroller/blob/master/dist/dom-autoscroller.min.js
2) Include it in your project folder
3) Enable autoscroll in your controller:
// ENABLE AUTOSCROLL FOR GOALS LIST
var scroll = autoScroll([
document.querySelector('.list')
], {
margin: 30,
maxSpeed: 10,
scrollWhenOutside: true,
autoScroll: function () {
//Only scroll when the pointer is down
return this.down
}
});
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.
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 think I have found a bug in the kendoui grid when column resizing is enabled (version 2013.1.319). All columns but one disappear when resizing.
I'm testing this in IE9 and IE8. Chrome does not have the bug (maybe other browser also don't)
Here is a jsbin that displays the problem:demo
Has anyone has a workaround for this bug?
Give the column a width, we using the same Kendo build and it works in IE, but we have a width on every column :
columns: [
{
title: "one", width: "50px"
},
I Just did this
.k-grid td {
max-width: 200px;
}
after javascript initialized grid
I have a kendo window that contains a kendo numeric text box:
$('input').kendoNumericTextBox({
decimals: 2,
spinners: false
});
$('#win').kendoWindow({
modal: true,
width: "969px",
height: "646px",
title: "NumericTextBoxTest"
});
$('#win').data('kendoWindow').center().open();
The jsfiddle is here http://jsfiddle.net/e6shF/40/.
In Firefox, you are unable to highlight the numeric text box value. In Chrome, you can highlight the value but can't type over the value while it is highlighted.
It appears to be a focus issue due to improper z-indexing. I'm using kendo version 2012.3.1114 (latest GPL release). This issue is no longer present in kendo version 2012.3.1315 but that version doesn't appear to be available under GPL. How can I resolve this issue using kendo 2012.3.1114?
Adding a .focus() event listener to the input, wrapped in a setTimeout with an input.select() seems to force it to behave normally.
$('input').kendoNumericTextBox({
decimals: 2,
spinners: false
}).focus(function() {
var input = $(this);
setTimeout(function() {
input.select();
});
});
Fiddle: http://jsfiddle.net/HwrzV/1/
Works for me now in Firefox and Chrome. Tried to test IE8 but JSFiddle doesn't load. :x