RadSideDrawer : Getting Started

This article will guide you through the process of adding a RadSideDrawer instance to a page in your NativeScript application and using the drawerContent and mainContent properties to add content to the component.

Adding RadSideDrawer to your page

Depending on the version of Telerik UI for NativeScript you are using, you need to define one of the following namespaces on your XML root to be able to access the RadSideDrawer components:

  • xmlns:sd="nativescript-telerik-ui/sidedrawer" for Telerik UI for NativeScript (free)
  • xmlns:sd="nativescript-telerik-ui-pro/sidedrawer" for Telerik UI for NativeScript (Pro)

Here's a sample namespace declaration:

<navigation:ExampleDrawerPage xmlns:navigation="navigation/example-drawer-page" loaded="pageLoaded" 
    navigatedTo="onNavigatedTo"  
    xmlns:dpg="nativescript-telerik-ui-pro/sidedrawer/drawerpage"
    xmlns:drawer="nativescript-telerik-ui-pro/sidedrawer"
    xmlns="http://www.nativescript.org/tns.xsd">

The namespace here is called drawer. No you can access RadSideDrawer's APIs in your XML page. Adding an instance of RadSideDrawer is done the following way:

<navigation:ExampleDrawerPage xmlns:navigation="navigation/example-drawer-page" loaded="pageLoaded" 
    navigatedTo="onNavigatedTo"  
    xmlns:dpg="nativescript-telerik-ui-pro/sidedrawer/drawerpage"
    xmlns:drawer="nativescript-telerik-ui-pro/sidedrawer"
    xmlns="http://www.nativescript.org/tns.xsd">
    <navigation.actionBar>
        <ActionBar title="Getting started" />
    </navigation.actionBar>

    <dpg:DrawerPage.sideDrawer>
        <drawer:RadSideDrawer id="sideDrawer">
          <drawer:RadSideDrawer.drawerContent>
            <StackLayout cssClass="drawerContent">
              <StackLayout cssClass="headerContent">
                <Label text="Navigation Menu"/>
              </StackLayout>
              <StackLayout cssClass="drawerMenuContent">
                <Label text="Primary" cssClass="drawerSectionHeader" />
                <Label text="Social" cssClass="drawerSectionItem" />
                <Label text="Promotions" cssClass="drawerSectionItem" />
                <Label text="Labels" cssClass="drawerSectionHeader" />
                <Label text="Important" cssClass="drawerSectionItem" />
                <Label text="Starred" cssClass="drawerSectionItem" />
                <Label text="Sent Mail" cssClass="drawerSectionItem" />
                <Label text="Drafts" cssClass="drawerSectionItem" />
              </StackLayout>
              <Button text="Close Drawer" tap="{{ onCloseDrawerTap }}"/>

            </StackLayout>
          </drawer:RadSideDrawer.drawerContent>
        </drawer:RadSideDrawer>
    </dpg:DrawerPage.sideDrawer>

    <StackLayout >
      <Label text="{{ mainContentText }}" textWrap="true" cssClass="drawerContentText"/>

      <Button text="Open drawer" tap="{{ onOpenDrawerTap }}" cssClass="drawerContentButton"/>

    </StackLayout>
</navigation:ExampleDrawerPage>

As you can see, the mainContent and drawerContent properties have also been initialized with sample elements to demonstrate how content is set to RadSideDrawer.

Binding properties on elements in the drawerContent and mainContent

Content defined in the drawer and main sections has access to the same bindingContext the drawer instance has. You can therefore bind properties on the View elements inside to properties exposed by the object behind the bindingContext. Considering the XML code above, here's a sample view-model code that is used as a binding context:

export class GettingStartedViewModel extends observableModule.Observable {
    constructor() {
        super();
        this.set("mainContentText", "SideDrawer for NativeScript can be easily setup in the XML definition of your page by defining main- and drawer-content. The component"
            + " has a default transition and position and also exposes notifications related to changes in its state. Swipe from left to open side drawer.");
    }

    public onOpenDrawerTap() {
        let sideDrawer: drawerModule.RadSideDrawer = <drawerModule.RadSideDrawer>( frame.topmost().getViewById("sideDrawer"));
        sideDrawer.showDrawer();
    }

    public onCloseDrawerTap() {
        let sideDrawer: drawerModule.RadSideDrawer = <drawerModule.RadSideDrawer>( frame.topmost().getViewById("sideDrawer"));
        sideDrawer.closeDrawer();
    }
}
var GettingStartedViewModel = (function (_super) {
    __extends(GettingStartedViewModel, _super);
    function GettingStartedViewModel() {
        _super.call(this);
        this.set("mainContentText", "SideDrawer for NativeScript can be easily setup in the XML definition of your page by defining main- and drawer-content. The component"
            + " has a default transition and position and also exposes notifications related to changes in its state. Swipe from left to open side drawer.");
    }
    GettingStartedViewModel.prototype.onOpenDrawerTap = function () {
        var sideDrawer = (frame.topmost().getViewById("sideDrawer"));
        sideDrawer.showDrawer();
    };
    GettingStartedViewModel.prototype.onCloseDrawerTap = function () {
        var sideDrawer = (frame.topmost().getViewById("sideDrawer"));
        sideDrawer.closeDrawer();
    };
    return GettingStartedViewModel;
}(observableModule.Observable));
exports.GettingStartedViewModel = GettingStartedViewModel;

The following screenshots demonstrate how the drawer looks like in that case:

Android:

TelerikUI-SideDrawer-Getting-Started

iOS:

TelerikUI-SideDrawer-Getting-Started

If the user swipes from the left edge to the right, the drawer appears and fades the main content:

Android:

TelerikUI-SideDrawer-Getting-Started

iOS:

TelerikUI-SideDrawer-Getting-Started

Showing RadSideDrawer over the navigation bar/action bar

To show RadSideDrawer over the navigation bar or action bar, developers must use DrawerPage instead of the standard Page.
For example:

<dpg:DrawerPage xmlns:navigation="navigation/example-drawer-page" loaded="pageLoaded" navigatedTo="onNavigatedTo"  
    xmlns:dpg="nativescript-telerik-ui-pro/sidedrawer/drawerpage"
    xmlns:drawer="nativescript-telerik-ui-pro/sidedrawer"
    xmlns="http://www.nativescript.org/tns.xsd">

  <dpg:DrawerPage.sideDrawer>
    <drawer:RadSideDrawer id="sideDrawer">
      <drawer:RadSideDrawer.drawerContent>
        <StackLayout cssClass="drawerContent">
          <StackLayout cssClass="headerContent">
            <Label text="Navigation Menu"/>
          </StackLayout>
          <ScrollView>
            <StackLayout cssClass="drawerMenuContent">
              <Label text="Primary" cssClass="drawerSectionHeader" />
              <Label text="Social" cssClass="drawerSectionItem" />
              <Label text="Promotions" cssClass="drawerSectionItem" />
              <Label text="Labels" cssClass="drawerSectionHeader" />
              <Label text="Important" cssClass="drawerSectionItem" />
              <Label text="Starred" cssClass="drawerSectionItem" />
              <Label text="Sent Mail" cssClass="drawerSectionItem" />
              <Label text="Drafts" cssClass="drawerSectionItem" />
            </StackLayout>
          </ScrollView>
          <Button text="Close Drawer" tap="{{ closeDrawer }}"/>

        </StackLayout>
      </drawer:RadSideDrawer.drawerContent>
    </drawer:RadSideDrawer> 
  </dpg:DrawerPage.sideDrawer>

    <StackLayout cssClass="mainContent">
        <Label text="{{ exampleText }}" textWrap="true" cssClass="drawerContentText"/>

        <Button text="Open drawer" tap="{{ onOpenDrawerTap }}" cssClass="drawerContentButton"/>

    </StackLayout>
</dpg:DrawerPage>

Furthermore the main content should not be specified explicitly, it is set as content of the page.
DrawerPage has a sideDrawer property on which a side drawer must be set.

<dpg:DrawerPage.sideDrawer>
  <drawer:RadSideDrawer id="sideDrawer">
    <drawer:RadSideDrawer.drawerContent>
      <StackLayout cssClass="drawerContent">
        <StackLayout cssClass="headerContent">
          <Label text="Navigation Menu"/>
        </StackLayout>
        <ScrollView>
          <StackLayout cssClass="drawerMenuContent">
            <Label text="Primary" cssClass="drawerSectionHeader" />
            <Label text="Social" cssClass="drawerSectionItem" />
            <Label text="Promotions" cssClass="drawerSectionItem" />
            <Label text="Labels" cssClass="drawerSectionHeader" />
            <Label text="Important" cssClass="drawerSectionItem" />
            <Label text="Starred" cssClass="drawerSectionItem" />
            <Label text="Sent Mail" cssClass="drawerSectionItem" />
            <Label text="Drafts" cssClass="drawerSectionItem" />
          </StackLayout>
        </ScrollView>
        <Button text="Close Drawer" tap="{{ closeDrawer }}"/>

      </StackLayout>
    </drawer:RadSideDrawer.drawerContent>
  </drawer:RadSideDrawer> 
</dpg:DrawerPage.sideDrawer>

Finally, in the example above, notice how the drawer content is specified inside RadSideDrawer.

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.