2

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

Community
  • 1
  • 1
Andrus
  • 26,339
  • 60
  • 204
  • 378

1 Answers1

2

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

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Hello @Oleg- Thank you very much, your answers are helping me like anything while working with jQgrid. If possible can you tell me how to to make the editable cell height in jQgrid equal to the height of cell containing it? By default it is rendering a textbox. – Rahul Singh May 27 '15 at 10:31
  • @RahulSingh: You are welcome! Please post new question where you describe the problem more exactly. Which editing mode you use? Which fork of jqGrid (jqGrid 4.7 or early, free jqGrid or Guriddo jqGrid JS) and in which version you use? – Oleg May 27 '15 at 10:45
  • @Oleg - http://stackoverflow.com/questions/30482092/format-jqgrid-editable-textbox-height – Rahul Singh May 27 '15 at 12:13
  • @Oleg A row can have multiple lines and I only want to show the firs line in each row. Instead of showing it as a pop-up, click on a particular row should toggle it between expanded and collapsed state. The cells are non-editable. How can I achieve this? – b.g Dec 12 '16 at 11:08
  • @b.g: It sounds too abstract. To speak about the solution you should first describe which kind of data you has in the column(s). You can change the height of the row on select/unselect of the row for example. I suggest you to post separate question where you describe more detailed what you need to implement. The demo (in JSFiddle, for example) with some test data would be very good. You should additionally include in all your questions the information about the version of jqGrid, which you use (can use) and the fork of jqGrid (free jqGrid, commercial Guriddo jqGrid JS or an old jqGrid <=4.7). – Oleg Dec 12 '16 at 11:26
  • @Oleg I have asked a new question here: http://stackoverflow.com/questions/41101387/how-to-show-only-first-line-of-a-multi-line-text-cell-in-a-jqgrid – b.g Dec 12 '16 at 12:54