[Solved] SideDrawer below the action bar

[Austin]

Hello there, I am trying to add a SideDrawer that opens below the ActionBar, declaring a normal Page and adding the SideDrawer as its child but seems like I am doing something wrong, this is my xml code:

<Page xmlns:navigation="navigation/example-drawer-page" navigatingTo="onNavigatingTo"
    xmlns:drawer="nativescript-telerik-ui-pro/sidedrawer"
    xmlns:lv="nativescript-telerik-ui-pro/listview"
    xmlns="http://www.nativescript.org/tns.xsd">
    <ActionBar title="Dashboard">
        <NavigationButton visibility="collapsed"/>
        <android>
            <NavigationButton icon="res://ic_menu" tap="openMainMenu" />
        </android>
        <ios>
            <ActionItem icon="res://ic_menu" ios.position="left" tap="openMainMenu" />
        </ios>
        <ActionItem ios.systemIcon="13" android.systemIcon="ic_menu_refresh" ios.position="right"></ActionItem>
    </ActionBar>

    <drawer:RadSideDrawer id="mainMenuDrawer" gesturesEnabled="true" drawerContentSize="300">
        <drawer:RadSideDrawer.drawerContent>
            <StackLayout cssClass="drawerContent">
                <StackLayout cssClass="headerContent">
                    <Label text="Main Menu"/>
                </StackLayout>
                <ScrollView>
                    <StackLayout cssClass="drawerMenuContent">
                        <Label text="Logout" tap="onLogoutTap" cssClass="drawerSectionItem" />
                    </StackLayout>
                </ScrollView>
            </StackLayout>
        </drawer:RadSideDrawer.drawerContent>
    </drawer:RadSideDrawer>

    <GridLayout rows="50 *" columns="*">
        <StackLayout row="0" col="0">
            <Label text="First View" textWrap="true" />
        </StackLayout>
        <lv:RadListView items="{{ dataItems }}" row="1">
            <lv:RadListView.listViewLayout>
                <lv:ListViewLinearLayout scrollDirection="Vertical"/>
            </lv:RadListView.listViewLayout>
            <lv:RadListView.itemTemplate>
                <StackLayout orientation="vertical">
                    <Label fontSize="20" text="{{ itemName }}"/>
                    <Label fontSize="14" text="{{ itemDescription }}"/>
                </StackLayout>
            </lv:RadListView.itemTemplate>
        </lv:RadListView>
    </GridLayout>
</Page>

 

When I get the Drawer in my js file like this:

exports.openMainMenu = function(args) {
    var mainMenuDrawer = page.getViewById("mainMenuDrawer");
    mainMenuDrawer.toggleDrawerState();
}

I get an exception 'toggleDrawerstate' of undefined. Seems like is not finding the Drawer in the page.

Am I missing something?

Thanks!

[Deyan]

Hi Austin,

Please take a look at the Getting started article for RadSideDrawer on our online documentation website:

http://docs.telerik.com/devtools/nativescript-ui/Controls/NativeScript/SideDrawer/getting-started

Let me know if you need further assistance with that.

Regards,
Deyan
Telerik by Progress

[Victor]

Hello Austin,

Also you can try putting the drawer inside your grid since Page expects only one root element.

Regards,
Victor
Telerik by Progress

[Austin]

Hello guys, I have been working 3 hours on the example in the Getting started article and at this point I give up, there is no way I can reproduce this example in my app. Seems like I am missing something in my XML declaration of my dashboard page, it looks like this:

<navigation:DashboardPage xmlns:navigation="pages/dashboard/dashboard" navigatingTo="onNavigatingTo"
    xmlns:dpg="nativescript-telerik-ui-pro/sidedrawer/drawerpage"
    xmlns:drawer="nativescript-telerik-ui-pro/sidedrawer"
    xmlns:lv="nativescript-telerik-ui-pro/listview"
    xmlns="http://www.nativescript.org/tns.xsd">

    <navigation.actionBar>
        <ActionBar title="Dashboard">
            <NavigationButton visibility="collapsed"/>
            <android>
                <NavigationButton icon="res://ic_menu" tap="openMainMenu" />
            </android>
            <ios>
                <ActionItem icon="res://ic_menu" ios.position="left" tap="openMainMenu" />
            </ios>
            <ActionItem ios.systemIcon="13" android.systemIcon="ic_menu_refresh" ios.position="right"></ActionItem>
        </ActionBar>
    </navigation.actionBar>

    <!-- >> sidedrawer-over-navigation-drawer -->
    <dpg:DrawerPage.sideDrawer>
        <drawer:RadSideDrawer id="mainMenuDrawer" gesturesEnabled="true" drawerContentSize="300">
            <drawer:RadSideDrawer.drawerContent>
                <ListView class="list" items="{{ menuItems }}" itemTap="menuItemTap">
                    <ListView.itemTemplate>
                        <GridLayout cssClass="list-item" columns="auto, *">
                            <Label class="fa" text="{{'fa-bars' | fonticon}}" />
                            <Label class="" col="1" text="{{ title }}" textWrap="true" />
                        </GridLayout>
                    </ListView.itemTemplate>
                </ListView>
            </drawer:RadSideDrawer.drawerContent>
        </drawer:RadSideDrawer>
    </dpg:DrawerPage.sideDrawer>
    <!-- << sidedrawer-over-navigation-drawer -->

    <GridLayout rows="50 *" columns="*">
        <StackLayout row="0" col="0">
            <Label text="First View" textWrap="true" />
        </StackLayout>
        <lv:RadListView items="{{ dataItems }}" row="1">
            <lv:RadListView.listViewLayout>
                <lv:ListViewLinearLayout scrollDirection="Vertical"/>
            </lv:RadListView.listViewLayout>
            <lv:RadListView.itemTemplate>
                <StackLayout orientation="vertical">
                    <Label fontSize="20" text="{{ itemName }}"/>
                    <Label fontSize="14" text="{{ itemDescription }}"/>
                    <Label text="{{'fa-bars' | fonticon}}" class="fa" />
                </StackLayout>
            </lv:RadListView.itemTemplate>
        </lv:RadListView>
    </GridLayout>
</navigation:DashboardPage>
<!-- << sidedrawer-over-navigation -->

My dashboard module is in app/pages/dashboard/

Inside that folder, I have the js and xml files.

I have tried every possible combination to make it work, but no luck, I hope you can help me.

 

Thanks!

 

[Victor]

Hello Austin,

Thanks for writing.
The problem is that you are using DashboardPage and then setting our dpg:DrawerPage.sideDrawer property to your DashboardPage. This can never work because DashboardPage does not have a sideDrawer property unless it inherits from dpg:DrawerPage.

To show the drawer below the navigation bar you have to put the drawer as the only child of your page and then set your grid as the main content of the drawer. For example:

<navigation:DashboardPage xmlns:navigation="pages/dashboard/dashboard" navigatingTo="onNavigatingTo"
    xmlns:dpg="nativescript-telerik-ui-pro/sidedrawer/drawerpage"
    xmlns:drawer="nativescript-telerik-ui-pro/sidedrawer"
    xmlns:lv="nativescript-telerik-ui-pro/listview"
    xmlns="http://www.nativescript.org/tns.xsd">

    <navigation.actionBar>
        <ActionBar title="Dashboard">
            <NavigationButton visibility="collapsed"/>
            <android>
                <NavigationButton icon="res://ic_menu" tap="openMainMenu" />
            </android>
            <ios>
                <ActionItem icon="res://ic_menu" ios.position="left" tap="openMainMenu" />
            </ios>
            <ActionItem ios.systemIcon="13" android.systemIcon="ic_menu_refresh" ios.position="right"></ActionItem>
        </ActionBar>
    </navigation.actionBar>

    <drawer:RadSideDrawer id="mainMenuDrawer" gesturesEnabled="true" drawerContentSize="300">
            <drawer:RadSideDrawer.drawerContent>
                <ListView class="list" items="{{ menuItems }}" itemTap="menuItemTap">
                    <ListView.itemTemplate>
                        <GridLayout cssClass="list-item" columns="auto, *">
                            <Label class="fa" text="{{'fa-bars' | fonticon}}" />
                            <Label class="" col="1" text="{{ title }}" textWrap="true" />
                        </GridLayout>
                    </ListView.itemTemplate>
                </ListView>
            </drawer:RadSideDrawer.drawerContent>

            <drawer:RadSideDrawer.mainContent>
                <GridLayout rows="50 *" columns="*">
                    <StackLayout row="0" col="0">
                        <Label text="First View" textWrap="true" />
                    </StackLayout>
                    <lv:RadListView items="{{ dataItems }}" row="1">
                        <lv:RadListView.listViewLayout>
                            <lv:ListViewLinearLayout scrollDirection="Vertical"/>
                        </lv:RadListView.listViewLayout>
                        <lv:RadListView.itemTemplate>
                            <StackLayout orientation="vertical">
                                <Label fontSize="20" text="{{ itemName }}"/>
                                <Label fontSize="14" text="{{ itemDescription }}"/>
                                <Label text="{{'fa-bars' | fonticon}}" class="fa" />
                            </StackLayout>
                        </lv:RadListView.itemTemplate>
                    </lv:RadListView>
                </GridLayout>
            </drawer:RadSideDrawer.mainContent>
        </drawer:RadSideDrawer>
</navigation:DashboardPage>

Regards,
Victor
Telerik by Progress