ToolBarButton.StateChanged

Syntax

StateChanged: function (sender, args);

Parameters

sender. Event source.

args. Event information.

Description

The StateChanged event is fired when the button state is changed.

Example

To execute the example, the HTML page must contain the ToolBar component named toolBar (see Example of creating the ToolBar component).

//Add four buttons to the toolbar: two radio buttons and two checkboxes:

    toolBar.addItem(new PP.Ui.ToolBarButton({ Content: "1", IsToggle: true

}));

    toolBar.addItem(new PP.Ui.ToolBarButton({ Content: "2", IsToggle: true

}));

    toolBar.addItem(new PP.Ui.ToolBarButton({ Content: "3", GroupName: "Gr"

}));

    toolBar.addItem(new PP.Ui.ToolBarButton({ Content: "4", GroupName: "Gr"

}));

    var children = toolBar.getItems();

//Create a function that handles the StateChange event:

    function onStateChange() {

        for (var i = 0; i < children.length; i++) {

            var checked = toolBar.getItem(i).getIsChecked();

            var toggle = toolBar.getItem(i).getIsToggle();

            if (checked == true) {

                 if (toggle == true)

                     toolBar.getItem(i).setContent("check" + i);

                 else

                     toolBar.getItem(i).setContent("radio" + i);

             }

        }

    }

//Adds the event handler for all buttons of the toolbar:

    for (var i = 0; i < children.length; i++) {

        toolBar.getItem(i).StateChanged.add(onStateChange);

    }

After executing the example two radio buttons and two checkboxes are added on the toolbar. Selecting these buttons sets new names for them.

See also:

ToolBarButton