Problems with cfgrid in Chrome - just started displaying columns set not to display

[forrestmahannah]

We are having a problem with cfgrid displaying column data inside the grid even though the columns are set to not display. Worked fine until yesterday. Have an office full of chrome users with the same issue. It seems like cfgrid uses different html for chrome than it does for firefox and there is a table with a class of x-grid-table-resizer. The first row columns set the width and hright to zero like this:

<TH class="x-grid-col-resizer-request_grid_REQUEST_ITEM_ID" style="width: 0px; height: 0px;">
</TH>

The data rows are like this:

<TD class=" x-grid-cell x-grid-cell-request_grid_REQUEST_ITEM_ID x-grid-cell-first">
<DIV class="x-grid-cell-inner " style="text-align: left; ;"> 99917
</DIV>
</TD>

The problem is that the data rows are still displaying inside the grid even though the width and height on the first row cells are zero?  Firefox does not create this resizer table at all and works fine. So does Edge and my Chrome even though it is the same version as the other users having the problem.

It looks like Chrome refuses to set the width to zero to hide the columns set not to display.

If anyone can help it would be greatly appreciated as curently it makes cfgrid not useable for us and our system depends on it.

Thanks

[BKBK]

It is unclear why you think that this is a cfgrid error. After all, the code contains no CFML code. Without CFML, then we're talking text or HTML, not ColdFusion.

[forrestmahannah]

The cfgrid tag generates the html, and the html it generates no longer works correctly in Chrome. Grid columns set not to display are hidden in the column header bar, but are displaying as text inside the grid itself

Attached is an example of what is displayed inside the grid control instead of just the two columns that should display that you see in the header row. Also you can see the dropdown in header columns is a mess. The text you see inside the grid is the content of the columns set NOT to display in the grid. I managed a workaround by setting the hidden columns to display and moving them to the right of the two columns we needed to see and setting their width to 5 pixels, but would rather have the grid work like it did three days ago

I also attached what the grid displays like after applying my changes above. At least now grid rows can be read and clicked to edit them

[Charlie Arehart]

Forrest, a few thoughts for you:

1) It would help first if you might confirm whether anything on your end changed those 3 days ago. It wasn't cf itself, though perhaps someone there updated it (see the cf admin updates page which shows the date updated).

Or maybe your browsers changed (and all in an org could be changed by central config, of course.)

And certainly something new in that or other browsers could possibly "break" long-running cfgrid code.

2) Indeed, if you might offer some simple few-line sample code that any of us could run, we could then test it--both with our cf implementations and with perhaps different browser versions.

It would help to again offer a screenshot or brief identification of what's WRONG with the result, so we can confirm if we see the same.

3) Finally. If that's somehow not something you'll do (or if we might find we can't recreate what you see, even with sample code) , here's something you could do on your end: use your browser "developer tools" feature and its "network" tab, to check if any aspect of communication between the browser and server is now failing. (Or the "console" tab or equivalent might js errors--though those could be the RESULT of the above.) 

It's always possible that some part of what's sought as part of the processing is being suddenly blocked there--and I mean some one of perhaps dozens of files requested by the browser to serve this one grid. It could be about network or firewall issues, or it could be about file permissions on the server, or perhaps even a web server configuration change.

That's both why I asked first if you might know of any changes there, or if you might create a simple demo for us to check on our own CF and browsers.  🙂 

[forrestmahannah]

Charlie,

The only change here was an upgrade to CF2023 a couple weeks ago, and the code worked fine up until a day or two ago. Strange that it still works fine in my Chrome which is the same version the others are running where it does not work.

I sent a couple screenshots to show what it was doing in their browsers, they are not all in the same location or state.

I will see if I can get them to send me network tab results.

Thanks

[Charlie Arehart]

I understand that you offered screenshots of what fails for your ap.p. I'd asked if instead you could to take a few mins to create a simple demo that allows us and Adobe to see if we can experience it.

But short of that, yes, checking the dev tool results may help you solve it yourself. If not, try to share it here, sure. That may not be trivial, as those are often multiple screens of info to consider. 

[forrestmahannah]

I could not find a solution other than setting the grid columns to display and giving them a very small width, so I am going to convert all of our cfgrids to datatables . Thanks

[BKBK]

... I am going to convert all of our cfgrids to datatables . Thanks

By @forrestmahannah

Wise move. That will help future-proof your code.

For some years now, the general advice in the ColdFusion community is to avoid using Coldfusion's UI tags, of which cfgrid is one.  See, for example, https://github.com/cfjedimaster/ColdFusion-UI-the-Right-Way . There you will find a practical example that uses Datatables as an alternative to cfgrid.