Telekrik SideDrawer issue - Cannot read property ‘showDrawer’ of undefined

plugins

#1

I was implementing Telerik’s SideDrawer component and got a error JS: ERROR TypeError: Cannot read property ‘showDrawer’ of undefined

My XML is ,

<Page xmlns:lv="nativescript-telerik-ui/listview" xmlns:sd="nativescript-telerik-ui/sidedrawer" loaded="pageLoaded" unloaded="pageUnloaded" xmlns="http://www.nativescript.org/tns.xsd" navigatedTo="onNavigatedTo" >
    
    
       <ActionBar title="RadSideDrawer Demo" class="action-bar" >
<ActionItem tap="toggleDrawer" ios.systemIcon="4" android.systemIcon="ic_menu_btn_add" ios.position="left" />
</ActionBar>
    <sd:RadSideDrawer id="sideDrawer" drawerLocation="Left">

        <!-- side drawer content -->
        <sd:RadSideDrawer.drawerContent>
            <StackLayout class="sidedrawer-left">
                <StackLayout class="sidedrawer-header">
                    <Label text="Hello RadSideDrawer!" class="sidedrawer-header-brand" />
                </StackLayout>
                <StackLayout class="sidedrawer-content">
                    <Label text="Home" class="sidedrawer-list-item-text" />
                    <Label text="Basics" class="sidedrawer-list-item-text" />
                    <Label text="Options" class="sidedrawer-list-item-text" />
                    <Label text="Help" class="sidedrawer-list-item-text" />
                    <Label text="Advanced" class="sidedrawer-list-item-text" />
                </StackLayout>
            </StackLayout>
        </sd:RadSideDrawer.drawerContent>

        <!-- The main content -->
        

    </sd:RadSideDrawer>

and javascript file is

var view = require("ui/core/view");
var drawer="";
exports.toggleDrawer = function() {
    
    drawer.showDrawer();
};
exports.onNavigatedTo = function() {
    drawer = view.getViewById(page, "sideDrawer");
};

Using Latest version tns-android,tns-core-mocules,telekriki-ui…
What am I missing? Any help will be appreciated…


#2

Hi @DeepakG,

You had a few minor syntactical issues in your code sample, mostly noticeably in your main-page.js file. You need to get a reference to the Page before using it, so the code should look something like this.

var drawer;

exports.toggleDrawer = function () {
  drawer.showDrawer();
};
exports.onNavigatedTo = function (args) {
  var page = args.object;
  drawer = page.getViewById("sideDrawer");
};

I put together a functioning version of this in NativeScript Playground so you can take a look: https://play.nativescript.org/?id=5X20MHXE7003uy6DuxE6E


#3

Thanks tjvan ,it solved my problem