Component Events
Smart Data Source
onReady
Triggered after the Smart Data Source has been fully loaded. The event arguments provide the Smart Data Source instance. Usage:
Template:
<smart-data-source (on-ready)="onDataSourceReady($event)"></smart-data-source>selectionChanged
Triggered when the Smart Data Source's selection has been changed. The event arguments provide the old and new selection. If there is no old selection, then oldSelection will have a null value. Similarly, if there is no new selection, newSelection will have a null value. Usage:
Template:
<smart-data-source (selection-changed)="handleSelectionChange($event)"></smart-data-source>Component/Controller:
salesRepDataSource.selectionChanged.subscribe((ev: SelectionChangedEventArgs) => {
console.log(ev.newSelection && ev.newSelection.RepName);
});stateChanged
Triggered when the Smart Data Source's state has changed. The event arguments provide a StateEvent, which could be: StateEvents.IDLE, StateEvents.UPDATING, StateEvents.ADDING_RECORD, StateEvents.READING, StateEvents.ERROR. The event arguments also provide data property, which (if applicable), contains any data associated with the event, or is left null if no such data exists. Usage:
Template:
<smart-data-source (state-changed)="handleStateChanged($event)"></smart-data-source>Component/Controller:
salesRepDataSource.stateChanged.subscribe((ev: DataSourceStateChangeEventArgs) => {
console.log(ev.eventType);
console.log(ev.data);
});
Smart Filter
onFilter
Triggered when the filter button is clicked. The event arguments provide the filters being applied. Usage:
Template:
<smart-filter (on-filter)="handleFilterEvent($event)"></smart-filter>Component/Controller:
filterComponent.onFilter.subscribe((ev: FilterEvent) => {
console.log(ev.filters);
});
Smart Toolbar
addButtonClicked
Triggered when the add button is clicked.
Template:
<smart-toolbar (on-add)="handleToolbarAdd()">
<smart-toolbar-button
label="Add">
</smart-toolbar-button>
</smart-toolbar>Component/Controller:
// Defining the method for the assigned HTML attribute
handleToolbarAdd() {
console.log('Event fired');
}
// Subscribing to the event programatically
toolbarComponent.addButtonClicked.subscribe(() => {
console.log('toolbar add button clicked');
});saveButtonClicked
Triggered when the save button is clicked.
Template:
<smart-toolbar (on-save)="handleToolbarSave()">
<smart-toolbar-button
label="Save">
</smart-toolbar-button>
</smart-toolbar>Component/Controller:
// Defining the method for the assigned HTML attribute
handleToolbarSave() {
console.log('Event fired');
}
// Subscribing to the event programatically
toolbarComponent.saveButtonClicked.subscribe(() => {
console.log('toolbar save button clicked');
});deleteButtonClicked
Triggered when the delete button is clicked.
Template:
<smart-toolbar (on-delete)="handleToolbarDelete()">
<smart-toolbar-button
label="Delete">
</smart-toolbar-button>
</smart-toolbar>Component/Controller:
// Defining the method for the assigned HTML attribute
handleToolbarDelete() {
console.log('Event fired');
}
// Subscribing to the event programatically
toolbarComponent.deleteButtonClicked.subscribe(() => {
console.log('toolbar delete button clicked');
});cancelButtonClicked
Triggered when the cancel button is clicked.
Template:
<smart-toolbar (on-cancel)="handleToolbarCancel()">
<smart-toolbar-button
label="Cancel">
</smart-toolbar-button>
</smart-toolbar>Component/Controller:
// Defining the method for the assigned HTML attribute
handleToolbarCancel() {
console.log('Event fired');
}
// Subscribing to the event programatically
toolbarComponent.cancelButtonClicked.subscribe(() => {
console.log('toolbar cancel button clicked');
});nextButtonClicked
Triggered when the "next" navigation button is clicked.
Template:
<smart-toolbar (on-next)="handleToolbarN ext()">
<smart-toolbar-button
label="Next">
</smart-toolbar-button>
</smart-toolbar>Component/Controller:
// Defining the method for the assigned HTML attribute
handleToolbarNext() {
console.log('Event fired');
}
// Subscribing to the event programatically
toolbarComponent.nextButtonClicked.subscribe(() => {
console.log('toolbar next button clicked');
});previousButtonClicked
Triggered when the "previous" navigation button is clicked.
Template:
<smart-toolbar (on-previous)="handleToolbarPrevious()">
<smart-toolbar-button
label="Previous">
</smart-toolbar-button>
</smart-toolbar>Component/Controller:
// Defining the method for the assigned HTML attribute
handleToolbarPrevious() {
console.log('Event fired');
}
// Subscribing to the event programatically
toolbarComponent.previousButtonClicked.subscribe(() => {
console.log('toolbar previous button clicked');
});buttonClicked
Triggers when any button is clicked. The event arguments provide a string representing the name of the button (add, save, cancel, delete, previous, or next).
Usage:
Template:
<smart-toolbar (on-button-clicked)="handleButtonClick($event)">
<smart-toolbar-button
role="command"
itemId="customButton"
label="My Custom Button">
</smart-toolbar-button>
</smart-toolbar>Component/Controller:
// Defining the method for the assigned HTML attribute
onToolbarButtonClicked(ev: string) {
console.log('ID of the button clicked is ', ev); // Result: 'ID of the button clicked is customButton'
}
// Subscribing to the event programatically
toolbarComponent.buttonClicked.subscribe((button: string) => {
console.log('toolbar button clicked: %s', button);
});
Smart Viewer
inputValueChanged
Triggered when the value of an input contained within the Smart Viewer is changed. The event arguments provide the input DOM element, the DOM element id and the new value. In the case of Smart Lookups and Smart Combo Editors, the input value can also be an object. Usage:
Template:
<smart-viewer (inputValueChanged)="handleViewerInputChange($event)"></smart-viewer>Component/Controller:
viewerComponent.inputValueChanged.subscribe((ev: InputChangedEventArgs) => {
console.log('input id: %s', ev.inputId);
console.log('input value: %s', typeof ev.inputValue === 'object' ? JSON.stringify(ev.inputValue) : ev.inputValue);
//add custom validation logic
if (invalidInput) {
//manipulate the input DOM element using ev.inputElement
}
});
Smart Grid
onCommandClicked
Fired when the user clicks a command button. The CommandButtonEventArgs class include the command name and the corresponding record.
Template:
<smart-grid (on-command-clicked)="handleCommandClick($event)" ... ></smart-grid>Component/Controller:
gridComponent.onCommandClicked.subscribe((ev: CommandButtonEventArgs) => {
console.log(ev.command);
let record = ev.dataItem;
/** your custom logic here */
});
onDoubleClicked
Fired when the user double clicks a row. The GridDoubleClickEvent class includes the selected index, and the selected record.
Template:
<smart-grid (onDoubleClicked)="handleDoubleClick($event)" ... ></smart-grid>Component/Controller:
gridComponent.onDoubleClicked.subscribe((ev: GridDoubleClickEvent) => {
console.log(ev.selectedIndex);
let record = ev.selection;
/** your custom logic here */
});
selectionChanged
Fired when the grid's selection has changed. The GridSelectionChangedEventArgs class includes the selection mode (single or multiple), number of selected rows, the selected items and the selected indexes.
Template:
<smart-grid (selection-changed)="handleSelectionChange($event) ... ></smart-grid>Component/Controller:
gridComponent.selectionChanged.subscribe((ev: GridSelectionChangedEventArgs) => {
let record = ev.selection[0];
/** your custom logic here */
});
Smart Lookup
beforePerformLookup
This event is triggered before a lookup call has been made. It filters the data by using SmartFilterDescriptor objects or ABL query strings.
Template:
<smart-lookup [beforePerformLookup]="beforePerformLookupHandler" ... ></smart-lookup>Component/Controller:
beforePerformLookupHandler (ev: IBeforePerformLookupEventArgs) {
ev.filter = 'for each eSalesrep where eSalesrep.SalesRep = BBB';
ev.queryString = 'for each eSalesrep where eSalesrep.SalesRep = BBB';
ev.canceled = true;
/** your custom logic here */
};IN