9

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;
  }
Igor
  • 33,276
  • 14
  • 79
  • 112
Andrus
  • 26,339
  • 60
  • 204
  • 378

2 Answers2

17

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

enter image description here

(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.

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • thank you very much. I tried formatter as in your sample but got exception in jQuery. Maybe this is caused by special characters in text. How to fix this ? Should'nt special characters also encoded in this formatter function by calling some js method ? – Andrus Jul 04 '11 at 19:27
  • 1
    @Andrus: You can use `$.jgrid.htmlEncode(v)` instead of `v` if you want to do the same encoding which will be done in case of `autoencode:true`. – Oleg Jul 04 '11 at 19:35
  • I have autoencode: true in jqGrid. Is autoencode: true ignored if this converter is used and converter should encode itself ? – Andrus Jul 05 '11 at 12:24
  • 1
    @Andrus: The custom formatter define which contain will be in the cell. The formatter can place `` element or any other HTML markup in the cell. It is by design. So the string returned from the custom formatter will be placed in the cell without any encoding. If you need encode the data you should do this **inside** of your custom formatter. – Oleg Jul 05 '11 at 12:40
  • Thank you very much. If cell is edited, `
    ` occurs in start of textarea. This is also saved as part of text. How to remove this div from editing ? Colmodel is: `{"edittype":"textarea","searchoptions":{"sopt":["cn","eq","ne","lt","le","gt","ge","bw","bn","in","ni","ew","en","nc"]},"formatter":function(v){ return '
    ' + $.jgrid.htmlEncode(v) + '
    '; } } ,"editoptions":{"rows":20},"label":"Makett","name":"Html","editable":true,"width":50,"classes":null,"fixed":true}`
     – Andrus Jul 05 '11 at 15:30
  • 1
    @Andrus: You are right. The most correct way to remove the unneeded HTML markup and to do another text transformation is the usage of [edittype:'custom'](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#custom). You can find an example of `edittype:'custom'` for example [here](http://stackoverflow.com/questions/4842262/jqgrid-implementing-of-custom-cell-integration-of-raty-plugin/4842450#4842450). Alternative you can try to use `dataInit` from the [editoptions](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#editoptions) to remove `
    ` and `
    ` texts.     – Oleg Jul 05 '11 at 16:29
  • I havent found usable sample about using edittype:'custom'. I tried `{edittype:"textarea",formatter:function(v){ return '
    ' + $.jgrid.htmlEncode(v) + '
    '; } ,"editoptions":{"rows":20,"dataInit":function(elem) { elem.innerText= elem.innerText.substring(34, elem.innerText.length-6); }},"label":"Skript","name":"Validting","editable":true,"width":50,"classes":null}` div does not appear on textarea but after every save after inline edit div tag is inserted to top of text, e.q after 5 edits 5 div tags are added to text. How to prevent this?     – Andrus Jul 05 '11 at 20:53
  • in first time it is saved OK. Maybe dataInit is also called only once in inline edit. In form edit if recreateForm: true is used, edit works OK. Issue is in inline edit only. How to apply recreateForm: true to inline edit ? – Andrus Jul 06 '11 at 11:03
  • 1
    @Andrus: Sorry, I am busy now with another project. The option `recreateForm: true` exist only for form editing because the dialog with all controls will be not destroyed at closing. It will be just hidden. In case of inline editing the controls (input and select) will be new created on `editRow` and always destroyed in the corresponding line at the end of editing or on `restoreRow` or `saveRow`. So the `dataInit` have to be called on creating the input/select controls in `editRow`. If it will be not called in your case it could be jqGrid bug or bug in your program. – Oleg Jul 06 '11 at 11:19
  • thank you very much. Yes, dataInit is invoked always. After row is saved, divs appear in formatted text. It looks like changing innerText is not sufficient or formatter is called after inline editing and formatter output is saved instead of edited. How to fix this? – Andrus Jul 06 '11 at 11:50
  • You can try to use `aftersavefunc` parameter of `editRow` or `saveRow` to make the changes in the grid row after saving the data (include `
    ` one more time). If removing of `
    ` from `` inside of `dataInit` not correct work you can try to call additionally `.trigger('change')` on the `` after you made the changes.
     – Oleg Jul 06 '11 at 12:12
  • div does not appear in textarea on edit so it looks like is removed correctly. Extra div appears always if I click in other row without saving data. How to remove this, should I call row refresh from where other idea? Extra div appers sometimes if data is saved by pressing enter and is passed to server as part of data to be saved. aftersavefunc fires after wrong data (with div) is saved so it is too late to do something there. – Andrus Jul 06 '11 at 14:02
  • @Andrus: you can use [serializeRowData](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#saverow) to make any modification of the data which will be sent to the server during inline editing. So you can remove `
    ` at the beginning and `
    ` at the end if needed.     – Oleg Jul 06 '11 at 14:24
  • thank you. If inline editing is canceled (by esc or clicking in other row), extra div appears always in textarea. How to remove this div so that only real text is shown like before inline edit has started? – Andrus Jul 06 '11 at 18:21
  • I noticed also the following: if inline edit is active and form edit is started, extra div appears in both inline edit and form edit textareas – Andrus Jul 07 '11 at 08:40
  • @Andrus: You can call `restoreRow` inside of `onInitializeForm` to cancel inline editing. – Oleg Jul 07 '11 at 09:01
  • I tried `grid.navGrid("#pager", { }, { onInitializeForm : function(formid) { alert(lastSelectedRow); grid.jqGrid('restoreRow', lastSelectedRow); } } ` After clicking form edit button extra div appears in form textarea. After that this alert box appears and after that form with extra div appears. So restoreRow does not remove extra div. inline edit is ended automatically even if this code is not present, so this code in not nessecary. How to remove extra divs? – Andrus Jul 07 '11 at 13:26
  • @Andrus: I can answer on your question only if I would be able to reproduce the problem. If you prepare the corresponding demo I could look inside. – Oleg Jul 07 '11 at 14:00
  • Thank you. I sent testcase to you by email. – Andrus Jul 07 '11 at 18:54
  • 1
    @Andrus: The main problem is that you use `innerText` DOM property inside of `dataInit`. The property is **not exist** in Firefox. It is the same problem like with `innerText` and `textContent`. I suggest that you just use `$(elem).html` method to get/set the inner HTML. – Oleg Jul 07 '11 at 19:43
  • Thank you. I tried `dataInit:function(elem) {var html=$(elem).html(); $(elem).html( html.substring(38,html.length-12) );}` This creates textarea in firefox but all other issues are still Present. This also has the following issues: Scrollbars in textarea do not appear in inline edit;In IE9 line ends are lost. All text is wrapped into single line;In Firefox extra div still appears. If using edittype:'custom' is better I can try to create it. – Andrus Jul 08 '11 at 08:08
  • @Andrus: The way with `edittype:'custom'` was the first what I suggested you. Nevertheless I think you can solve you problem without it. The problems with scroll bars in the textarea could be solved by adding `rows` and `cols` in the `editoptions` in the `edittype:'textarea', editoptions: {rows:"5",cols:"20"}` (see [here](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#textarea)). – Oleg Jul 08 '11 at 08:19
  • ColModel is `{"label":"Skript","name":"Script","edittype":"textarea","title":false,"searchoptions":{"sopt":["cn","nc"]},"formatter":function(v){ return '
    '+$.jgrid.htmlEncode(v)+'
    ';} ,"editoptions":{"rows":18,"cols":120,"dataInit":function(elem) {var html=$(elem).html();$(elem).html( html.substring(38,html.length-12) );}},"editable":true,"width":0,"classes":null,"fixed":true,"hidden":false}`. rows and cols are present but scrollbars do not appear.     – Andrus Jul 08 '11 at 09:08
  • 1
    @Andrus: You should reduce the value of `cols` till the value <=`70` if you use `width:400` Then you will be able to see the scrollbar. – Oleg Jul 08 '11 at 09:27
  • Thank you. I changed in colmodel `"width":0, cols: 120` to `"width":400, cols:70`. Horizontal scrollbar still does not appear since newlines are removed from text if editing starts, all text is wrapped as line. How to keep newlines in text? – Andrus Jul 08 '11 at 09:47
  • I tried custom editype using `editoptions: { custom_element = function(value, options) { var el = document.createElement('textarea'); el.type = 'textarea'; el.value = value; return el; }, custom_value = function(elem, operation, value) { if (operation === 'get') { return $(elem).find('textarea').val(); } else if (operation === 'set') { $('textarea', elem).val(value); } }, dataInit = function(elem) {var html=$(elem).html(); $(elem).html( html.substring(38,html.length-12) ); }}` if edit is cancelled, div still appears. It looks like custom formatter output in encoded after cancelling edit – Andrus Jul 14 '11 at 16:52
  • dispplaying multi-line textarea in grid causes row height change on inline edit which is bad user experience. It is better to show textarea below the grid. If grid row becomes active, this textarea should filled with textarea from current row. Grid row should display only first line from textarea. How to implement this? – Andrus Jul 18 '11 at 10:08
  • @Oleg, is there an automatic counter for that first eft column of yours or its values came from your controller? – AdrianoRR Nov 17 '11 at 17:48
  • @AdrianoRR: I don't full understand your question, but [the demo](http://www.ok-soft-gmbh.com/jqGrid/SimpleLocalGridWithLongMultilineCell.htm) which I used to demonstrate my answer use only local data. Which counter you mean? – Oleg Nov 17 '11 at 18:00
  • @Oleg, oh i misspelled the left column. I meant your first column, which is basically a count of how many rows the grid has. I don't know if the word 'counter' is right here, but i can't think a better one. It's like a row counter, enumerating each row. – AdrianoRR Nov 18 '11 at 13:34
  • 1
    @AdrianoRR: It's just `rownumbers: true` option of jqGrid. It includes additional column with the row number in the grid. – Oleg Nov 18 '11 at 13:39
  • Sorry to reopen this! We have a very large cell. The above tip with max-height: 100px works.BUT, we also have a "viewGridRow" event which pops up the row in the inbuilt dialog, but in this the cell which have set the max-height on looks weird. Any suggestions? – Andrew White Jun 06 '12 at 17:38
4

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"
FastTrack
  • 8,810
  • 14
  • 57
  • 78