This is a migrated thread and some comments may be shown as answers.

SideDrawer below the action bar

4 Answers 210 Views
SideDrawer
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Austin
Top achievements
Rank 1
Austin asked on 30 Aug 2016, 05:42 PM

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"
    <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!

4 Answers, 1 is accepted

Sort by
0
Deyan
Telerik team
answered on 31 Aug 2016, 07:04 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Victor
Telerik team
answered on 31 Aug 2016, 07:35 AM
Hello Austin,

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

Regards,
Victor
Telerik by Progress
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Austin
Top achievements
Rank 1
answered on 31 Aug 2016, 02:34 PM

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"
 
    <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!

 

0
Victor
Telerik team
answered on 01 Sep 2016, 10:41 AM
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"
  
    <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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
SideDrawer
Asked by
Austin
Top achievements
Rank 1
Answers by
Deyan
Telerik team
Victor
Telerik team
Austin
Top achievements
Rank 1
Share this question
or