0

I have a jqgrid as shown:enter image description here

As you see, rows can have multi-line text or just a single line. However, I only want the first line to be displayed on each row with a downward pointed arrow if it has multi-line text.The grid is non-editable.

Moreover , the data to populate this grid comes as a json string from the controller. Currently, I have set the grid parameters as:

datatype: 'jsonstring',
datastr: jsonErrorGridData,
rowNum: '',
gridview: true,
onSelectRow: function (row_id) {
        $("#errorList-grid").toggleSubGridRow(row_id);
    }

This gives me a grid with all rows (rowNum: ''), which in cases can be more than 1000. Additionally, how can I implement paging on client side and also include an option to download all the gird data? Also, as you can see the column headers are not aligned properly. I display this grid as a pop-up dialog in a div:

<div id="displayError">
    <table id="errorList-grid" style="table-layout: fixed"></table>
</div>
b.g
  • 411
  • 1
  • 3
  • 19
  • You question about paging isn't clear enough. The usage of `rowNum: ''` is incorrect. One should specify some positive interer value. The exact values of `rowNum` depend on the the version of jqGrid which you use (can use) and from the fork of jqGrid ([free jqGrid](https://github.com/free-jqgrid/jqGrid), commercial [Guriddo jqGrid JS](http://guriddo.net/?page_id=103334) or an old jqGrid in version <=4.7). You asked about local paging with downloading. One can do this by specifying `rowNum`, `pager`, `loadonce: true` and `forceClientSorting: true` options. – Oleg Dec 12 '16 at 14:03
  • @Oleg I changed it and have implemented paging and sorting too. – b.g Dec 12 '16 at 14:11

1 Answers1

0

The most easy way to implement almost exact your requirements would be the usage of the following CSS rule:

.ui-jqgrid .jqgrow:not(.ui-state-highlight) > td { white-space: nowrap; }

It will apply white-space: nowrap; on all non-selected rows, which will reduce the height of the rows. The selected row will still have default white-space: pre; property and thus the full row will be shown.

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • This shows all the lines in the single one like `'....' is a required field.'...' is a required field.'....' is a required field.'....' is a required field.....` and expands it on click. Is it possible to show only the first line on the row and give an arrow on it to expand on click? – b.g Dec 12 '16 at 14:04
  • @b.g: I included the word "almost" in my answer. I can provide you alternatives if you answer on the question which I asked you 3 times: which version of jqGrid you use (can use) and from which fork of jqGrid? – Oleg Dec 12 '16 at 14:23
  • @b.g: For example if you use free jqGrid fork, then you can add `autoResizable: true` property in the column (or use `cmTemplate: { autoResizable: true }` to add it in all columns) to have the wrapper inside of every cell. Then you can use `.ui-jqgrid .jqgrow:not(.ui-state-highlight) .ui-jqgrid-cell-wrapper {display: block; height: 13px;}` to restrict the height of the wrapper to 13px. If you have to use another version of jqGrid you can use custom formatter for wrapping the text in `
    ` with fixed height.
     – Oleg Dec 12 '16 at 15:38
  • Sorry. I am using version 4.5.2 – b.g Dec 13 '16 at 04:22
  • @b.g: You have to use custom formatter to wrap the content of multiline cell inside of `
    ` which has specific `height` or `max-height` (see [the old answer](http://stackoverflow.com/a/6574194/315935)). You should just use CSS rule with `:not(.ui-state-highlight)`: wrap in `
    ` and use `.ui-jqgrid .jqgrow:not(.ui-state-highlight) .ui-jqgrid-cell-wrapper { height: 13px; }` rule.
     – Oleg Dec 13 '16 at 06:29
  • @b.g: I'd recommend you to update the retro version 4.5.2 to free jqGrid 4.13.5, which you can load directly from CDN (see [the wiki article](https://github.com/free-jqgrid/jqGrid/wiki/Access-free-jqGrid-from-different-CDNs)). The version 4.5.2 is publised more as 3.5 years ago. It's out any support. It was published at the time of IE10, Chrome 25 and Firefox 18. Now one uses Chrome 55, Firefox 50, Microsoft Edge 38 and IE 11. – Oleg Dec 13 '16 at 06:35
  • Can you please look into this question: http://stackoverflow.com/questions/41181435/how-to-add-edit-rows-of-a-jqgrid-using-navigator-in-client-side-before-submitt – b.g Dec 16 '16 at 09:49
  • @b.g: What is about the current problem. Do you implemented the formatter which wraps the text in the `
    `, which hat `height` or `max-height` to reduce the height of unselected row to 13px? Is the current problem solved?
     – Oleg Dec 16 '16 at 12:22