Grid columnsresizing blows up the column headers

[bruceqParticipant]

I’m using a jqxgrid. BTW, this is not yet deployed and we are in the process of purchasing a license before it is. In the meantime, I have columnsresize set to true and grid width to 100%. The grid is contained in a div with width also set to 100%.

When a column is resized, several things go wrong. First, some column headers adjacent to the one being resized disappear. The dividing bars also disappear. Some headers that do not disappear are placed over the wrong column. It seems as if some colum headers are removed and headers to the right of them move left. In some cases, column headers switch places. Then, if a column header that has moved is selected, the column it should be over is highlighted, so that part is actually working. The behavior is inconsistent; I keep refreshing the page and trying to duplicate the problem exactly so I can document it, but resizing the same column produces different results. And resizing different columns tends to produce different results. For example, in some cases the resized column moves left and all the headers in between where it was and where it ends up, disappear. In other cases, the resized header moves left but appears to push column headers to the left along with it. Sometimes everything works normally, for a while.

I commented out all the grid properties to try to isolate one that might be involved and found that if I remove the width setting, the problem goes away (although the grid becomes ridiculously narrow). I tried setting the width to various values and in every case, the problem I’ve attempted to describe, occurs. If I comment out every property except width and columnsresize, the problem occurs. I’m out of ideas on this, could use some suggestions. Thanks.

The grid definition is:

$(“#jqxObPlan”).jqxGrid(
{
width: ‘100%’,
altrows: true,
theme: ‘pfms’,
pagesize: 20,
autoheight: true,
pageable: true,
pagermode: ‘simple’,
sortable: true,
groupable: true,
editable: false,
filterable: true,
autoshowfiltericon: true,
selectionmode: ‘multiplerowsextended’,
columnsresize: true,
columnsreorder: true,
columns: [
{ text: ‘Req Id’, datafield: ‘REQ_ID’, width: 70 },
{ text: ‘Req Item Id’, datafield: ‘REQITEM_ID’, width: 100 },
{ text: ‘Funding Org’, datafield: ‘FundingOrg’, filtertype: ‘checkedlist’, width: 150 },
{ text: ‘APPN’, datafield: ‘APPN’, filtertype: ‘checkedlist’, width: 100 },
{ text: ‘RIN’, datafield: ‘RIN’, width: 200 },
{ text: ‘Requirement Title’, datafield: ‘RequirementTitle’, width: 150 },
{ text: ‘Cost Name’, datafield: ‘CostName’, width: 150 },
{ text: ‘Requirement Desc’, datafield: ‘RequirementDescription’, width: 150 },
{ text: ‘Banding’, datafield: ‘Banding’, width: 100 },
{ text: ‘Commitment Schedule’, datafield: ‘CommitmentSchedule’, width: 150, cellsformat: ‘d’ },
{ text: ‘Commitment Month’, datafield: ‘CommitmentMonth’, width: 100 },
{ text: ‘Commitment FY’, datafield: ‘CommitmentFY’, width: 100 },
{ text: ‘Obligation Schedule’, datafield: ‘ObligationSchedule’, filtertype: ‘date’, width: 150, cellsformat: ‘d’ },
{ text: ‘Obligation Month’, datafield: ‘ObligationMonth’, width: 70 },
{ text: ‘Obligation FY’, datafield: ‘ObligationFY’, width: 70 },
{ text: ‘Cost’, datafield: ‘Cost’, cellsformat: ‘c2’, width: 125 },
{ text: ‘Cost Qualification’, datafield: ‘CostQualification’, width: 200 },
{ text: ‘Division’, datafield: ‘Division’, width: 150 }
]

});

The HTML is:

<div id=”content”>
<br />
<div class=”paneTitle”>PFMS Obligation Planning</div>
<br />
<div id=”jqxDock”>
<div>
<div id=”divButtons1″ style=”height:68px;width:auto;”>
<div>Manage Grid Configuration</div>
<div style=”display:inline-block;”>
<div style=”float:left;”>
<input type=”button” id=”jqxExportToExcelButton” title=”Export to Excel” style=”background-image: url(../Images/export-excel.png); background-repeat: no-repeat; cursor: pointer” />
<input type=”button” title=”Export To CSV” id=”jqxExportToCSVButton” style=”background-image: url(../Images/export-csv.png); background-repeat: no-repeat; cursor: pointer” />
<input type=”button” id=”jqxExportToPDFButton” title=”Export to PDF” style=”background-image: url(../Images/export-pdf.png); background-repeat: no-repeat; cursor: pointer” />
<input id=”txtSaveStateName” />
<input type=”button” id=”jqxSaveState” title=”Save Configuration” style=”background-image: url(../Images/config-save.png); background-repeat: no-repeat; cursor: pointer” />
</div>
<div id=”jqxDDGetGridState” style=”float:left;margin:0 4px 0 4px;”></div>
<div style=”float:left;”>
<input type=”button” id=”jqxLoadState” title=”Load Selected Configuration” style=”background-image: url(../Images/config-open.png); background-repeat: no-repeat; cursor: pointer” />
<input type=”button” id=”jqxDeleteConfig” title=”Delete Selected Configuration” style=”background-image: url(../Images/delete-config.png); background-repeat: no-repeat; cursor: pointer” />
<input type=”button” id=”jqxResetConfig” title=”Refresh/Reset Grid” style=”background-image: url(../Images/grid-refresh.png); background-repeat: no-repeat; cursor: pointer” />
</div>
</div>
</div>
<div id=”divGrid” style=”height:100%;width:100%;”>
<div>Manage Grid Display</div>
<div>
<input type=”button” value=”Clear Groups” id=”jqxClearGroupsButton” />
<input type=”button” value=”Clear Filters” id=”jqxClearFiltersButton” />
<input type=”button” value=”Make Grid Scrollable” id=”jqxGridScrollButton” />
<input type=”button” value=”Expand All Groups” id=”jqxExpandAllGroupsButton” />
<input type=”button” value=”Size All Columns” id=”jqxAutoSizeColumns” />
<div id=”jqxObPlan” style=”height:100%;width:100%;”></div>
</div>
</div>
</div>
</div>
</div>

[Peter StoevKeymaster]

Hi bruceq,

We cannot reproduce the reported behavior with the current version – jQWidgets 3.8.2. Check whether you use the same and if you do not then I suggest you to upgrade.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[bruceqParticipant]

Thank you!! That did it. I was using 3.8.0, didn’t realize there was a newer version or I would have tried that first.

[Peter StoevKeymaster]

Hi bruceq,

Thanks for the update. There was indeed an issue in 3.8.0 caused by the Grid Columns UI Virtualization which is resolved in 3.8.2.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts