Databases
StackOverflow2013
Postsdbo
POHow can i get jqgrid frozen columns to work with word wrap on
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can i get jqgrid frozen columns to work with word wrap on
    primarykey
    data
    text
    <p>I am using the latest jqgrid 4.3.1 and i am trying to use frozen columns. </p> <p>The issue is that i have overridden the default css to support word wrap (css solution can be seen <a href="https://stackoverflow.com/questions/2994343/how-to-implement-wordwrap-on-jqgrid-which-works-on-ie7-ie8-and-ff">in this question</a>) in jqgrid and i think that is the reason that the frozen columns don't line up correctly with the regular columns. The heights of the frozen rows are not the same as teh heights of the rest of the grid. Here is a screenshot.. the frozen columns are highlighted in the red box (NOTE: i crossed out the content given its not a public site:</p> <p>Is there anyway to have frozen columns line up with word wrapped cells in jqgrid</p> <p><img src="https://i.stack.imgur.com/8MBsr.png" alt="enter image description here"></p> <p>NOTE: after trying Oleg's solution below, it works in Firefox but in IE8 I don't see the horizontal scroll bar (see pic)</p> <h2>Firefox:</h2> <p><img src="https://i.stack.imgur.com/ELSGh.png" alt="enter image description here"> </p> <h2>IE: (notice no horizontal scroll bar)</h2> <p><img src="https://i.stack.imgur.com/oCpQu.png" alt="enter image description here"></p> <h2>NOTE:</h2> <p>To help answer Oleg's question, here is a dump of my jqgrid Setup:</p> <pre><code>jQuery(gridSelector).jqGrid({ mtype: 'POST', toppager: true, url: siteRoot + controller + "/" + gridDataName + "?" + querystring, datatype: "json", colNames: names, colModel: model, shrinkToFit: false, imgpath: siteRoot + "Scripts/jqGrid431/themes/steel/images", rowNum: 20, rowList: [10, 20, 50, 999], altRows: true, altclass: "altRow", jsonReader: { root: "Rows", page: "Page", total: "Total", records: "Records", repeatitems: false, id: "Id" }, search: true, postData: (myfilter) ? { filters: JSON.stringify(myfilter)} : {}, //postData: { filters: JSON.stringify(myfilter) }, pager: pagerSelector, height: "auto", sortname: sortCol, viewrecords: true, sortorder: sortDirection, beforeRequest: function () { var grid = jQuery(gridSelector); if (gridprefs &amp;&amp; gridprefs.filter) { grid.setPostDataItem('_search', true); for (var prop in gridprefs.filter) { var value = eval('gridprefs.filter.' + prop); if ('' + value != '') { grid.setPostDataItem(prop, value); } } grid.setPostDataItem('sidx', gridprefs.scol); grid.setPostDataItem('sord', gridprefs.sord); grid.setPostDataItem('page', gridprefs.page); grid.setPostDataItem('rows', gridprefs.rows); grid.jqGrid('setGridParam', { sortname: gridprefs.scol, sortorder: gridprefs.sord, page: gridprefs.page, rowNum: gridprefs.rows }); } }, loadComplete: function () { var newCapture = "", filters, rules, rule, op, i, iOp, postData = jQuery(gridSelector).jqGrid("getGridParam", "postData"), isFiltering = jQuery(gridSelector).jqGrid("getGridParam", "search"); if (isFiltering === true &amp;&amp; typeof postData.filters !== "undefined") { filters = $.parseJSON(postData.filters); newCapture = "Filter: ["; rules = filters.rules; for (i = 0; i &lt; rules.length; i++) { rule = rules[i]; op = rule.op; // the code name of the operation iOp = $.inArray(op, arOps); if (iOp &gt;= 0 &amp;&amp; typeof $.jgrid.search.odata[iOp] !== "undefined") { op = $.jgrid.search.odata[iOp]; } newCapture += rule.field + " " + op + " '" + rule.data + "'"; if (i + 1 !== rules.length) { newCapture += ", "; } } newCapture += "]"; } jQuery(gridSelector).jqGrid("setCaption", newCapture); fixPositionsOfFrozenDivs.call(this); $(gridSelector).supersleight({ shim: siteRoot + 'Content/Images/shim.gif' }); if (gridprefs &amp;&amp; gridprefs.filter) { for (var prop in gridprefs.filter) { $('#gs_' + prop).val(eval('gridprefs.filter.' + prop)); } $(".ui-pg-selbox").val(gridprefs.rows); $(".ui-pg-input").val(gridprefs.page); } gridprefs = {}; }, editurl: siteRoot + controller + "/Update" + appendRoute, ondblClickRow: editable ? function (rowid) { jQuery(gridSelector).editGridRow(rowid, { width: 600 }); } : function (rowid) { } }); //$(gridSelector).jqGrid('navGrid', '#pager', { search: true, cloneToTop: true }); $(gridSelector).jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true }); jQuery(gridSelector).jqGrid('bindKeys', {}); if (editable) { jQuery(gridSelector).navGrid(pagerSelector, { cloneToTop: true, refresh: false }, { height: 380, width: 500, reloadAfterSubmit: true, closeAfterEdit: true, url: siteRoot + controller + "/Update", zIndex: 1100 }, { height: 380, width: 500, reloadAfterSubmit: true, closeAfterAdd: true, url: siteRoot + controller + "/Add", zIndex: 1100 }, { reloadAfterSubmit: true, url: siteRoot + controller + "/Delete" }, { multipleSearch: true, beforeShowSearch: function($form) { $('#searchmodfbox_' + $(gridSelector)[0].id).width(560); } }); } else { jQuery(gridSelector).navGrid(pagerSelector, { cloneToTop: true, refresh: false, add: false, edit: false, del: false }, { }, { }, { }, { multipleSearch: true, beforeShowSearch: function($form) { $('#searchmodfbox_' + $(gridSelector)[0].id).width(560); } }); } myAddButton(gridSelector, { caption: "", title: "Reload Grid", buttonicon: 'ui-icon-refresh', onClickButton: function () { $(gridSelector).trigger("reloadGrid"); } }); } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USleora
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    3. PL
      singulars
      1. LTLinked
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    3. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow can i get jqgrid frozen columns to work with word wrap on
      1. USleora
      1. VTBountyStart
    2. VO
      singulars
      1. POHow can i get jqgrid frozen columns to work with word wrap on
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POHow can i get jqgrid frozen columns to work with word wrap on
      1. This table or related slice is empty.
      1. VTUpMod
    1. COIs the issue the scrollbar in the header? Or are the cells below the header "Workstream" supposed to be taller and match those under "Team"?
      singulars
      1. POHow can i get jqgrid frozen columns to work with word wrap on
      1. USThinkingStiff
    2. CO@ThinkingStiff - both :)
      singulars
      1. POHow can i get jqgrid frozen columns to work with word wrap on
      1. USleora
    3. CODo you want word-wrap on in the body, or just the header?
      singulars
      1. POHow can i get jqgrid frozen columns to work with word wrap on
      1. USThinkingStiff
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload