Multiple RadSideDrawers in one page/directive?

2 posts, 0 answers
  1. Bubble
    Bubble avatar
    3 posts
    Member since:
    Oct 2016

    Posted 03 Oct Link to this post

    Hello,

    I am using {N} + Angular2. I have already working 1 RadSideDrawer(Navigation), now i am in need of second one.

    Basicly there are 2 buttons in ActionBar: 1) Navigation 2) Search. I need to open each RadSideDrawer by clicking on the individual button.

     

    Current code( Only navigation RadSideDrawer works ):

     35 export class Header extends Observable implements OnInit {
     36   public currentUserId: BehaviorSubject<string> = new BehaviorSubject("0");
     37   @Output() toggleSearch = new EventEmitter();
     38 
     39   constructor(private _changeDetectionRef: ChangeDetectorRef, private ngZone: NgZone, private photoService: PhotoService, private _router: Router) {
     40     super();
     41     this.ngZone.run(() => {
     42       firebase.getCurrentUser().then((data) => {
     43         this.currentUserId.next(data.uid);
     44       });
     45     });
     46   }
     47 
     48   @ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent;
     49   private drawer: SideDrawerType;
     50   private search: SideDrawerType;
     51 
     52   ngAfterViewInit() {
     53     this.drawer = this.drawerComponent.sideDrawer;
     54     this.search = this.drawerComponent.sideDrawer;
     55     this._changeDetectionRef.detectChanges();
     56   }
     57 
     58   ngOnInit() {
     59     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"
     60         + " has a default transition and position and also exposes notifications related to changes in its state. Swipe from left to open side drawer.");
     61 
     62   }
     63 
     64   public openDrawer() {
     65     this.drawer.showDrawer();
     66   }
     67 
     68   public openSearch() {
     69     this.search.showDrawer();
     70   }

     

     

      1 <RadSideDrawerSearch #search>
      2     <StackLayout tkDrawerContent class="sideStackLayout">
      3         <StackLayout class="sideStackLayout">
      4             <Label text="Dashboard" [nsRouterLink]="['/dashboard']" class="sideLabel"></Label>
      5         </StackLayout>
      6     </StackLayout>
      7     <StackLayout tkMainContent>
      8     </StackLayout>
      9 </RadSideDrawerSearch>
     10 
     11 <RadSideDrawer #drawer>
     12     <StackLayout tkDrawerContent class="sideStackLayout">
     13         <StackLayout class="sideStackLayout">
     14             <Label text="Dashboard" [nsRouterLink]="['/dashboard']" class="sideLabel"></Label>
     15             <Label text="My profile" [nsRouterLink]="['/profile', currentUserId.getValue()]" class="sideLabel"></Label>
     16             <Label text="Take a Picture" (tap)="takePicture()" class="sideLabel"></Label>
     17             <Label text="Take a Video" (tap)="takeVideo()" class="sideLabel"></Label>
     18             <Label text="Jobs" [nsRouterLink]="['/jobs']" class="sideLabel"></Label>
     19         </StackLayout>
     20     </StackLayout>
     21     <StackLayout tkMainContent>
     22         <ActionBar  title="" class="actionbar-designed">
     23           <android>
     24             <GridLayout horizontalAlignment="center" verticalAlignment="center">
     25                 <Image src="res://avatar" horizontalAlignment="left" class="profile-avatar" [nsRouterLink]="['/profile', currentUserId.getValue()]"></Image>
     26                 <Label horizontalAlignment="left" class="message-bubble" text="4"></Label>
     27 
     28                 <GridLayout columns="auto, auto" horizontalAlignment="center" (tap)="openDrawer()">
     29                   <Label class="section-name" text="Dashboard"></Label>
     30                   <Label col="1" class="fa arrow-down" text="&#xf107;"></Label>
     31                 </GridLayout>
     32 
     33                 <Label horizontalAlignment="right" minWidth="35" class="fa search" (tap)="openSearch()" text="&#xf002;"></Label>
     34             </GridLayout>
     35           </android>
     36         </ActionBar>
     37         <ng-content></ng-content>
     38     </StackLayout>
     39 </RadSideDrawer>

     

     

     

    How can i make this work?

  2. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    66 posts

    Posted 03 Oct Link to this post

    Hello,

    Thank you for your interest in NativeScript.

    At the moment the `nativescript-telerik-ui` plugin supports only one SideDrawer per Page.This feature will be planned in some of the next plugin versions. You could keep track on the new features updates and fixes in our Release notes section.  We also have dedicated "What's new" blog article which can be found hereRegarding to that you could also add new feature request in the nativescript-ui-sample repo, where the other people could vote for this functionality.

    I hope this information helps


    Regards,
    nikolay.tsonev
    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