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
Related
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.
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 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'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 a draggable YUI Panel defined like this
new YAHOO.widget.Panel("parameters", {
fixedcenter: true,
constraintoviewport: true,
underlay: "shadow",
visible: false,
close: true,
draggable: true,
width: "350px" });
When the panel is shown, I want it to remain always visible, even when the window is scrolled.
This is also the case, thanks to fixedcenter: true. The problem is that when the window is scrolled the panel positions itself to the center of the window even if it was dragged somewhere else previously.
How should I modify the above definition so that the position of the panel remains constant relative to the window when the window is scrolled?
Wrap your panel container in a wrapper element that has fixed positioning, e.g.
<div id="wrapper" style="position: fixed">
<div id="parameters">
<div class="hd">Header</div>
<div class="bd">Hello, this is my awesome panel.</div>
<div class="ft">Footer</div>
</div>
</div>
Construct your panel without the fixedcenter configuration property, and center the panel immediately after you render it, e.g.
var panel = new YAHOO.widget.Panel("parameters", {
constraintoviewport: true,
underlay: "shadow",
visible: false,
close: true,
draggable: true,
width: "350px"
});
panel.render();
panel.center();
The panel should now stay in the same position when the window is scrolled. I only tested this in Firefox 3.0 and Internet Explorer 7 and 8.
I've posted the source of a self-contained example that will demonstrate this working.
As per the documentation, set the fixedcenter to:
"contained" To enable fixed center positioning, as with the true
option. However, unlike setting the property to true, when the
property is set to "contained", if the overlay is too big for the
viewport, it will not get automatically centered when the user scrolls
or resizes the window (until the window is large enough to contain the
overlay). This is useful in cases where the Overlay has both header
and footer UI controls which the user may need to access.
http://developer.yahoo.com/yui/docs/YAHOO.widget.Overlay.html