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.

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

Adding RadSideDrawer to your page

Depending on the version of Progress NativeScript UI you are using, you need to define one of the following namespaces on your XML root (commonly the Page element) to be able to access the RadSideDrawer components:

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

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:

<nsDrawer:RadSideDrawer id="sideDrawer">
  <nsDrawer:RadSideDrawer.drawerContent>
    <StackLayout backgroundColor="gray">
      <StackLayout height="56" style="text-align: center; vertical-align: center;">
        <Label text="Navigation Menu"/>
      </StackLayout>
      <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" />
        <Label text="Important" padding="10" />
        <Label text="Starred" padding="10" />
        <Label text="Sent Mail" padding="10" />
        <Label text="Drafts" padding="10" />
      </StackLayout>
      <Label text="Close Drawer" color="lightgray" padding="10" style="horizontal-align: center" tap="{{ onCloseDrawerTap }}"/>

    </StackLayout>
  </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) {
    var 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 = require("tns-core-modules/ui/frame");
import { RadSideDrawer } from "nativescript-telerik-ui-pro/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 TelerikUI-SideDrawer-Getting-Started

Figure 2. RadSideDrawer's 'tkDrawerContent'

TelerikUI-SideDrawer-Getting-Started 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.

Related articles you might find useful: