toggleDrawerState with Nativescript-telerik-ui slide drawer

Question

I'm using the newest version of Telerik-Nativescript-UI (ver. 1.3.1). This updated version is supposed to support action bar overlap. I'm using the example shown here to re-work my existing drawer implementation. The issues I'm coming across are my once fully functioning toggle drawer button is no longer working following the update. I'm attempting to call toggleDrawerState() in order to handle this but it's failing when I attempt to get the reference to the drawer. My other issue is the drawer content no longer loads from my widget directory Here is an example of my code below

XML View

  <dpg:DrawerPage
    navigatedTo="onNavigatedTo"
    navigatingTo="navigatingTo"  
    xmlns:dpg="nativescript-telerik-ui/sidedrawer/drawerpage"
    xmlns:drawer="nativescript-telerik-ui/sidedrawer"
    xmlns:widgets="shared/widgets"
    xmlns="http://www.nativescript.org/tns.xsd">

  <page.actionBar>
    <action-bar title="{{L('connections')}}">
      <!--<NavigationButton  icon="res://back" tap="goBack" ios:visibility="collapsed" />      -->
      <NavigationButton  icon="res://menu" tap="toggleDrawer" ios:visibility="collapsed" />
      <action-bar.actionItems>
        <ios>
          <action-item icon="res://ic_menu" ios.position="left" tap="toggleDrawer" />
        </ios>
      </action-bar.actionItems>
    </action-bar>
  </page.actionBar>

  <dpg:DrawerPage.sideDrawer id="">
    <drawer:RadSideDrawer id="drawer">
      <drawer:RadSideDrawer.drawerContent>
        <widgets:drawer-content />
      </drawer:RadSideDrawer.drawerContent>
    </drawer:RadSideDrawer> 
  </dpg:DrawerPage.sideDrawer>

    <StackLayout cssClass="mainContent">
        <Label text="test test test" textWrap="true" cssClass="drawerContentText"/>

    </StackLayout>
</dpg:DrawerPage>

JS where I attempt to toggle the drawer

SideDrawer.prototype.toggleDrawer = function() {
  var page = topmost().currentPage;
  page.getViewById("drawer").toggleDrawerState();
};

Apparently trying to access the drawer by getting the ID attached to the<drawer:RadSideDrawer id="drawer"> is not the correct, hoping someone can point me in the right direction.

Answer 1

In the scenario where you are using the "show over ActionBar" feature of the RadSideDrawer you are no longer adding the RadSideDrawer to the Page's content but to a property of the custom DrawerPage, this is why you can no longer use Page's .getViewById() method. In this scenario you can simply cast the Page to a DrawerPage and directly use its sideDrawer property which is the declared RadSideDrawer in the XML. For example like this:

SideDrawer.prototype.toggleDrawer = function() {
  var page = topmost().currentPage;
  page.sideDrawer.toggleDrawerState();
};