Toolbar Visibility Changed Event

An Adaptable Event which is fired when a Toolbar becomes Visible in the Dashboard.

tip

This event is fired for both Adaptable (i.e. shipped) and Custom Toolbars but typically you will only be interested in the latter

It is most commonly used to provide custom rendering for Custon Toolbars.

warning

This event only fires when the Toolbar becomes visible and not when it is hidden

Properties

PropertyDescription
tabDashboard Tab containing the Toolbar that has visibility changed
toolbarName of Toolbar which has visibility changed
visibilityVisibility type

Event Subscription

Subscribing to the Event is done the same as with all Adaptable Events.

The key element is to use the getCustomToolbarContentsDiv function in Dashboard API.

This provides the Div that AdapTable creates in a Custom Toolbar and

React Wrapper

adaptableApi.eventApi.on(
'ToolbarVisibilityChanged',
(toolbarVisibilityChangedEventArgs: ToolbarVisibilityChangedEventArgs) => {
if (
toolbarVisibilityChangedEventArgs.data[0].id.toolbar === 'Demo'
) {
// Use Dashboard Api to get the Div element for the Custom Toolbar
const demoDiv = adaptableApi.dashboardApi.getCustomToolbarContentsDiv('Demo')
// Create the custom content for the Toolbar
const toolbarContents = (
<div style={{ display: 'flex' }}>
// add any custom content as required
</div>
);
ReactDOM.render(toolbarContents, demoDiv);
}
}
);

Angular Wrapper

This snippet is taken from the Angular Wrapper (v.10) Example App.

@Component({
selector: 'custom-toolbar',
template: `
<button
class="ab-SimpleButton ab-SimpleButton--variant-raised ab-SimpleButton--tone-neutral"
(click)="showActive()"
>
Show Active Trades
</button>
`
})
export class ToolbarComponent {
count: number;
api: AdaptableApi;
public setCount(count: number) {
this.count = count;
}
public setAdaptableApi(api: AdaptableApi) {
this.api = api;
}
showActive() {
this.api.filterApi.setColumnFilter([
{
ColumnId: 'status',
Predicate: { PredicateId: 'Is', Inputs: ['Pending'] }
}
]);
}
}
- - - - - - - -
adaptableApi.eventApi.on(
'ToolbarVisibilityChanged',
(toolbarVisibilityChangedEventArgs: ToolbarVisibilityChangedEventArgs) => {
if (
toolbarVisibilityChangedEventArgs.data[0].id.toolbar === 'Demo'
) {
// Use Dashboard Api to get the Div element for the Custom Toolbar
const demoDiv = adaptableApi.dashboardApi.getCustomToolbarContentsDiv('Demo')
// Create a Portal based on the given component type
let componentPortal = new ComponentPortal(
ToolbarComponent,
undefined,
this.injector
);
// Create a PortalHost with the specified location as its anchor element
let bodyPortalHost = new DomPortalOutlet(
domNode,
this.resolver,
this.appRef,
this.injector
);
this.toolbarReference = bodyPortalHost.attach(
componentPortal
) as ComponentRef<ToolbarComponent>;
this.toolbarReference.instance.setAdaptableApi(adapTableApi);
return;
}
}
}
);

More Information