CODEWITHSUNDEEP
androidiosnativescriptnativescript-telerik-ui
Xoyce
Xoyce

Reputation: 367

Nativescript RadSideDrawer undefined

I have a problem with implementing shared SideDrawer. I was following this article https://www.nativescript.org/blog/a-deep-dive-into-telerik-ui-for-nativescripts-sidedrawer

Main page XML:

<Page 
  xmlns="http://schemas.nativescript.org/tns.xsd" 
  xmlns:sd="nativescript-telerik-ui/sidedrawer" loaded="pageLoaded">
  <Page.actionBar>
    <ActionBar class="action-bar" title="Manu">
      <android>
        <NavigationButton icon="res://ic_menu" tap="toggleDrawer" />
      </android>
      <ios>
        <ActionItem icon="res://ic_menu" ios.position="left" tap="toggleDrawer" />
      </ios>
    </ActionBar>
  </Page.actionBar>
  <sd:RadSideDrawer id="sideDrawer">
    <sd:RadSideDrawer.drawerContent 
      xmlns:Drawer="Views/SideDrawerView">
      <Drawer:SideDrawerView />
    </sd:RadSideDrawer.drawerContent>
  </sd:RadSideDrawer>
  <StackLayout>
    <Label text="{{ sync }}" />
  </StackLayout>
</Page>

Main page codebehind:

import { EventData } from 'data/observable';
import { Page } from 'ui/page';
import { MainViewModel } from '../../ViewModels/MainViewModel';

let frameModule = require("ui/frame");
let view = require("ui/core/view");
let page: Page;

export function pageLoaded(args: EventData) {
    page = <Page>args.object;
    page.bindingContext = new MainViewModel();    
}

export function toggleDrawer () {
    let drawer: any = view.getViewById(page, "sideDrawer");
    drawer.toggleDrawerState();
};

SideDrawer XML:

<StackLayout class="sidedrawer-left" loaded="drawerViewLoaded">
    <StackLayout class="sidedrawer-header">
        <Label text="Hello RadSideDrawer!" class="sidedrawer-header-brand" />
    </StackLayout>
    <StackLayout class="sidedrawer-content">
        <Label text="QrScanner" class="sidedrawer-list-item-text" tap="qrScan" />
        <Label text="New Item" class="sidedrawer-list-item-text" tap="nItem" />
        <Label text="Edit Item" class="sidedrawer-list-item-text" tap="eItem" />
        <Label text="Users" class="sidedrawer-list-item-text" tap="openUsers" />
        <Label text="Map" class="sidedrawer-list-item-text" tap="map" />
    </StackLayout>
</StackLayout>

So, when I actually tap and call toggleDrawer function

export function toggleDrawer () {
    let drawer: any = view.getViewById(page, "sideDrawer");
    drawer.toggleDrawerState();
};

it says drawer is undefined. What could be wrong?

Upvotes: 1

Views: 572

Answers (2)

Xoyce
Xoyce

Reputation: 367

I resolved the issue by declaring custom component inside Page element, instead sd:RadSideDrawer.drawerContent.

<Page 
  xmlns="http://schemas.nativescript.org/tns.xsd" 
  xmlns:sd="nativescript-telerik-ui/sidedrawer" 
  xmlns:Drawer="Views/SideDrawerView" loaded="pageLoaded">

Upvotes: 0

Marek Maszay
Marek Maszay

Reputation: 1547

Try this way :) as you have tap event you can get tap event data inside toggleDrawer and from args get tapped object's page from where you can access sideDrawer controlling or using frameModule's topmost() function

export function toggleDrawer (args: EventData) {
    //this way
    let page = <Page>(<any>args.object).page;
    //or this way
    let page = frameModule.topmost();
    //at last get drawer content at page
    let drawer: any = page.getViewById("sideDrawer");
    drawer.toggleDrawerState();
};

Upvotes: 1

Related Questions