RadSideDrawer Getting Started

This article will guide you through the process of adding a RadSideDrawer instance to a page in your NativeScript application and initializing its content. The code snippets from this section are available as a standalone demo application.

By design the RadSideDrawer is designed to be placed as a single child to your Page. For example:

<Page>
    <!-- RadSideDrawer should be either the absolute root element (instead Page) or a single child of the Page -->
    <RadSideDrawer>
        <!-- drawer menu and content follows here-->
    </RadSideDrawer>
    <!-- <StackLayout></StackLayout>  NOT Allowed! (can't have other layouts on the same level the drawer)-->
</Page>

Installation

Run the following command to add the plugin to your application:

tns plugin add nativescript-ui-sidedrawer

Adding RadSideDrawer to your page

Then, in order to add a RadCalendar instance in a page of your application, you need to define the following XML namespace:

xmlns:nsDrawer="nativescript-ui-sidedrawer".

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

XML
TypeScript

<nsDrawer:RadSideDrawer id="sideDrawer">
  <nsDrawer:RadSideDrawer.drawerContent>
    <GridLayout rows="56, *" backgroundColor="gray">
      <StackLayout class="headerContent">
        <Label text="Navigation Menu"/>
      </StackLayout>
      <ScrollView row="1">
        <StackLayout>
          <Label text="Primary" padding="10" backgroundColor="lightgray"/>
          <Label text="Social" padding="10"/>
          <Label text="Promotions" padding="10" />
          <Label text="Labels" padding="10" backgroundcolor="lightgray" backgroundColor="transparent" />
          <Label text="Important" padding="10" />
          <Label text="Starred" padding="10" />
          <Label text="Sent Mail" padding="10" />
          <Label text="Drafts" padding="10" />
          <Label text="Close Drawer" color="lightgray" padding="10" style="horizontal-align: center" tap="{{ onCloseDrawerTap }}"/>
        </StackLayout>
      </ScrollView>
    </GridLayout>
  </nsDrawer:RadSideDrawer.drawerContent>

  <nsDrawer:RadSideDrawer.mainContent>
    <StackLayout >
      <Label text="{{ mainContentText }}" textWrap="true" fontSize="13" padding="10" />
      <Button text="Open drawer" tap="{{ onOpenDrawerTap }}" margin="10" style="horizontal-align: left" />
    </StackLayout>
  </nsDrawer:RadSideDrawer.mainContent>
</nsDrawer:RadSideDrawer>

import { GettingStartedViewModel } from "./getting-started-model";
import { Page } from "tns-core-modules/ui/page";

export function pageLoaded(args) {
    let page = args.object as Page;
    page.bindingContext = new GettingStartedViewModel();
}

As you can see, the mainContent and drawerContent properties have also been initialized with a set of UI elements to demonstrate how content is set to the RadSideDrawer. The bindings and event handlers in the code snippets can be found in the next section.

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:

import { Observable } from "tns-core-modules/data/observable";
import { Frame } from "tns-core-modules/ui/frame";
import { RadSideDrawer } from "nativescript-ui-sidedrawer";

export class GettingStartedViewModel extends 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: RadSideDrawer = <RadSideDrawer>(Frame.topmost().getViewById("sideDrawer"));
        sideDrawer.showDrawer();
    }

    public onCloseDrawerTap() {
        let sideDrawer: RadSideDrawer = <RadSideDrawer>(Frame.topmost().getViewById("sideDrawer"));
        sideDrawer.closeDrawer();
    }
}

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

Figure 1. RadSideDrawer's 'tkMainContent'

TelerikUI-SideDrawer-Getting-Started

Figure 2. RadSideDrawer's 'tkDrawerContent'

TelerikUI-SideDrawer-Getting-Started

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.

RadAutoCompleteTextView Examples

NativeScript Core