javascript - how to restrict jqgrid textarea height in grid only

Question

Textarea contains lot or lines. In jqgrid grid only first line should displayed. In jqgrid view window more lines and possible scrollbar also should be displayed.

Oleg answer from How to restrict maximum height of row in jqgrid

restricts textarea height in view window also to single line. How to show first line in grid only but show more lines in jqgrid view form ?

colmodel is:

{"name":"Description",
  "edittype":"textarea",
  "wrap":"on",
  "formatter":function(v){ return '<div style="max-height:20px">'+$.jgrid.htmlEncode(v)+'</div>';
                             } 
  ,"editoptions":{"class":"","rows":18,"wrap":"off","style":"width:800px",
      "readonly":"readonly"
      },
  "editrules":{"edithidden":true},"editable":true,"width":539,
  "classes":"jqgrid-readonlycolumn"}

jqgrid view window shows multiple lines. This should remain the same:

grid shows also multiple lines. This is wrong.:

How to force grid to show only first line in each textarea

Or is is possible to show more lines in bottom of screen: if some row becomes active, first 10 lines from textarea column should appear in bottom. This is like in windows log viewer: moving into event row shows event long data in separate window

Answer 1

If I understand your problem correctly you can solve it in relatively easy way. You should just use CSS instead of inline styles for setting of max-height of the div with multiline data. You can for example set some class on <td> elements of the column having multiline elements using classes property of colModel. For example is you would use classes: "textInDiv" the <td> of the cell in the corresponding column will get the class attribute. Because you have different hierarchy of elements inside of grid and inside of View form you can specify different restrictions of the height on both cases:

{name: "Description", edittype: "textarea", classes: "textInDiv",
    formatter: function (v) {
        return '<div>' + $.jgrid.htmlEncode(v) + '</div>';
    }}

and

tr.jqgrow>td.textInDiv>div {
    max-height: 20px;
    overflow: auto
}
td.form-view-data>span>div {
    max-height: 150px;
    overflow: auto
}

The demo demonstrate the results. How you can see on the following pictures the max-height for the cell contain is different for grid and the View form: