Remove inline background color for button previously set by client-side conditional style

[RichCPT]

I override a button's gradient blue background (that it got from the project's CSS class) with a client-side conditional style expression that sets the inline style to:

background: #f85757; font-weight: bold; text-shadow: 1px 1px #AAAAAA;

Using "background" instead of "background-color" allows me to override the background image with no image and set just a solid background.

The problem is when the record is updated and the condition is no longer true I want to remove the inline styles.

I have a catch-all conditional style of 1=1, but how to I code that condition / style so it is capable of removing the inline style previously applied?

I need to remove the inline color and the inline non-image. It seems quite difficult to undo the background color and non-image, so the button will revert to its original appearance.

[Clipper87]

Re: Remove inline background color for button previously set by client-side conditional style

what is the condition to undo the style you set ? You can use a js function otherwhise you're limited to xbasic functions that can be translated to js by AA. Not entirely sure what you are up to. Button in a grid ? Or a UX ? Or... Maybe a few screenshots ?

[RichCPT]

Re: Remove inline background color for button previously set by client-side conditional style

The first Condition is:
assigned_prsn_id = SESSION.USER_ID

With inline style of:
background: #f85757; font-weight: bold; text-shadow: 1px 1px #AAAAAA;

If I run the grid without a 'catch-all' expression of "1=1" then I get the buttons as shown in the 'Style1' picture, but the red buttons do not get changed back to the gradient blue buttons when their associated conditions are no longer true after data has been changed and refreshed in the grid.

I put in a 'catch-all' expression to execute when the buttons are not supposed to be red. But, I cannot get the blue-gray buttons to look like they should, see 'Style2' picture.

Catch all expression: 1 = 1
Style: background-color: transparent; background-image: none; font-weight: normal; text-shadow: 1px 1px #FFFFFF;


In my second conditional style, how can I tell alpha to remove the inline background information, so the button can go back to looking like it does when it just has the project's button class (ie. GrBlueButton) applied to it?

[Clipper87]

Re: Remove inline background color for button previously set by client-side conditional style

I think what you're after is a kind of "if then else" construction. Use the Aftergridsubmit event to grab a pointer to the button object & then set the style of the button. You will need to publish the session variables if you want to reference them in js.

var rowNum = {Grid.Object}._selectedRow;
var bp = document.getElementById('{Grid.ComponentName}.V.R'+rowNum+'._UNBOUND_BUTTON_1');

if (condition 1){
bp.style = 'background-color: transparent; background-image: none; font-weight: normal; text-shadow: 1px 1px #FFFFFF;';
}

if (condition 2){
...

[RichCPT]

Re: Remove inline background color for button previously set by client-side conditional style

I have attached an example app and created a quick video:

http://screencast.com/t/juJbQWMUE

In the video you can see that once a button has been colored with a red background then the button cannot be reset to look normal again.

In the sample app, run the main UX, and use the two buttons to call Grid1 or Grid2, as demonstrated in the video.

To make this really simple I just tied the conditional statements for the button background to the first character of the company name. Edit the first character of a company name in the grid to be less than or greater than "D". Move off the row, or save the row and then move off of it to see the final effect on the button. The second grid uses "E" as a special value so the button will look pretty much as if no inline style was added to it. (The Builder complains if nothing is set, so I just set the font-weight when that condition is true.)

[Clipper87]

Re: Remove inline background color for button previously set by client-side conditional style

Rich, just took a quick look; you don't seem to be submitting the record so all you have to do is to get a pointer to the button object in the javascript row event "on mouse out"

using conditions it will not work

[RichCPT]

Re: Remove inline background color for button previously set by client-side conditional style

Frank,
Thanks for taking a look. I'm not sure if you looked at the first grid (G1) or the second one (G2). I know G1 doesn't work. But G2 almost works for restoring the button to its original appearance. It does remove the red background, but the gradient blue background does not appear, instead it is solid white. The moment the Company Name is changed to start with a letter > "D" the last conditional style statement (1=1) statement runs. It does remove the red background and the button looks normal (has its gradient) because of the focus row highlight stuff that is going on. But as soon as focus is moved to a different row (with or without saving the record) the button will appear with a solid white background, not the intended the original gradient blue background.

[Clipper87]

Re: Remove inline background color for button previously set by client-side conditional style

Rich, if in your 1=1 condition you use the color code "#cdd1e5" instead of "transparent" then you get a somewhat ok result; it does not look like an original GrBlue button because the background image is no longer there.

You may want to create a class for your buttons without a background url so it looks more consistent