How to restrict maximum height of row in jqgrid

Asked 4/7, 2011 at 16:7 Answered 16/7, 2013 at 19:5

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;
  }

Mcclellan answered 4/7, 2011 at 16:7 Comment(0)

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.

Comforter answered 4/7, 2011 at 16:55 Comment(32)

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 ? – Mcclellan 4/7, 2011 at 19:27

@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. – Comforter 4/7, 2011 at 19:35

I have autoencode: true in jqGrid. Is autoencode: true ignored if this converter is used and converter should encode itself ? – Mcclellan 5/7, 2011 at 12:24

@Andrus: The custom formatter define which contain will be in the cell. The formatter can place <a> 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. – Comforter 5/7, 2011 at 12:40

Thank you very much. If cell is edited, <div style="max-height: 250px"> 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 '<div style="max-height: 250px">' + $.jgrid.htmlEncode(v) + '</div>';                      }   }  ,"editoptions":{"rows":20},"label":"Makett","name":"Html","editable":true,"width":50,"classes":null,"fixed":true}

– Mcclellan 5/7, 2011 at 15:30

@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'. You can find an example of edittype:'custom' for example here. Alternative you can try to use dataInit from the editoptions to remove <div> and </div> texts. – Comforter 5/7, 2011 at 16:29

I havent found usable sample about using edittype:'custom'. I tried

{edittype:"textarea",formatter:function(v){  return '<div style="max-height: 250px">' + $.jgrid.htmlEncode(v) + '</div>';  }       ,"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? – Mcclellan 5/7, 2011 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 ? – Mcclellan 6/7, 2011 at 11:3

@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. – Comforter 6/7, 2011 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? – Mcclellan 6/7, 2011 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 <div> one more time). If removing of <div> from <input> inside of dataInit not correct work you can try to call additionally .trigger('change') on the <input> after you made the changes. – Comforter 6/7, 2011 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. – Mcclellan 6/7, 2011 at 14:2

@Andrus: you can use serializeRowData to make any modification of the data which will be sent to the server during inline editing. So you can remove <div> at the beginning and </div> at the end if needed. – Comforter 6/7, 2011 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? – Mcclellan 6/7, 2011 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 – Mcclellan 7/7, 2011 at 8:40

@Andrus: You can call restoreRow inside of onInitializeForm to cancel inline editing. – Comforter 7/7, 2011 at 9:1

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? – Mcclellan 7/7, 2011 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. – Comforter 7/7, 2011 at 14:0

Thank you. I sent testcase to you by email. – Mcclellan 7/7, 2011 at 18:54

@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. – Comforter 7/7, 2011 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. – Mcclellan 8/7, 2011 at 8:8

@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). – Comforter 8/7, 2011 at 8:19

ColModel is

{"label":"Skript","name":"Script","edittype":"textarea","title":false,"searchoptions":{"sopt":["cn","nc"]},"formatter":function(v){ return '<div style="max-height:240px">'+$.jgrid.htmlEncode(v)+'</div>';} ,"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. – Mcclellan 8/7, 2011 at 9:8

@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. – Comforter 8/7, 2011 at 9: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? – Mcclellan 8/7, 2011 at 9: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 – Mcclellan 14/7, 2011 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? – Mcclellan 18/7, 2011 at 10:8

@Oleg, is there an automatic counter for that first eft column of yours or its values came from your controller? – Langland 17/11, 2011 at 17:48

@AdrianoRR: I don't full understand your question, but the demo which I used to demonstrate my answer use only local data. Which counter you mean? – Comforter 17/11, 2011 at 18:0

@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. – Langland 18/11, 2011 at 13:34

@AdrianoRR: It's just rownumbers: true option of jqGrid. It includes additional column with the row number in the grid. – Comforter 18/11, 2011 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? – Thinnish 6/6, 2012 at 17:38

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"

Prosit answered 16/7, 2013 at 19:5 Comment(2)

Your solution worked perfectly for me. Such a simple fix. Thanks! – Randallrandan 6/10, 2016 at 14:48

@TopherBirth I'm glad I could help you out! – Prosit 6/10, 2016 at 17:57

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags