Nativescript -Open SideDrawer on button click

Question

I am using telerik ui for native script. I need a toggle button at top to open the side menu. but I am not able to call the Showdrawer() as per the docs. What I need is on button click side menu should open. I tried calling RadSideDrawer.prototype.showDrawer(), but failed. Is there any other side menu available for Nativescript?

main-page.xml

<Page xmlns="http://www.nativescript.org/tns.xsd" xmlns:drawer="nativescript-telerik-ui/sidedrawer" loaded="pageLoaded">
    <Page.actionBar>
        <ActionBar>
            <android>
                <NavigationButton text="Go Back" android.systemIcon="ic_menu_moreoverflow" tap="showSideDrawer" />
            </android>
        </ActionBar>
    </Page.actionBar>
    <drawer:RadSideDrawer>
        <drawer:RadSideDrawer.mainContent>
            <StackLayout>
                <Label text="{{ mainContentText }}" textWrap="true" />
            </StackLayout>
        </drawer:RadSideDrawer.mainContent>
        <drawer:RadSideDrawer.drawerContent>
            <StackLayout cssClass="drawerContent" style="background-color:white;">
                <StackLayout cssClass="headerContent">
                    <Label text="Header" />
                </StackLayout>
                <StackLayout cssClass="drawerMenuContent">
                    <Label text="Item 1" style="color:black;" />
                    <Label text="Item 2" style="color:black;" />
                    <Label text="Item 3" style="color:black;" />
                    <Label text="Item 4" style="color:black;" />
                </StackLayout>
            </StackLayout>
        </drawer:RadSideDrawer.drawerContent>
    </drawer:RadSideDrawer>
</Page>

getting-started-model.js

var observableModule = require("data/observable");
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.");

    }
    return GettingStartedViewModel;
})(observableModule.Observable);
exports.GettingStartedViewModel = GettingStartedViewModel;
function showSideDrawer(args) {
    console.log("Show SideDrawer tapped.");
    // Show sidedrawer ...
   _super.prototype.showDrawer.call(this);

}
exports.showSideDrawer = showSideDrawer;

main page.js

var viewModelModule = require("./getting-started-model");
function pageLoaded(args) {
    console.log("Page loaded");
    var page = args.object;
    page.bindingContext = new viewModelModule.GettingStartedViewModel();
}
exports.pageLoaded = pageLoaded;

Vladimir Amiorkov · Accepted Answer · 2016-05-08 10:09:19Z

2

You can take a look at this SDK examples that show the main functionality of the RadSideDrawer. As mentioned by @R Pelzer all you need to do is get the instance of the RadSideDrawer for example by using its id:

import drawerModule = require("nativescript-telerik-ui-pro/sidedrawer");
import frameModule = require("ui/frame");

var sideDrawer: drawerModule.RadSideDrawer = <drawerModule.RadSideDrawer>(frameModule.topmost().getViewById("sideDrawer"));

and call its showDrawer() method:

sideDrawer.showDrawer();

answered May 8, 2016 at 10:09

Vladimir Amiorkov

2,9514 gold badges22 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Nithin C Over a year ago

am not using the pro version and i dont know if am right import works with typescript and am using javascript.anyhow this answer seems to be the way but as a beginner debugging errors seems to be trouble for me.tried your code and 'require' error comes along my way.

Vladimir Amiorkov Over a year ago

Hi, If the require() is giving you errors make sure all of the required js libraries are present in the {N} application. More info could be found here. About the pro version, when using the non pro version simply change the require to require("nativescript-telerik-ui/sidedrawer")

Nithin C Over a year ago

when calling sideDrawer.showDrawer(); it says show drawer is not a fuction.when i tried sideDrawer.RadSideDrawer.prototype.showDrawer(); no errors occur but nothing happens.

Vladimir Amiorkov Over a year ago

@NithinC It looks like you are not retrieving the instance of the SideDrawer, meaning its is undefined. Can you try to retrieve a different element via the frameModule.topmost().getViewById(--element id--). Calling the getViewById should retrieve the correct element if such element exists in the page.

R Pelzer · Accepted Answer · 2016-05-06 11:12:43Z

1

Are you calling the showSideDrawer function from code you didn't post? Are you sure you linked the tap button?

<Button tap="showSideDrawer" text="ToggleDrawer"/>

Maybe you can try to give the sideDrawer an Id and use this code.

var drawer = frameModule.topmost().getViewById("sideDrawer");
drawer.showDrawer();

answered May 6, 2016 at 11:12

R Pelzer

1,2881 gold badge16 silver badges34 bronze badges

3 Comments

Nithin C Over a year ago

am using - docs.telerik.com/devtools/nativescript-ui/Controls/NativeScript/….

R Pelzer Over a year ago

In main-page.js you require("./getting-started-model") and your page is named as main-page-model. This can cause the fault?

Nithin C Over a year ago

Sorry,that was a typo.that isn't the problem it seems

Osei Fortune · Accepted Answer · 2016-05-09 13:30:59Z

1

You are getting undefined because no id was assigned to the drawer so to fix your problem assign an id to the sideDrawer <drawer:RadSideDrawer id="sideDrawer"> then you can call

var frame = require('ui/frame');
var drawer = frame.topmost().getViewById("sideDrawer");

function showSideDrawer(){
drawer.showDrawer();  // i prefer using .toggleDrawerState();
};

answered May 9, 2016 at 13:30

Osei Fortune

8316 silver badges12 bronze badges

Comments

Harsh vardhan · Accepted Answer · 2018-04-09 07:50:24Z

0

In my case, I missed inserting , as a result, there was a missing component when toggleDrawer was being called hence the error "TypeError: Cannot read property 'toggleDrawerState' of undefined".

Try inserting all the body component of the xml file in this might solve the issue.

Happy coding :))

answered Apr 9, 2018 at 7:50

Harsh vardhan

1

Collectives™ on Stack Overflow

Nativescript -Open SideDrawer on button click

4 Answers 4

4 Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related