Data Binding Tip

Here’s a simple way to enable/disable controls based on selection. For example, suppose you have a DataGrid and a number of buttons which operate on the data. Some buttons can only be used when a row is selected. Other buttons can only be used when there are no selections. Still others can only be used on certain selections.

The Problem

To handle this you may be tempted to code a number of if-statements or to use data binding to set up a variable and then set the variable at various times in your code. Something like this:

[Bindable] private var somethingSelected:Boolean = false;

<mx:Button label="Publish" click="publishItem()" enabled="{somethingSelected}" />

This is a good attempt. All the controls which depend on the selection state of the DataGrid are bound to this one variable. Changing the variable changes the controls’ enabled state. However, you still have to decide when to change the variable. For example:

private function publishItem() : void {
     // get the selected item
     // publish it
     grid.selectedItem = -1; // clear the selection
     somethingSelected = false;

To complicate things, suppose another button should be enabled if the selection contains a specific value. You not only have to worry about the somethingSelected variable, you also have to worry about this other test. In other words, in the publishItem() function you have to include setting the other variable. This gets more complex the more conditions you have.

An Easier Way

There is an easier way. Right now the Publish button has a binding with the somethingSelected variable. What is needed is a binding between the somethingSelected variable and the selection state of the DataGrid. You can set that up with the <mx:Binding> tag:

<mx:Binding source="grid.selectedIndex >= 0" destination="somethingSelected" />

Now the value of somethingSelected is tied to the selection state of the DataGrid. Select a row and somethingSelected turns true and all of the buttons with enabled="{somethingSelected}" are enabled and all the buttons with enabled="{!somethingSelected}" are disabled.

The source of the Binding does not have to be a variable. It can be an expression as shown here. The source is simply the condition of the grid’s selectedIndex being greater than or equal to zero.

Here is a slightly more complex example:

<mx:Binding source="grid.selectedItem.code == 1" destination="codeOnePicked" />

Now a record in the DataGrid while a field whose value is 1 will turn the variable codeOnePicked true.

<mx:CheckBox label="Code One?" selected="{codeOnePicked}" />
<mx:Button label="Publish" enabled="{somethingSelected && !codeOnePicked}" />

Here, the CheckBox is selected whenever any record from the DataGrid is selected that as a code field of 1; the Publish button is disabled when that happens.


If you have controls that depend on selections or other conditions in the UI, see if the <mx:Binding> tag can clean up your code and make it easier to read and extend.