List Control - Enable / Disable a button

[frankiez]

The onItemDraw event of the list control allows conditional logic on the client side.
I can get row colors, text changes on buttons all very easily from the example syntax provided. I have a need to disable a button based on a value of a control in the list. My goal is to remove all the server side conditional logic and move to client side. If anyone has the magic syntax it would be greatly appreciated. Thanks in advance.

Here the link where you can download the sample object.
http://downloads.alphasoftware.com/V...transcript.htm

if(data.State == 'CO' ) {
var e = {listElement:btn1};
//change the text of the button to the last name.
e.innerHTML = data.Lastname;

//alert(e);
//document.getElementById("Btn1").disabled = true;
//e.setElementDisabled('#Btn1',true);
//document.getElementById("btn1").disabled = true;
//e.setButtonDisabled('btn1',true);
//var btn = {dialog.object}.getControl('BTN1');
//btn.setDisabled(false);

}

//alternate the shade
if( (index % 2) == 0 ) {
ele.style.backgroundColor = '#fffaeb';
} else {
ele.style.backgroundColor = '#d4fad2';
}

//do something special button in row where state = MA
if(data.State == 'MA') {
e = {listElement:btn1}
e.style.backgroundImage = 'none;';
e.style.backgroundColor = 'yellow';
}

[Davidk]

Re: List Control - Enable / Disable a button

You have a pointer to "e"... and "disabled" is a property of "e". This disables the button if the State is "MA"...

if(data.State == 'MA') {
	e = {listElement:btn1};
	e.style.backgroundImage = 'none';
	e.style.backgroundColor = 'yellow';
	e.disabled = true;
}

Note that there is an error in the example's code.

//do something special button in row where state = MA
if(data.State == 'MA') {
e = {listElement:btn1};
e.style.backgroundImage = 'none;';
e.style.backgroundColor = 'yellow';
}

The e.style.backgroundImage = 'none;'; has a semi-colon immediately after none which causes a problem for any style settings.

[frankiez]

Re: List Control - Enable / Disable a button

I tried many things except the obvious. Thanks David. Appreciate the prompt reply. Have a great weekend.

[frankiez]

Re: List Control - Enable / Disable a button

Just one followup. When I use IOS7 style, the button respects the disable property, but when I change the class to iOS7ButtonDisabled, it returns a older gray button instead of iOS7 looking button.
e.className = 'iOS7ButtonDisabled' (not good looking)
I found if I used iOS7TabTButtonDisabled, this looked better. It still had blue border, but the text was disabled. I would like the border gray so I tried the following: e.style.border-color = '#c0c0c0'; and e.border-color = '#c0c0c0';
Both of these options did not work. It there a way to modify the style properties.

One more observation. The disabled button displays on the mobile device but it still allows me to click the button.

Here is the element:
<button a5-item="_systemButtononClick_B1TEST" id="LOGINMOBILE_MOBILEMENU_04726ARNE_SCHEDULECH_BJRG.LIST_SCHEDULE.B1TEST.BTN.0" class="iOS7ButtonDisabled" style="cursor: pointer; width: 87px; " title="" disabled="">disabled</button>

[Davidk]

Re: List Control - Enable / Disable a button

Interesting... I think this may be due to List controls events for Buttons, Hyperlinks, etc. now being handled by the a5-item attribute. I'm not sure of the best way to handle this, but this does work.

You can see in the element you posted... that a5-item has a value of _systemButtonClick_B1TEST. So... let's remove that value when the List item is drawn...

if(data.State == 'MA') {
	e = {listElement:btn1};
	e.attributes['a5-item'].value = '';
	e.className = "null iOS7Button iOS7ButtonDisabled";
}

Also note the className. You were applying only the disabled classname. But if you were to create a button outside the List control, and set it's enable property to 1=0, and then inspect that control, you'll see the classname setting as above. You must still style the button, but then add it's disabled style properties. I just check to see what Alpha is doing... and then copy it.

[frankiez]

Re: List Control - Enable / Disable a button

Your code is far more elegant than my solution to java script the click event to return under certain conditions to give the appearance of a disabled control.
Your solution worked perfectly David. Thank you again. I am learning a lot from your posts.


I posted my code and attached a screen shot so others can see the final results. I wanted the buttons to enable / disable based on status to reduce options a user can choose from. It works perfectly. Initially, I used server side conditional logic which had limitations. The client side is much more flexible.

// get pointer to button element.
var eIN = {listElement:BUTTON_SCHEDULE_CHECKIN};
var eOUT = {listElement:BUTTON_SCHEDULE_CHECKOUT};
var eSPN = {listElement:BUTTON_S_P_NS};

if( data.CheckInOutStatus == 0 ) //pending
{
ele.style.backgroundColor = '#ffffff'; //white
eOUT.disabled = true;
eOUT.attributes['a5-item'].value = '';
eOUT.className = "null iOS7Button iOS7ButtonDisabled";
}

if( data.CheckInOutStatus == 1 ) //checked in
{
ele.style.backgroundColor = '#ffe180'; //amber

eIN.disabled = true;
eIN.attributes['a5-item'].value = '';
eIN.className = "null iOS7Button iOS7ButtonDisabled";

eSPN.disabled = true;
eSPN.attributes['a5-item'].value = '';
eSPN.className = "null iOS7Button iOS7ButtonDisabled";
}


if( data.CheckInOutStatus == 2 || data.CheckInOutStatus == 3 || data.CheckInOutStatus == 4 || data.CheckInOutStatus == 100 )
{

if( data.CheckInOutStatus == 100 ) //checked out
{
ele.style.backgroundColor = '#d4fad2'; //green
}
else
{
ele.style.backgroundColor = '#facddc'; //reddish for sick,personal or off time
}

eIN.disabled = true;
eIN.attributes['a5-item'].value = '';
eIN.className = "null iOS7Button iOS7ButtonDisabled";

eSPN.disabled = true;
eSPN.attributes['a5-item'].value = '';
eSPN.className = "null iOS7Button iOS7ButtonDisabled";

eOUT.disabled = true;
eOUT.attributes['a5-item'].value = '';
eOUT.className = "null iOS7Button iOS7ButtonDisabled";

}

[Davidk]

Re: List Control - Enable / Disable a button

Glad it worked out. I don't think you need the .disabled = true; now.