I'm trying to fix the row height of frozen columns of JQGrid using this article. I have been trying get it to work since couple of days now. I was succeeded up to some extend as grid loads properly but still I'm having issue when re-sizing the column headers.
Only the modification that I have done to the original code is that adding following condition to the fixPositionsOfFrozenDivs function.
if (this.grid !== undefined) { }
Steps to Reproduce the Problem:
- Load the grid.
- Try to reduce the width of a column header which allows frozen column's height to be re-sized.
Following is my code:
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
//<![CDATA[
/*global $ */
/*jslint browser: true, nomen: true */
$(document).ready(function () {
var budgetType = $('#IntBudgetType').val();
var budgetExportJQGridDefaults = {
colNames: ['Item Control No', 'Budget Revision'],
shrinkToFit: false,
colModel: [
{
name: 'ItemCode', index: 'ItemCode', search: true, width: 190, cellattr: makeCellContentWrap, frozen: true, searchoptions: {
sopt: jqGridSearchOperationsFor.String,
},
searchrules: jqGridSearchRulesFor.DefaultMandatory
},
{
name: 'BudgetRevision', index: 'BudgetRevision', search: true, width: 120, searchtype: 'number', cellattr: makeCellContentWrap, searchoptions: {
sopt: jqGridSearchOperationsFor.Number
},
searchrules: jqGridSearchRulesFor.PositiveIntMandatory
},
],
pager: '#BudgetExportGridPager',
rowNum: paramFromView.PageSize,
sortname: paramFromView.SortName,
sortorder: paramFromView.SortOrder,
url: paramFromView.Url,
afterInsertRow: afterInsert,
loadComplete: function () {
fixPositionsOfFrozenDivs.call(this);
}
};
//Add filter only if it's available (an attempt to fire searchrules validations when loading)
if (paramFromView.hasFilter) {
budgetExportJQGridDefaults = $.extend({}, budgetExportJQGridDefaults, {
postData: {
filters: paramFromView.filterStr
},
search: paramFromView.hasFilter
})
}
var budgetExportJQGridSearchDefaults = {
};
budgetExportJQGridDefaults = $.extend({}, jqGridAppDefaults, budgetExportJQGridDefaults);
budgetExportJQGridSearchDefaults = $.extend({}, jqGridSearchDefauls, budgetExportJQGridSearchDefaults);
$('#BudgetExportGrid').jqGrid(budgetExportJQGridDefaults).navGrid('#BudgetExportGridPager', jqGridNavGridDefaultParameters,
{},
{},
{},
budgetExportJQGridSearchDefaults);
$("#BudgetExportGrid").jqGrid('setFrozenColumns');
function ResizeGridAfterScreenResize() {
$('#BudgetExportGrid').jqGrid('setGridWidth', $('#BudgetExportGrid').parents('.main-content').width() - 2);
}
function afterInsert(rowid, rowdata) {
var val = $(this).jqGrid('getCell', rowid, 'Error');;
if (val != '') {
$(this).jqGrid('setRowData', rowid, false, 'ui-state-error');
}
}
$(window).resize(function () {
clearTimeout(this.id);
this.id = setTimeout(function () {
ResizeGridAfterScreenResize();
}, 300);
});
//fire 1st time when page has loaded
ResizeGridAfterScreenResize();
//});
'use strict';
$grid = $("#list"),
resizeColumnHeader = function () {
var rowHight, resizeSpanHeight,
// get the header row which contains
headerRow = $(this).closest("div.ui-jqgrid-view")
.find("table.ui-jqgrid-htable>thead>tr.ui-jqgrid-labels");
// reset column height
headerRow.find("span.ui-jqgrid-resize").each(function () {
this.style.height = '';
});
// increase the height of the resizing span
resizeSpanHeight = 'height: ' + headerRow.height() + 'px !important; cursor: col-resize;';
headerRow.find("span.ui-jqgrid-resize").each(function () {
this.style.cssText = resizeSpanHeight;
});
// set position of the dive with the column header text to the middle
rowHight = headerRow.height();
headerRow.find("div.ui-jqgrid-sortable").each(function () {
var $div = $(this);
$div.css('top', (rowHight - $div.outerHeight()) / 2 + 'px');
});
},
fixPositionsOfFrozenDivs = function () {
var $rows;
if (this.grid !== undefined) {
if (this.grid.fbDiv !== undefined) {
$rows = $('>div>table.ui-jqgrid-btable>tbody>tr', this.grid.bDiv);
$('>table.ui-jqgrid-btable>tbody>tr', this.grid.fbDiv).each(function (i) {
var rowHight = $($rows[i]).height(), rowHightFrozen = $(this).height();
if ($(this).hasClass("jqgrow")) {
$(this).height(rowHight);
rowHightFrozen = $(this).height();
if (rowHight !== rowHightFrozen) {
$(this).height(rowHight + (rowHight - rowHightFrozen));
}
}
});
$(this.grid.fbDiv).height(this.grid.bDiv.clientHeight);
$(this.grid.fbDiv).css($(this.grid.bDiv).position());
}
if (this.grid.fhDiv !== undefined) {
$rows = $('>div>table.ui-jqgrid-htable>thead>tr', this.grid.hDiv);
$('>table.ui-jqgrid-htable>thead>tr', this.grid.fhDiv).each(function (i) {
var rowHight = $($rows[i]).height(), rowHightFrozen = $(this).height();
$(this).height(rowHight);
rowHightFrozen = $(this).height();
if (rowHight !== rowHightFrozen) {
$(this).height(rowHight + (rowHight - rowHightFrozen));
}
});
$(this.grid.fhDiv).height(this.grid.hDiv.clientHeight);
$(this.grid.fhDiv).css($(this.grid.hDiv).position());
}
}
},
fixGboxHeight = function () {
var gviewHeight = $("#gview_" + $.jgrid.jqID(this.id)).outerHeight(),
pagerHeight = $(this.p.pager).outerHeight();
$("#gbox_" + $.jgrid.jqID(this.id)).height(gviewHeight + pagerHeight);
gviewHeight = $("#gview_" + $.jgrid.jqID(this.id)).outerHeight();
pagerHeight = $(this.p.pager).outerHeight();
$("#gbox_" + $.jgrid.jqID(this.id)).height(gviewHeight + pagerHeight);
};
$grid.jqGrid('gridResize', {
minWidth: 450,
stop: function () {
fixPositionsOfFrozenDivs.call(this);
fixGboxHeight.call(this);
}
});
$grid.bind("jqGridResizeStop", function () {
resizeColumnHeader.call(this);
fixPositionsOfFrozenDivs.call(this);
fixGboxHeight.call(this);
});
resizeColumnHeader.call($grid[0]);
$grid.jqGrid('setFrozenColumns');
$grid.triggerHandler("jqGridAfterGridComplete");
fixPositionsOfFrozenDivs.call($grid[0]);
});
//]]>
This is how it displays when re-sizing column headers.
What am I doing wrong here?
