Coldfusion cfgrid type= boolean checkbox

Report · Nov 21, 2019

Coldfusion cfgrid type= boolean checkbox column is not getting checked in a single click, requires user to click twice. Causing a bad user experience

Update: here is a running example of the issue, as offered by Charlie in the discussion below:

https://www.carehart.org/test/test-cfgrid-10755642.cfm

Report · Nov 21, 2019

I realize you may think it's broken, but most likely it's not. There are a few more steps that could help us get to the bottom of what you're seeing.

First, it would be helpful if you could confirm seeing any errors in your browser's developer tools, either in its console or network tabs. Are you familiar with doing that? That could tell us WHAT the problem is.

As for HOW the problem happened, it could be that someone updated cf and there was an error during the update. Do you have access to the cf server itself and its logs?

I could provide more on the both the above, as needed.

Finally, it would be best if you could provide a simple few line demonstration of the problem, which you and anyone reading this might run to confirm they see the same problem.

Often, in doing that last effort, we find that folks even discover the cause of the problem, if it may well be about their code.

/Charlie (troubleshooter, carehart.org)

Report · Nov 21, 2019

Hi,

Firstly i dont see any console/network errors with the code whule debugging. Neither i see any error in the cflogs relevant to this particular grid column.

I shall post my demo code below for your reference. demo1.cfm is the first page where the grid displays record while fetching from demo2.cfm

The column on demo1.cfm sic_exlsort_int is my concern, it is not getting checked on a single click. One thing is something weird the ones that are previously checked take a single click to get uncheked , whereas the ones that are checked will get unchecked in a single click.

Thanks in advance.

DEMO1.cfm

function doRefresh(form){
cSrcID = form.SrcID.options[form.SrcID.selectedIndex].value;
cSortFld = '';
form.newSrcID.value = cSrcID;
}

// set grid dimensions scrWidth, scrHeidht
var gWt = 34; // right margin
var gHt = 180; // top margin
var minWt = 500; // min width of the table
var minHt = 280; // min height of the table
var scrWidth = 1256;
var scrHeight = 554;
if (scrWidth < minWt) scrWidth = minWt;
if (scrHeight < minHt) scrHeight = minHt;

</script>

<cfoutput>
<br /><br /><strong>Src Id:</strong>
<cfselect name="SrcID" title="Select a Source" style="width:200px;" onchange="doRefresh(this.form)">
<option value="">Select a Data Source</option>
<option value="test1">test1</option>
<option value="test2">test2</option>
</cfselect>
<input type="hidden" name="newSrcID" value="">
</cfoutput>
<br /><br />

<cfgrid format="html" name="mainGrid" sort="yes" style="border:1px solid ##002D96;" visible="no" pagesize="#maxRowCnt#" maxrows="#maxRowCnt#" vspace="20"
striperows="yes" colheaderbold="yes" colheadertextcolor="##464646" width="scrWidth" height="scrHeight"
selectcolor="##FFCC99" selectmode="edit" selectonload="false" picturebar="yes" gridlines="yes" autowidth="yes"
bind="url:demo2.cfm?DbFunc=getRecords&SrcID={SrcID}&newSrcID={newSrcID}&page={cfgridpage}&pageSize={cfgridpagesize}&sortCol={cfgridsortcolumn}&sortDir={cfgridsortdirection}"
onchange="url:demo2.cfm?DbFunc=doNothing&action={cfgridaction}&row={cfgridrow}&changed={cfgridchanged}"
font="arial" fontsize="14px" colheaderfont="arial" colheaderfontsize="14px" textcolor="##464646">

DEMO2.cfm

<cfif #DbFunc# EQ "doNothing"><cfabort></cfif>

</cfif>

<cfoutput>#serializeJSON(QueryConvertForGrid(qGetAllRecords, page, pageSize))#</cfoutput>
<cfelse>

<cfoutput>{"QUERY":{"COLUMNS":["SI_CNTR"],"DATA":[]},"TOTALROWCOUNT":0}</cfoutput>
</cfif>

</cfcase>

<cfcase value="doNothing">
</cfcase>

<cfdefaultcase>
<cfset #sMsg#="Unknown command encountered. Try Again.">
</cfdefaultcase>

</cfswitch>

Report · Nov 21, 2019

I appreciate that you have tried here, but that is not a "few line demo". 🙂 There can be all KINDS of reasons within those dozens of lines that may explain what is amiss. Perhaps someone else will spot your issue, as is. But I would again highly recommend you winnow that down to just the fewest lines needed to demonstrate the problem. Again, often in doing THAT, you learn that something you're doing is the cause. You can wait to see if someone else will mine your ore, or you can do a little more rock-blasting for us, and for your own sake. 🙂

One other thing: rather than share the code here, you may want to use Adobe's cffiddle.org site, where you can run CFML code against CF2018 or 2016. You can also save that code, and share a link to it. I have done that with your two examples here, at https://cffiddle.org/app/d1d15073-f90a-48dd-ad73-665a1dfdc7ec. Sadly, when I run them as-is, I don't see the demo1 working in an obvious way. (And you're unable to edit my code there, so you would have to create your own app there, which you can do once you login there.)

But even if you don't want to go to "all that bother", I still think winnowing things down to just a few lines will be the most helpful way to find what's amiss for you, whether it's in CF or in your code.

/Charlie (troubleshooter, carehart.org)

Report · Nov 21, 2019

https://cffiddle.org/app/file?filepath=543f7e32-1418-4b4c-9c35-aae2fe5e43ae/30314c1f-df14-46be-ac3e-...

Here is the shortest version of code. You'll notice the checkbox issue

here is the best version to see the issue.

https://www.carehart.org/test/test-cfgrid-10755642.cfm

Thanks

Report · Nov 21, 2019

The check boxes work with a single click in Microsoft Edge on Windows 10.

What browsers have you tested with?

Report · Nov 21, 2019

Like Eddie, I'm not seeing the problem. I tested that code (on cffiddle) and it did not require a double-click to turn off or on the 3 checkboxes. All my testing is on Windows 10, in FF, Chrome, Opera, all the latest versions and also Edge and IE (11).

I did notice two oddities in IE11 only. First, for some reason visiting that url for the fiddle did not work. I had to copy the code from one of the other browsers and paste it there. And even then, while most often it worked as expected, I did see one case (again in IE11) where when I clicked the checkboxes, they kind of flickered and reversed their state but then switched back. So if not checked, they became checked then not checked. That may be the "double-click" you are referring to (needing two clicks to change state).

It sure felt like some odd javascript issue.

But when I opened the f12 dev tools to see what was up, the problem went away. And even if I closed that and opened a new private window, it stayed away. Then I closed IE and tried again, and at first it did not happen and then it did (with no change to IE by me). I could not get that to happen at all in the other browsers.

So as Eddie asked, are you experiencing the problem in IE only? Does it sometimes work and sometimes not (in this test code you have offered)?

/Charlie (troubleshooter, carehart.org)

Report · Nov 21, 2019

I see the issue in all the browser when i run this code with the CF2018 at my end. Somehow the CFfiddle you wont see the issue at once, try clicking differest rows multiple times you might see the issue persists.

Also if you could check once at your CF2018 , if you see this issue.

If you could help with a workaround with this, We are facing issues cause of this bad javascript.

Thanks.

Report · Nov 23, 2019

Hi pragati9126

Could the cause be the custom Javascript code? The page might be loading it in an unexpected order, relative to ColdFusion's own Javascript.

Disable your custom Javascript temporarily and see what happens.

Report · Nov 23, 2019

I figured it out. First a TLDR explanation, then elaboration for those interested.

TLDR:

It turns out that the first click is to SELECT the row, to be edited. THEN you can edit things/click checkboxes. I have a link to a slightly modified demo that makes it more clear. See the section below, "A demo that better clarifies things".

ELABORATION (for the curious):

It took some trial and error (and I did setup a test on my own server, and DID see the same behavior). And wow, what an explanation it turned out to be. It's not a bug but a "feature" with perhaps-unexpected results.

Again, it turns out that the way that an "editable" cfgrid works (as you indicated using selectmode="edit") is that in order to proceed with editing ANY cell in a given row, you need to first click on the row (any cell in the row)--and THEN you can edit any of the cells. You can even see this in how the color of the row changes when you FIRST click it, indicating it has been "selected", and THEN you can change it.

So it turns out that the first click you (and your users) have been doing has been to SELECT the ROW, thus enabling it for editing, and then when you clicked that checkbox, you were toggling it. But only AFTER having "selected the row" first.

I realize some may find that hard to believe (feeling either that I am wrong, or that it's a stupid design feature). Let me offer some proof, first in docs then in an example that with one more column makes things more clear.

The docs

First, in the docs for cfgrid, it does explain this. It's NOT in the CFML Reference, though (where folks nearly always seek answers). Instead, it's in the "Developing Applications" manual (which is nearly as large, and is more a CF "user guide" then "reference").

And in the page on CFGRID, which is here, the first section ("Working with a data grid and entering data") has a table of grid "actions" and "procedures", and for "Editing a grid cell", it says: "Double-click the cell. Press Return when you finish entering the data."

Before I did the next step below, I was like the OP here, wondering, "what the heck is happening". But I sensed that there had to be an explanation for what we were seeing, and as I searched the docs for ANY discussion of "click" relative to cfgrid and related tags, I finally found that.

A demo that better clarifies things

And then to make the behaviore more obvious (for myself and others), I added a second column with some text, and you can see it quite clearly now. I have set it up and left it on my server as an example here: https://www.carehart.org/test/test-cfgrid-10755642.cfm.

Notice that until you click a row, you can't edit the fname column. Once you do, you can--and you can toggle the checkbox as you like. And again you can see the row color changing, which is reflecting the row being selected. It was just less obvious when ALL you had was a checkbox (as your code example at cffiddle.org showed).

Your options going forward

So there you have it. I appreciate again that it may seem "a stupid design decision" by Adobe, but actually it does make SOME sense (that one would click a row to indicate a desire to edit it). I suspect you MAY find someone has offered (or will offer) some way to perhaps tweak how this works, or will propose you just indicate to users this behavior.

But certainly others will use this as a chance to explain "this is another reason why no one should use the CF-provided UI-generating tags". I'm not so firm on that point as others, but I appreciate their point. There are many reasons those tags can bite you (though not always).

And I suspect that you could find some other javascript library or framework that does a better job with such a grid, maybe making it "live editable" immediately, without need of clicking on a row. I have not found anything in the docs to suggest that CF offers that, so if you really find this "click a row first to edit it" design to be not suited to the user experience you or your users desire, it seems you may have to look at another solution for your grid.

Let us know what you think. Unless someone helps me see something I'm not, I'd next turn this into a blog post, in case it may help others who may not find this here.

/Charlie (troubleshooter, carehart.org)

Report · Nov 24, 2019

Thanks @charlie_Arehart for the explanation, but our business wouldnt accept this functionality for double click. Only if someone could help me overide this to a simpler single click checkbox.

Thanks in advanec

Report · Nov 24, 2019

Hi pragati9126

For a number of years now, the advice out there is to use Javascript libraries, such as JQuery, in place of ColdFusion's UI. These two demos use datatables to replace cfgrid

https://github.com/cfjedimaster/ColdFusion-UI-the-Right-Way/tree/master/chapters/cfgrid

https://eclectic-thoughts.com/2014/06/replacing-cfgrid-with-datatables-part-3-editable-grids/

Report · Dec 03, 2019

Hi,

i have started working on the Jquery DataTables Libraries, but i am unable to see the functionality of mutiple rows edit as we have in CFgrid.

On the other hand , the datatable editor is again a paid version.

If anyone could help me with a stable library similar to the CFGrid, not involving cost