RadSideDrawer Events

RadSideDrawer fires several events informing about changes in the component's state. The following events are exposed by RadSideDrawer:

• drawerOpeningEvent - fired when the drawer is about to open
• drawerOpenedEvent - fired when the drawer has been opened
• drawerClosingEvent - fired when the drawer is about to closed
• drawerClosedEvent - fired when the drawer has closed

Handling RadSideDrawer's events

You can subscribe for RadSideDrawer's events in the classical {N} way - either in your XML file or programmatically. The following snippets demonstrates a scenario in which all four events are handled by assigning handlers in the XML definition. The source of the handlers is also demonstrated:

<nsDrawer:RadSideDrawer id="sideDrawer"
                      drawerPan="onDrawerPan"
                      drawerClosed="onDrawerClosed"
                      drawerClosing="onDrawerClosing"
                      drawerOpened="onDrawerOpened"
                      drawerOpening="onDrawerOpening">
  <nsDrawer:RadSideDrawer.drawerTransition>
    <nsDrawer:PushTransition/>
  </nsDrawer:RadSideDrawer.drawerTransition>
  <nsDrawer:RadSideDrawer.mainContent>
  </nsDrawer:RadSideDrawer.mainContent>
  <nsDrawer:RadSideDrawer.drawerContent>
  </nsDrawer:RadSideDrawer.drawerContent>
</nsDrawer:RadSideDrawer>

export function onDrawerClosed(args: DrawerStateChangedEventArgs) {
    drawerCallbacksModel.onDrawerClosed(args);
}

export function onDrawerClosing(args: DrawerStateChangingEventArgs) {
    drawerCallbacksModel.onDrawerClosing(args);
}

export function onDrawerOpened(args: DrawerStateChangedEventArgs) {
    drawerCallbacksModel.onDrawerOpened(args);
}

export function onDrawerOpening(args: DrawerStateChangingEventArgs) {
    drawerCallbacksModel.onDrawerOpening(args);
}

export function onDrawerPan(args: DrawerStateChangedEventArgs) {
    drawerCallbacksModel.onDrawerPan(args);
}

References

Want to see this scenario in action? Check our SDK examples repo on GitHub. You will find this and many other practical examples with NativeScript UI.

• Callbacks Example