WireBootstrap
HomeDocsBuySupport
  • Introduction
  • Overview
  • Getting Started
  • Installation
  • Connecting to Data
    • Data Connectors
      • SQL Data
      • Custom Web Services
      • Local Data
      • Other Sources
    • Data Sources
    • Discovery
    • Building a Data Connector
  • Working With Queries
    • Select Queries
      • Query Extensions
    • Stored Procedures
    • Custom Web Services
    • Executing Queries
    • ORM
  • Writing Data
  • Updates
  • Deletes
  • Working with DataTables
    • Introduction
    • Filter and Sort
    • Select and Calculate
    • Joins
    • Rows
    • Columns
  • Working with DataSets
  • Introduction
  • Executing Queries
  • Transforms
  • Writing Data
  • Data Events
  • Working with Components
    • Introduction
    • Encapsulation
    • Configuration
      • Data
      • Events
      • Observables
      • Validation
      • Display
      • Vendor
      • Custom
    • Component
    • Web Frameworks
    • Building a Component
      • Hello World
      • Data Events
      • DataSets
  • Working With Data Events
    • Introduction
    • Event Basics
    • Event Data
    • Event Actions
  • Working with Themes
    • Introduction
    • Sample Data
    • Libraries
    • Pages
    • Building a Theme Project
  • Utilities
    • Formatting
    • Expressions
    • Collections
    • Spinners
    • Copy and Merge
    • Validation
    • Loading Assets
    • Service Calls
    • Download Files
    • Browser Location
    • Types
    • Promise
  • Reference
    • wire
      • wire.Collection
      • wire.download
      • wire.validate
    • wire.data
      • wire.data.DataEvent
      • wire.data.DataModel
      • wire.data.DataPromise
      • wire.data.DataSet
      • wire.data.DataSource
      • wire.data.DataTable
        • Columns
        • Rows
      • wire.data.StoredProcedure
      • wire.data.TableQuery
    • wire.ui
      • wire.ui.Component
      • wire.ui.validate
Powered by GitBook
On this page
  • User Events
  • Event Data
  • Life Cycle Events
  • Ready
  • DataBind
  • Fail

Was this helpful?

  1. Working with Components
  2. Configuration

Events

Components event callbacks are configured using the events configuration attribute.

User Events

User events are those initiated by a user working with a component. User events can have any name but the data passed into the user event callback will have the same format.

Event Data

Name

Description

base

Underlying component or plugin event that raised the WireBootstrap event

data

component

The WireBootstrap component that raised the event

const select = new wire.bsSelect().render("#select", {
    ...
    events: {
        change: (config) => {
            ...
            // config.base
            // config.data
            // config.component
        }    
    }
});

Life Cycle Events

Ready

The ready event is called when the component is done initialing the first time. This includes retrieving data from a data service if bound to a dataset as well as rendering the component in the DOM.

const select = new wire.bsSelect().render("#select", {
    ...
    events: {
        ready: (config) => {
            ...
        }                
    }
});

DataBind

The databind event is called each time the component gets new data. If bound to static data such as an array of objects, this event will be called one time at the same time as the ready event. If bound to a dataset, it will be called any time the component receives data updates from the dataset and has made the necessary changes to reflect them in its UI.

const select = new wire.bsSelect().render("#select", {
    ...
    events: {       
        databind: (config) => {
            ...
        }            
    }
});

Fail

The fail event is called when the component fails during one of the life cycle events. This event replaces ready and databind passing in the exception.

const select = new wire.bsSelect().render("#select", {
    ...
    events: {
        fail: (ex) => {
            ...
        }                
    }
});

Note, there is no need to handle the exception object with any type of UI message as this is handled by the component.

PreviousDataNextObservables

Last updated 3 years ago

Was this helpful?

Standard WireBootstrap

For more on component events, visit the reference page.

wire.ui.Component
event data