CODEWITHSUNDEEP
javascriptjquery-uijqgrid
Andrus
Andrus

Reputation: 27921

how to restrict jqgrid textarea height in grid only

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:

Proper view window with multiple lines

grid shows also multiple lines. This is wrong.:

Grid with multiple lines in textarea

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

Upvotes: 2

Views: 9466

Answers (1)

Oleg
Oleg

Reputation: 221997

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:

enter image description here

enter image description here

Upvotes: 2

Related Questions