SideDrawer below the action bar

5 posts, 0 answers
  1. Austin
    Austin avatar
    17 posts
    Member since:
    Oct 2008

    Posted 30 Aug Link to this post

    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!

  2. Deyan
    Admin
    Deyan avatar
    2037 posts

    Posted 31 Aug Link to this post

    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
  3. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 31 Aug Link to this post

    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
  4. Austin
    Austin avatar
    17 posts
    Member since:
    Oct 2008

    Posted 31 Aug Link to this post

    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!

     

  5. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 01 Sep Link to this post

    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
Back to Top