I am using the latest jqgrid 4.3.1 and i am trying to use frozen columns.
The issue is that i have overridden the default css to support word wrap (css solution can be seen in this question) 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:
Is there anyway to have frozen columns line up with word wrapped cells in jqgrid
NOTE: after trying Oleg's solution below, it works in Firefox but in IE8 I don't see the horizontal scroll bar (see pic)
Firefox:
IE: (notice no horizontal scroll bar)
NOTE:
To help answer Oleg's question, here is a dump of my jqgrid Setup:
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 && 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 && typeof postData.filters !== "undefined") {
filters = $.parseJSON(postData.filters);
newCapture = "Filter: [";
rules = filters.rules;
for (i = 0; i < rules.length; i++) {
rule = rules[i];
op = rule.op; // the code name of the operation
iOp = $.inArray(op, arOps);
if (iOp >= 0 && 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 && 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");
}
});
}
Best Answer
The implementation of frozen columns in jqGrid are based on creating of two additional divs with absolute position over the standard grid. If the height of all column headers and all rows of the grid's body are the same the frozen columns works good, but in case of variable height (usage of
height: auto
CSS) one have the following results (see the first demo):The first div, so named
fhDiv
, which I marked with yellow color contains the copy of the column header (thehDiv
) where the last non-frozen columns are removed. In the same way the second div, so namedfbDiv
, which I marked with red color contains the copy of the grid body (thebDiv
) where the last non-frozen columns are removed. You can read here more about the standard grid elements.In the demo I used character wrapping in the column headers which I described in the answer and the word wrapping described for example here.
The height of every row of the
fhDiv
orfbDiv
will be calculated independent from the height of non-frozen columns. So the height of the rows can be less as required.It is difficult to suggest perfect solution of the problem, but it seems that I found good enough pragmatical way. The idea is to set the height of every row from the
fhDiv
andfbDiv
explicitly based on the size of the corresponding row in the main diveshDiv
andbDiv
. So I extended the code offixPositionsOfFrozenDivs
function described in the answer to the following:I called the method inside of
resizeStop
andloadComplete
callbacks. In case of usage of gridResize method one need include additional fixes inside of stop handler.The full my suggestions you can see on the demo which fixs the results from the first demo to the following:
UPDATED: The answer contains updated version of the demo: this one.