Disable Grid Checkbox

[nlk10010]

I have a grid with a checkbox column. I'd like to disable the checkbox in a row based on a field in the record displayed in that row; e.g. if the "Hold" field in a record contains "Y" then I'd like to insure the user cannot check that row.

Very often Alpha reads our mind and provides an out-of-the-box solution to this, but I can't seem to find it. The sticking point for me is gaining access to the automatically generated checkbox column, it's not a separately named field.

Any ideas would be appreciated.

[Jay Talbott]

Re: Disable Grid Checkbox

Norman,
I posted this video in order to answer your question:

https://www.screencast.com/t/tAtSf8crD2

Here is the code

var ele = $('{Grid.ComponentName}.V.R{Grid.RowID}.__ROWCHECKBOX');
var baseQty = {grid.Object}.getValue('G','BOXQTY',{Grid.RowID});
if (baseQty >3){
ele.disabled = true;
}
else{
ele.disabled = false;
}

Hope this helps.
Jay

[nlk10010]

Re: Disable Grid Checkbox

Wow, now that's service. I haven't been on these Boards in a while but I do recall how helpful and friendly a place it is.

Let me try this out, I'll be back with any questions, thanks much. As you mentioned in your video, my scenario is simpler; i.e. the enable/disable property will be set only when the grid first loads, the user will not have the ability to change the field that controls this. I'm sure I can use the tools you gave me to handle that situation as well.

Thanks very much.


Norman

[lvasic]

Re: Disable Grid Checkbox

Very nice Jay.

[CharlesParker]

Re: Disable Grid Checkbox

Thanks for sharing jay, you’ve been very helpful.

[nlk10010]

Re: Disable Grid Checkbox

Jay: I thought it would be a simple matter to modify your code to handle my situation, but it turns out either that I'm missing something obvious or there's a significant difference in the two scenarios.

So, if I may take advantage of your generosity one more time: I need to have the grid checkboxes assume the proper state (enabled/disabled based on the value in a field of each record) when the grid is initially displayed. I won't need to change their status afterwards. Thus, I tried using

var ele = $('{Grid.ComponentName}.V.R{Grid.RowID}.__ROWCHECKBOX');
ele.disabled = false;

in the OnRowRender Client-Side Javascript event. No go. My guess is that the grid displays too quickly and the JS code doesn't block execution. I also use conditional coloring on the rows and that seems to be working so I need a hook into something like that to make this work, I think.

Any ideas where I can rig something up to have those checkboxes enabled properly when the grid is displayed?

Of course, pointers from anyone would be really appreciated.

Edit: After thinking about it a little more, I may have to use a Server Side event (OnExistingRowRender). The issue is that the only way I can see to do this is to edit the currentRowHTML and either remove the checkbox or remove its OnClick event or disable it, but I'm not quite sure how to do the edit.


Norman

[Jay Talbott]

Re: Disable Grid Checkbox

Norman,
I think I have this working the way you want it to:

On the onGridRenderComplete and on the afterPageNavigate events place this code:

setTimeout(function(){
var totalRecords = {grid.Object}.getRowsInGrid();

for (i=1;i<=totalRecords;i++){
var ele = $('{Grid.ComponentName}.V.R'+i+'.__ROWCHECKBOX');
var baseQty = {grid.Object}.getValue('G','BOXQTY',i);

if (baseQty >3){
ele.disabled = true;
}
else{
ele.disabled = false;
}

}
},500)

Of course, you have to adjust the "if (baseQty >3){" part to meet your criteria.
Hope this helps.
(sorry the indenting won't stay when I post)
Jay

[nlk10010]

Re: Disable Grid Checkbox

I'm not going to ask how you came up with this, but just to clarify: Same code in both events?

I just tried it, to make things simple I just grabbed ele and disabled it; i.e. I tried to set ALL checkboxes to disabled. Didn't work. Of course it is most likely me (although I did double-check spelling, structure, etc.), I'll continue to explore your approach and the OnExistingRowRender alternative simultaneously.

[Jay Talbott]

Re: Disable Grid Checkbox

Yes, same code in both events.
The reason that there are two events is because the process needs to run each time the grid navigation is performed. It can only disable checkboxes on one page at a time.

And even though you don't want to ask how I came up with this, I'll 'splain it anyway. You can read this explanation any time you are having trouble falling asleep. <grin>

The setTimeout gives the grid time to load and waits a half second before firing.
The next line with the "var totalRecords = {grid.Object}.getRowsInGrid();" gets the number of rows in the grid (on the current page only)
The next part sets up a loop (sort of equivalent to "for i = 1 to 10").
Within each iteration of the loop, I am getting the identity of the checkbox for each row.
The next row get the criteria for whether or not to make the checkbox enabled or disabled.
The "if (baseQty > 3)" ... to the end of the else statement carries out the enabling or disabling.

That's pretty much it.
Hope that helps.

[Jay Talbott]

Re: Disable Grid Checkbox

I just set all the checkboxes in each row to disabled by doing this:

setTimeout(function(){
var totalRecords = {grid.Object}.getRowsInGrid();

for (i=1;i<=totalRecords;i++){
var ele = $('{Grid.ComponentName}.V.R'+i+'.__ROWCHECKBOX');
ele.disabled = true;
}

},500)

[nlk10010]

Re: Disable Grid Checkbox

Jay:

Good. Now we know it's me. :(

I put your code in both those events and could still check/uncheck the grid checkboxes. Clearly it's something I'm going to have to figure out on my own. It might be a typo or something else I'm doing in the grid, don't know.

Thanks very much for the time you took to try and help me out.



Norman

[nlk10010]

Re: Disable Grid Checkbox

Just for the benefit of everyone in this thread, it appears that the reason Jay's code was not working for me was that those client-side events (onGridRenderComplete and afterPageNavigate) were not firing AT ALL, and the reason for THAT appears to be that I had conditional row coloring in effect. Once I removed those conditions the events started firing (I still haven't tested Jay's specific code but I expect it to work in some form).

I'm not sure if this is a bug or if things are operating as designed, but I need the conditional row coloring so I'm going to play around with Javascript functions in the Logical Condition to see if I can get the enabling/disabling done that way.


Norman

[RichCPT]

Re: Disable Grid Checkbox

Norman, you may have a JavaScript error in you conditional coloring.
Make sure you are running the component in Chrome with Chrome's Developers Tools turned on before you go into the component. (Or use another browser's Developers Tools, if you prefer. If your page is opening up before you have chance to turn on Developer Tools then go ahead and let it load, then turn on Developer Tools and press F5 to reload the page.

There is another way to enable disable controls in a Grid that I use, but it may run incredibly slow on older iPads if you apply this method to too many controls.

The method is to call a JavaScript function in a client-side conditional expression (probably in same place where you are setting your conditional colors). See Video # 84.

For example, in an editable grid for the following property:

Grid / Fields / [your checkbox field] // Client-Side Properties / Conditional Style

I have a number of "Conditions". Here is a simplified versions of what I use:

condition # 1:   Logical Expression=  drEd1_Locked_NY = "Y"     Function property:  DisableInputCtl
condition # 2:   Logical Expression=  1 = 1                                Function property: EnableInputCtl

In my JavaScript function definitions, I define the two functions:

function DisableInputCtl( ele )
{
	if( !ele ) { return; }
	ele.readOnly = true;
	ele.tabIndex = "-1";
        // In my real function, I do a lot more things like setting colors and disabling the associated dropdown button if one exists for the current 'ele'
}
function EnableInputCtl( ele )
{
	if( !ele ) { return; }
	var id = ele.id;
	ele.readOnly = false;
	ele.tabIndex = "";
       // In my real function , I do more things like reversing any other effects that were applied by the 'DisableInputCtl' function.
}

Alpha makes that "Function" property box on client-side conditional styling very convenient by passing the 'ele' pointer variable directly to your function so you do not have to figure out the control's ID. If you have multiple components in your app then you need to be careful about where you actually declare your two functions and/or their names. If you put the function definitions directly in your component's "Code / JavaScript Functions" property then the names you use for your functions could collide with duplicate functions names from other components. I do not know if Alpha ever fixed this problem, but when I first started using this method I could not use placeholders in these function names. I ended up create a two character code for each Grid that I append to these types of functions. If you are running in a tabbedUI you could declare them there, but then working preview and live preview won't work unless you go through the tabbedUI.

[nlk10010]

Re: Disable Grid Checkbox

Rich:

You've given me a lot to think about.

Right now, I don't think it's an error in my js code (although of course I could easily be wrong). My testing indicates that those two events are simply not being called when there is conditional coloring, because when I remove the conditional coloring the code in those events works as expected, or nearly so.

What I'm up to now is trying to combine the conditional coloring with the enabling/disabling. I do this by using as a condition the code

myFunction(holdflag) = true;

where I've defined

function myFunction (hold)
{
   var row = {grid.Object}.getSelectedRow();
   var ele = $('{Grid.ComponentName}.V.R' + String(row) + '.__ROWCHECKBOX');

   if (hold){
     ele.disabled = true;
   }
   else{
     ele.disabled = false;
   }    
   return hold;
}

(here I want rows which have the variable "hold" set to true to be colored orange). This setup colors the rows properly but I find that the corresponding checkboxes are not disabled upon initial display of the grid. If I click on one of those rows with the mouse then the checkbox becomes disabled, but it is not on initial display, which is what I need.

The problem I have is that I NEED to have the necessary rows colored in their entirety which means I need to use conditional coloring, but then I can't use onGridRowRender or afterPageNavigate events. The classic Catch-22.

I will reread your message carefully and see if it contains information enabling me to do what I want.

Thanks much for taking the time to post your code.

[RichCPT]

Re: Disable Grid Checkbox

1) You probably cannot use "getSelectedRow()" like that. That applies to when a user selects a row; it does not apply to when the Grid is being rendered. If you are in the "onRowRender" event then use the row number supplied to you from the argument(s) for that function. The documentation is weak on the embed point, so you will need to put in a "debugger" statement and see if the variable to use really is "e.rowNumber" or if it is something else.

2) Usually you cannot mix different techniques into new situations. There is a lot more going on underneath the hood then what we "know" about when we put in little bits of code into the Builders. I am assuming your "myFunction(holdflag) = true;" was being put in as a "Logical Expression" for conditional client-side styles. If so,
a) do not include the ";" the syntax here is a hybrid language - it is not Xbasic and it is not JavaScript !
b) if you want to manipulate the control, you should do it where I suggested, by using the "function" box in the builder for client-side expression.

3) I suggested running your component in the browser with Developer Tools turned on so you can see if any errors show up in DevTools' "Console" window. If they do then those errors are keeping your JavaScript from running.