Ignite UI™ API Documentation

ui.igToolbarButton

Code Sample

    <!DOCTYPE HTML>
<html>
<head>
    <title>Toolbar Button Demos</title>
 
    <!-- Infragistics Combined CSS -->   
    <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
    <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
    <!-- jQuery Core -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <!-- jQuery UI -->
    <script src="js/jquery-ui.js" type="text/javascript"></script>
    <!-- Infragistics Combined Scripts -->
    <script src="js/infragistics.core.js" type="text/javascript"></script>
    <script src="js/infragistics.lob.js" type="text/javascript"></script>
    <script type="text/javascript">
            $(function () {
                $("#toolbar-button-bold").igToolbarButton({
                    icons: {
                        primary: "ui-igbutton-bold",
                        secondary: null
                    }
                });
 
                $("#toolbar-button-justifyleft").igToolbarButton({
                    icons: {
                        primary: "ui-igbutton-justifyleft",
                        secondary: null
                    }
                });
 
                $("#toolbar-button-justifycenter").igToolbarButton({
                    icons: {
                        primary: "ui-igbutton-justifycenter",
                        secondary: null
                    }
                });
 
                $("#toolbar-button-justifyright").igToolbarButton({
                    icons: {
                        primary: "ui-igbutton-justifyright",
                        secondary: null
                    }
                });
 
                $("#toolbar-button-justifyfull").igToolbarButton({
                    icons: {
                        primary: "ui-igbutton-justifyfull",
                        secondary: null
                    }
                });
            });
    </script>
</head>
<body>
    <div id="toolbar-button-bold"></div>
 
    <div id="toolbar-button-justifyleft"></div>
 
    <div id="toolbar-button-justifycenter"></div>
 
    <div id="toolbar-button-justifyright"></div>
 
    <div id="toolbar-button-justifyfull"></div>
</body>
</html>
    

Dependencies

jquery-1.9.1.js

jquery.ui.core.js

jquery.ui.widget.js

infragistics.util.js

infragistics.util.jquery.js

infragistics.ui.shared.js

Inherits

jQuery.widget

Show Details

allowToggling

Type:: bool
Default:: true

Enable/Disable the "Toggling" of a button.

Code Sample

//Initialize
$(".selector").igToolbarButton({
    allowToggling: true
});
 
// Get
var allowedToggling = $(".selector").igToolbarButton("option", "allowToggling");
 
// Set
$(".selector").igToolbarButton("option", "allowToggling", false);

isSelected

Type:: bool
Default:: false

Get/Set whether the toolbar button is selected.

Code Sample

//Initialize
$(".selector").igToolbarButton({
    isSelected: false
});
 
// Get
var isSelected = $(".selector").igToolbarButton("option", "isSelected");
 
// Set
$(".selector").igToolbarButton("option", "isSelected", true);

For more information on how to interact with the Ignite UI controls' events, refer to
Using Events in Ignite UI.

Note: Calling API methods programmatically does not raise events related to their operation unless specifically stated otherwise by the corresponding API documentation; those events are only raised by their respective user interaction.

Show Details

activated

Cancellable:: false

Event fired after the toolbar button is activated.
Function takes arguments evt and ui.
Use ui.owner to get reference to this igToolbarButton.

Code Sample

//Bind after initialization
$(document).on("igtoolbarbuttonactivated", ".selector", function(evt, ui) {
    //use to obtain reference to the event browser
    evt.originalEvent;
    //return reference to igToolbarButton
    ui.owner;
});
 
$(".selector").igToolbarButton({
    activated: function(evt, ui) {
    ...
    }
});

activating

Cancellable:: true

Event fired before the toolbar button is activated.
Function takes arguments evt and ui.
Use ui.owner to get reference to this igToolbarButton.

Code Sample

//Bind after initialization
$(document).on("igtoolbarbuttonactivating", ".selector", function(evt, ui) {
    //use to obtain reference to the event browser
    evt.originalEvent;
    //return reference to igToolbarButton
    ui.owner;
});
 
$(".selector").igToolbarButton({
    activating: function(evt, ui) {
    ...
    }
});

deactivated

Cancellable:: false

Event fired after the toolbar button is deactivated.
Function takes arguments evt and ui.
Use ui.owner to get reference to this igToolbarButton.

Code Sample

$(".selector").igToolbarButton({
    deactivated: function(evt, ui) {
        //use to obtain reference to the event browser
        evt.originalEvent;
        //return reference to igToolbarButton
        ui.owner;
    }
});
 
//Bind after initialization
$(document).on("igtoolbarbuttondeactivated", ".selector", function(evt, ui) {
    //return reference to igToolbarButton
    ui.owner;
});

deactivating

Cancellable:: true

Event fired before the toolbar button is deactivated.
Function takes arguments evt and ui.
Use ui.owner to get reference to this igToolbarButton.

Code Sample

$(".selector").igToolbarButton({
    deactivating: function(evt, ui) {
        //use to obtain reference to the event browser
        evt.originalEvent;
        //return reference to igToolbarButton
        ui.owner;
    }
});
 
$(document).on("igtoolbarbuttondeactivating", ".selector", function(evt, ui) {
    //return reference to igToolbarButton
    ui.owner;
});

Show Details

activate

.igToolbarButton( "activate", event:object );
Activate toolbar button.
- event
- Type:object
Code Sample

$(".selector").igToolbarButton("activate");
deactivate

.igToolbarButton( "deactivate", event:object );
Deactivate toolbar button.
- event
- Type:object
Code Sample

$(".selector").igToolbarButton("deactivate");
destroy

.igToolbarButton( "destroy" );
Destroy the widget.
Code Sample

$(".selector").igToolbarButton("destroy");
toggle

.igToolbarButton( "toggle" );
Toggle toolbar button.
Code Sample

$(".selector").igToolbarButton("toggle");
widget

.igToolbarButton( "widget" );

Return Type:

object

Return Type Description:

Returns the element that represents this widget.
Returns the element that represents this widget.
Code Sample

$('.selector').igToolbarButton("widget");

Ignite UI for jQuery | API Reference

ui.igToolbarButton

Code Sample

Dependencies

Inherits

allowToggling

Code Sample

isSelected

Code Sample

activated

Code Sample

activating

Code Sample

deactivated

Code Sample

deactivating

Code Sample

activate

Code Sample

deactivate

Code Sample

destroy

Code Sample

toggle

Code Sample

widget

Code Sample

ui-igtoolbarbutton