How to restrict maximum height of row in jqgrid - jqgrid

Column contains long multiline texts which make row height too big.
I tried styles below based on Tony's answer in
http://www.trirand.com/blog/?page_id=393/help/possible-row-height-bug-in-in-ie8/
but those do not limit row maximum height: Row height is still equal to by number of lines in column.
How to limit maximum height of row to some value? Text should not wrap (as it already is using jqGrid default settings) and remaining rows should not shown. (Whole text can examined in edit mode if edittype textarea is used).
jqgrid tr.jqgrow td {
max-height : 100px;
}
ui-jqgrid tr.jqgrow td {
max-height : 100px;
}
td {
max-height : 100px;
}
tr {
max-height : 100px;
}

You can't use max-height on td or tr elements, but you can place the multiline text inside of the <div> having the same style. To do this you can use for example the following custom formatter:
formatter: function(v) {
return '<div style="max-height: 100px">' + v + '</div>';
}
or place the <div style="max-height: 100px">...</div> inside of your JSON/XML data. As the result you will have something like
(I displayed tooltip during I made the screenshot to show that the data in the cell contain more lines as displayed in the grid)
See the corresponding demo here.

I know this is late, but you can use this CSS for ALL columns:
.ui-jqgrid tr.jqgrow td {
white-space:nowrap;
}
Or, for an individual column:
.no-wrap-col {
white-space: nowrap;
}
Then in your ColModel, on whichever column you want to prevent wrapping on, apply the class:
classes: "no-wrap-col"

Related

How scroll table and fix head in top

I create table and fix head and body but I can't scroll it with this CSS:
.t1 tbody {
height: 100px;
overflow: auto;
}
.t1 thead > tr, tbody {
display: block;
}
so I find this link :
http://jsbin.com/bipusabici/edit?html,output
it's work great but my problem is that structure of table is different of normal table with thead and tbody.
This is my fiddle and I want scroll it with this normal table structure:
http://jsfiddle.net/snicee/46jzhs94/3/
You can't do it by using table with auto widths in css but you can do using fixed width coulmns in css

Manually override column cells left/right padding dont work

Demo is found at link remvoed and using jqgrid version 4.9.2
In there you'll find I made a link reference to seperate CSS file at https://dealerapp-dev.bookitout.com/Member/Css/jqgrid-v4.9.2/ui.jqgrid-bio-extended.css
In that file, I override the default left/right padding found at ui.jqgrid.css, changed it from 2px to 15px in ui.jqgrid-bio-extended.css
The left padding works great but right padding is hidden (or chopped off).
.ui-jqgrid tr.jqgrow > td { padding: 0 15px 0 15px; }
How to have it not be chopped off instead?
First of all one can see that the width of the column is not optimal after auto-resizing. The problem exist because getAutoResizableWidth method used during calculation of the optimal size suppose that the padding of all rows is the same. There are exist the first row of the width 0px which have class jqgfirstrow instead of the class jqgrow used in other rows with data. To fix the problem you should adjust .ui-jqgrid tr.jqgfirstrow > td too
.ui-jqgrid tr.jqgfirstrow > td { padding: 0 15px 0 15px; }
I would recommend you to use the following more common CSS rule:
.ui-jqgrid tr.jqgfirstrow > td,
.ui-jqgrid tr.jqgrow > td,
.ui-jqgrid tr.jqgroup > td,
.ui-jqgrid tr.jqfoot > td,
.ui-jqgrid tr.jqfoot > td,
.ui-jqgrid tr.footrow > td {
padding: 0 15px 0 15px;
}
and to consider to increase the padding of column headers additionally:
.ui-jqgrid .ui-jqgrid-htable th {
padding: 0 15px 0 15px;
}
.ui-jqgrid .ui-jqgrid-resize-ltr {
margin: -2px -15px -2px 0;
}
About chopping off the text in the cells there are exist a misunderstanding of padding in my opinion. The text not have to be cut off. I don't know CSS good enough, but I can suggest you to place the content of every cell inside of <div> which have CSS property overflow: hidden. It will follow the cutting of the content in the case. The corresponding code
$("#" + _jqgridSpreadsheetId).bind("jqGridAfterLoadComplete jqGridAfterAddRow", function () {
$(this).find("tr.jqgrow>td").wrapInner("<div style='overflow: hidden;'></div>");
});
will reduce the performance of the grid, but it will make chopping off the texts like you want. It's recommended to add the code before the grid will be created. Only in the case you will be sure that the code will work on the first loading of the grid.
The last remark. You should add jquery-2.0.3.min.map and in the same folder where you have jquery-v2.0.3.min.js, because comment //# sourceMappingURL=jquery-2.0.3.min.map exist in the jquery-v2.0.3.min.js. In the same way jquery-2.0.3.min.map contains typically "sources":["jquery-2.0.3.js"] and so you should include non-compressed file jquery-2.0.3.js too. Currently loading of you demo in debugger produces the following error message in the console:
HTTP404: NICHT GEFUNDEN: Der Server hat keine Übereinstimmungen für
den angeforderten URI (Uniform Resource Identifier) gefunden. (XHR):
GET -
https://dealerapp-dev.bookitout.com/Member/Scripts/jquery-v2.0.3/jquery-2.0.3.min.map

How to refer kendo grid column to nested field or multiple fields?

I'm using kendi ui grid and have two questions:
Lets say each item in my collection is as follows:
{ id: "1",
properties: {
color: red,
width: 100 }
}
How do I set a column field to be "properties.color" or "properties.width"?
How do I combine two fields in the same column. If I want color and width to be in the same column?
Using a template in your column definition, you can refer to any property on your data item; so you could do something like this to display both values:
{
field: "properties",
template: "<span style='display: inline-block; width: 80%; height: 100%; background-color: #= properties.color #'></span><span> #= properties.width #</span>"
}
(demo)
If you want it to be editable, you'll need to create the editor manually.

custom icons in jqgrid treegrid

It seems Pager functionality is currently disabled for treegrid. But I would like to add some custom icons like export icon, refresh to the top pagination as shown below. Are there any other alternatives to achieve this functionality for treegrid as well. Thanks in advance...
First of all I would recommend you to read the answer which describe how to add toppager to the grid. You can do the same with tree grid.
The id of the toppager will be constructed from the grid id. If the grid id for example is "treegrid", then the id of the toppager will be "treegrid_toppager". The pager will hold tree parts: left, center and right. Because the toppager of the tree grid will be always empty you can save the place on the pager if you remove or hide the center part:
$('#treegrid_toppager_center').hide();
The next improvement in position of the texts in the navigator bar you can archive if you would include the text inside of <span> element which CSS styles you can define yourself. For example
$grid.jqGrid('navGrid', '#treegrid_toppager',
{add: false, edit: false, del: false, search: false,
refreshtext: '<span class="ui-pg-text">Refresh</span>'});
$grid.jqGrid('navButtonAdd', '#treegrid_toppager', {
caption: '<span class="ui-pg-text">Columns</span>',
buttonicon: "ui-icon-wrench",
onClickButton: function () {
this.jqGrid("columnChooser");
}
});
and
.ui-jqgrid-toppager .navtable .ui-pg-div .ui-pg-text {
position: relative;
top: 1px;
padding-right: 3px;
float: left;
}
Additionally I find better to include one more additional CSS definition
.ui-jqgrid-toppager .navtable {
padding-top: 1px;
padding-bottom: 0px;
}
which can a little improve the position of the buttons in the toppager.
The results you can see on the following demo:

How to anchor dropdown menu in jqGrid jqueryui autocomplete

jqGrid textbox contains jQuery UI autocomplete.
I tried to add button to open combocode below based on Oleg great answer in Add multiple input elements in a custom edit type field .
If dropdown menu is open and jqgrid is scrolled, dropdown menu position does not change.
How to anchor dropdown menu to textbox so that it remais in textbox corner on scroll ?
{"name":"Custtype","edittype":"custom","maxlength":15,
"editoptions": {"custom_element":function(value, options) {
return combobox_element(value, options,'24','Klliik0_nimetus','Klient')}
,"custom_value":function(elem, operation, value) {
return $("input", $(elem)[0]).val();
}
}
}
function combobox_element(value, options, width) {
var elemStr = '<div><input style="width:' + width + 'px" value="' +
value + '"/>' +
'<button type="button" style="height:16px;vertical-align:center" class="ui-icon-triange-1-s" style="margin-left:-1px" tabindex=-1/></div>';
var newel = $(elemStr)[0];
var input = $("input", newel);
input.autocomplete({
source: 'AutoComplete',
position: { collision: 'flip flip' }
}
)
.autocomplete('widget').css('font-size', '12px');
return newel;
}
index.aspx contains style from Fixed positioned search box with Autocomplete suggestions
but dropdown menu does not move with textbox if jqgrid is scrolled vertically.
<style>
.ui-autocomplete
{
max-height: 300px;
overflow-y: auto; /* prevent horizontal scrollbar */
overflow-x: hidden; /* add padding to account for vertical scrollbar */
padding-right: 20px;
z-index: 99999;
position: fixed;
top: 0px;
margin: 20px 0px 0px 0px; /* The top margin defines the offset of textbox */
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete
{
height: 100px;
}

Resources