Custom "submit" button - how to dim it when not dirty

[Scholin]

I am looking for a way to dim my custom "submit" buttons to only show at 100% when a field is dirty, just like the stock save/submit buttons on a grid.

I am sure it is just one more line of javascript . . . but I have been unable to find it.

If someone knows that would be a great help.

Thanks!

[Bob Moore]

Re: Custom "submit" button - how to dim it when not dirty

I'll do a video tutorial on this ASAP when I can find the time.

In the meantime ...

Give your button an id, I'll use id = "btnClose"

Then in the onGridRender event add this code :

$('btnClose').disabled=true;

And in the onRowStateChange event add this code :

$('btnClose').disabled= e.isDirty ? false:true;

Also be aware that

In IE, when the button is disabled, it is rendered by IE in a manner this clearly looks disabled.
However, in Firefox, disabled buttons do not appear to be disabled (even though they are not clickable).
The following technique can be used to address this issue:

In the Grid, define some local CSS (in the Local CSS property)

button:disabled{
opacity: .5;
}

[Scholin]

Re: Custom "submit" button - how to dim it when not dirty

Bob - thanks for the response. This looks like the perfect solution.

One stupid question that I am blanking on: how do I set the button to have an id?

I have the rest all set and ready to go.

Thanks again Bob.

[Bob Moore]

Re: Custom "submit" button - how to dim it when not dirty

Here's an example that you might place in the Custom Grid Toolbar or in a free form area.

<button button class="{Grid.style} Button"[B] id ="btnClose"[/B] onclick=window.location="done.a5w">Close</button>

[Scholin]

Re: Custom "submit" button - how to dim it when not dirty

Bob,

Sorry about having so many questions. So with this example, a button will end up on the grid frame and it is calling an a5w page it looks like (done.a5w)? I guess from there I would write some xbasic?

So what if I have a button placed on the grid (actually I have several save buttons at different locations on this one page - long page I know). I want the client to feel that they could hit save at will but know when these buttons are dirty or not. I have save buttons there now that work with the javascript to save on submit, just want to dim those buttons if possible now. Am I missing something here?

Thanks for your help!

[Bob Moore]

Re: Custom "submit" button - how to dim it when not dirty

It's just an example.

You can make a button do anything you want. Call a Javascript function, inline Javascript, redirect to an A5W page, redirect to a PHP page .. whatever.

Forget about my re-direct .. it's irrelevant. I was just trying to show you how to assign an id to a button. It's just plain old HTML.

How did you add your buttons? If you used HTML to add a button to a freeform area your code should look somewhat similar. All you need to do is add the attribute id="whatever" to the button.

[Scholin]

Re: Custom "submit" button - how to dim it when not dirty

LOL

Well you know that you have become the Javascript Guru who presents such detail directions . . . it is like, well if Bob says this is how you do it - then it has to be . . .exactly as Bob says!

No, I am sorry I am not totally getting it yet - but I see I am very close!

I am using buttons generated by Alpha button option within the grids using the inline javascript with the "{grid.Object}.submitGridPart();" code.

So in this example, how would I identify this button to have the attribute as "id=btnSave" . . for example.

Thank you once again for your help.

[Bob Moore]

Re: Custom "submit" button - how to dim it when not dirty

You can't assign an ID to the buttons that Alpha is generating for you. You will have to use the id's that Alpha assigns.

You can check these using Firebug.

A typical id might be GRID1.V.R1.UNBOUND_BUTTON_1 but the R# will change based on the row number that holds the button and if it is contained in a new row it will use R-1 ... etc.

In a grid you can reference the button id using placeholders like :

{Grid.ComponentName}.V.R{Grid.RowNumber}.UNBOUND_BUTTON_1

I wouldn't use Alpha's buttons to do what you are looking for. You can but it's easier to manage on your your own. You can create your own buttons in a freeform area or in the custom grid toolbar or even in the column headers as I've described and then just use inline Javascript tied to the button onclick event to submit the grid part.