0

Regarding free-jqgrid 4.9.2, does it automatically handle column width? No, then what's the proper way to handle this?

1) VIN & Year columns contain too much free spaces

2) Trim contains few records that are too long to fit into column's width (Such as 1993 Mitsubishi 3000GT 2 Dr VR-4 Turbo AWD Hatchback)

Also, does jqGrid have true/false "word wrap" setting somewhere?

Demo is found at link removed

fletchsod
  • 3,560
  • 7
  • 39
  • 65

1 Answers1

0

Auto-width adjustment exist in free jqGrid starting with 4.8 version. Free jqGrid still not handle the width of all columns automatically. One need add some additional properties in colModel for the columns which width should be set based on the width on the most long content and to set some additional options.

Your current code uses width: 190 for the column 'Vin' and don't specifies any width property for any other columns, so default value width: 150 will be used. Additionally you use width: 1022 option of jqGrid and wrong option autoWidth: true (instead of autowidth: true) which will be ignored. It means that the width of the div (bDiv or body div) over the grid will be set to 1022px and the user can use horizontal scrollbar to see all columns.

I would recommend you to read the wiki article. You can add autoResizable: true property to some specific columns or to use cmTemplate: { autoResizable: true } to add the property in all columns. As the result the content of every cell of the grid will be wrapped in <span class="ui-jqgrid-cell-wrapper">...</span>. It allows free jqGrid to get the exact width of content for all cells of the column and then calculate the max from the values. So the user can double-click on the column resizer (between the columns) to set the width to the best value. During the width calculation jqGrid the width of the column header with the width of sorting icon additionally to the width of the grid cells of the column. One can use autoResizing: { compact: true } option to reduce the width of the columns which don't have visible sorting icon. The last common option is autoresizeOnLoad: true which I would recommend you to use. It will set the width of the columns having autoResizable: true property to the best value.

So I would recommend you to add the following option to your grid:

cmTemplate: { autoResizable: true },
autoResizing: { compact: true },
autoresizeOnLoad: true

After that the width of column will looks much better.

If you prefer to wrap the text of some columns if it is too long then you can use CSS settings described in the old answer and set maxColWidth property of autoResizing of the column (in colModel) or global setting maxColWidth of autoResizing option of the grid to the max width of the column. More long text will be wrapped.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Nice!!! It looks pretty good after making those changes. I didn't see the width: 190 in the Vin column, my bad, but fixed now. Two more questions, 1) I would like to add a bit of left/right padding to columns, like VIN which is a bit too tight and 2) I noticed when I resized the Make column then do column sorting, the resized width got reverted back to the way it was - Is that how it should work? Some users don't mind but I can't say the same for some other users who may not want it. – fletchsod Aug 17 '15 at 15:06
  • @fletchsod: free jqGrid uses the rule `.ui-jqgrid tr.jqgrow > td { padding: 0 2px 0 2px; }` in `ui.jqgrid.css` for the padding. You can include another CSS rule after `ui.jqgrid.css` which increase the padding size: `.ui-jqgrid tr.jqgrow > td { padding: 0 4px 0 4px; }` for example. The sorting changes the content of the current page of the grid, so `loadComplete` will be triggered and `autoresizeOnLoad: true` option recalculates the width of columns. If you want to hold initial width value you can use `setGridParam` to change `autoresizeOnLoad` after the first loading for example. – Oleg Aug 17 '15 at 18:36
  • Cell padding left/right looks good, I think. As for setGridParam for autoresizeOnLoad, it's not looking better but worse. The Year column no longer is narrow on 1st time loading and the verbiage on Trim column is chopped off. It look like autoresizeOnLoad is not used before jqGrid could finish loading. So, what's wrong with script & what it should have done instead? Plus, the stackoverflow kept removing "@Oleg:" when I posted it. Weird. – fletchsod Aug 17 '15 at 20:57
  • 1
    @fletchsod: You used `$(this).setGridParam({ autoresizeOnLoad: false })` **before** it will be used at the first time. Free jqGrid first trigger `jqGridLoadComplete` event and calls `loadComplete` callback and only then calls `autoResizeAllColumns` method if `autoresizeOnLoad` is true. You can use `jqGridAfterLoadComplete` event instead of `loadComplete` callback to fix the problem or you can call `autoResizeAllColumns` method manually *once* independent from the setting of `autoresizeOnLoad` option. – Oleg Aug 18 '15 at 05:31