Disappearing headers

[nebels]

Hi there,

We hit an issue in a multi row header setup when dynamically hiding/showing a column which is inside a multi row header definition. The top header disappears when hiding the column.

The issue can be easily reproduced by using the demo app sample: 'Pro->Columns->Show/Hide'  an replace the original column definition (line 2 ff) with the following:

Code: [Select]

        var columns = [
            { title: "Order ID", width: 100, dataIndx: "OrderID", hidden: true },
{title :"Header", colModel: [
            { title: "Customer Name", width: 130, dataIndx: "CustomerName" },
            { title: "Product Name", width: 190, dataIndx: "ProductName" },
            { title: "Unit Price", width: 100, dataIndx: "UnitPrice", align: "right" }]},
            { title: "Quantity", width: 100, dataIndx: "Quantity", align: "right" },
    {title :"Header2", colModel: [{ title: "Order Date", width: 100, dataIndx: "OrderDate" },
    { title: "Required Date", width: 100, dataIndx: "RequiredDate", hidden: true },
    { title: "Shipped Date", width: 100, dataIndx: "ShippedDate", hidden: true },
            { title: "ShipCountry", width: 100, dataIndx: "ShipCountry", hidden: true },
            { title: "Freight", width: 100, align: "right", dataIndx: "Freight" },
            { title: "Shipping Name", width: 120, dataIndx: "ShipName" },
            { title: "Shipping Address", width: 180, dataIndx: "ShipAddress", hidden: true },
            { title: "Shipping City", width: 100, dataIndx: "ShipCity" },
            { title: "Shipping Region", width: 110, dataIndx: "ShipRegion", hidden: true },
            { title: "Shipping Postal Code", width: 160, dataIndx: "ShipPostalCode", hidden: true }]}
];

Then hide the column 'Order Date' and watch the top header 'Header 2' disappear (it should not) .

The following patch to 3.2.0 fixed our issue  (only commented out the 'offending' lines )

Code: [Select]

Index: pages/scripts/grid/pqgrid.dev.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- pages/scripts/grid/pqgrid.dev.js (date 1455487520000)
+++ pages/scripts/grid/pqgrid.dev.js (date 1455577923000)
@@ -8297,15 +8297,15 @@
  return
  } else {
  if (col > 0 && column == headerCells[row][col - 1]) {
- if (col > initH) {
- return
- } else {
+ //if (col > initH) {
+ // return
+ //} else {
  var orig_colIndx = getColIndx(headerCells, row, column);
  if (orig_colIndx < freezeCols) {
  return
  }
  colSpan = colSpan - calcVisibleColumns(CM, orig_colIndx, col)
- }
+// }
  } else {
  if (freezeCols && (col < freezeCols) && (col + colSpan > freezeCols)) {
  var colSpan1 = colSpan - calcVisibleColumns(CM, freezeCols, initH),
\ No newline at end of file

Could you please verify and/or fix more adequately.

Best regards and thanks in advance

S

[paramvir]

This issue is fixable with the below patch. It can be included in a separate js file rather than modifying the original files.

Code: [Select]

$.paramquery.cHeader.prototype.createHeader=function(){var e=this.that,r=this,a=e.options,i=a.bootstrap,d=(i.on?i.thead:"")+" pq-grid-header-table ",n=a.ui,t=i.on?"":n.header,l=a.hwrap,s=e.pqpanes,p=parseInt(a.freezeCols),h=a.numberCell,o=e.colModel,c=a.sortModel,u=e.depth,q=a.virtualX,v=e.iGenerateView.colDef,f=e.initH,g=e.finalH,H=e.headerCells,w=e.$header_o;if(null==g)throw"finalH required for _createHeader";if(a.showHeader===!1)return void w.empty().css("display","none");w.css("display",""),d+=l?"pq-wrap ":"pq-no-wrap ";var _=["<table class='"+d+"' cellpadding=0 cellspacing=0 >"];if(u>=1){_.push("<tr class='pq-row-hidden'>"),h.show&&_.push("<td style='width:"+h.width+"px;' ></td>");for(var b=0,y=v.length;y>b;b++){var m=v[b],C=m.colIndx,x=m.column,j=x.outerWidth;_.push("<td style='width:"+j+"px;' pq-col-indx="+C+"></td>")}_.push("</tr>")}for(var M="pq-grid-col ",k=0;u>k;k++){_.push("<tr class='pq-grid-title-row'>"),0==k&&h.show&&_.push(["<th pq-col-indx='-1' class='pq-grid-number-col' rowspan='",u,"'>","<div class='pq-td-div'>",h.title?h.title:"&nbsp;","</div></th>"].join(""));for(var C=0;g>=C;C++){if(f>C&&C>=p&&q&&(C=f,C>g))throw"initH>finalH";r.createHeaderCell(k,C,H,_,M,p,f,u,c)}_.push("</tr>")}e.ovCreateHeader(_,M),_.push("</table>");var z=_.join("");w.empty(),s.vH?w[0].innerHTML=["<span class='pq-grid-header pq-grid-header-left ",t,"'>","<div class='pq-grid-header-inner'>",z,"</div>","</span>","<span class='pq-grid-header ",t,"'>","<div class='pq-grid-header-inner'>",z,"</div>","</span>"].join(""):w[0].innerHTML=["<span class='pq-grid-header ",t,"'>","<div class='pq-grid-header-inner'>",z,"</div>","</span>"].join("");var I=e.$header=w.children(".pq-grid-header"),L=I.children(".pq-grid-header-inner");e.$tbl_header=L.children("table"),e.$header_left=$(I[0]),e.$header_left_inner=$(L[0]),s.vH&&(e.$header_right=$(I[1]),e.$header_right_inner=$(L[1])),I.click(function(e){return r._onHeaderClick(e)}),r._refreshResizeColumn(f,g,o),e._trigger("refreshHeader",null,null)};


But there are some other issues while show/hide columns along with grouping of columns, which are fixed only in v3.3.0 ( would be released in few days )

[nebels]

Thanks heaps for your (as always) quick reply including a cleaner fix. I should also mention that the grid is a real beauty - awesome functionality and easy to use!  I have been using it now for the best part of a year and never had we the impression that it is not up to the job. It deals with large tables (100k+) browser side like a charm!.  Well done!

Looking forward to 3.3 already. 

Best regards

S

[paramvir]

Thanks S

Your words mean a lot to this project.

Best Regards
Param