App-level SideDrawer

11 posts, 0 answers
  1. Marc
    Marc avatar
    84 posts
    Member since:
    Oct 2013

    Posted 27 Jul 2016 Link to this post

    Hi,

    the RadSideDrawer implementation seems to be a page-level action so far.

    We have many different pages in our app and there should be one global main menu within a RadSideDrawer, but we try to prevent defining the drawer in every single xml-file. We have already outsourced the drawerContent in a separate xml-definition.

    Will it be possible some day to define one global RadSideDrawer and to include it the app globally?

     

    Best regards

  2. Victor
    Admin
    Victor avatar
    1358 posts

    Posted 28 Jul 2016 Link to this post

    Hello Marc,

    Thanks for the question.
    We are aware that there should be a capability for an app-level side drawer however we have not planned it yet. Is this critical for you? The drawer content sharing should do the trick even though you will have a little boiler-plate drawer xml on each of your pages. If this is critical for you we will elevate it's priority.

    Please write again if you have more questions.

    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
  3. Marc
    Marc avatar
    84 posts
    Member since:
    Oct 2013

    Posted 28 Jul 2016 in reply to Victor Link to this post

    Hello Victor,

    thank you for your fast response.

    "Critical" is maybe not the right word. Let's say it would be nice to have. If this feature was already planned, then I would wait for the next update before before including the RadSideDrawer into every single XML-page definition and then removing it from all the pages again because of the new app-level drawer, as we (will) have many pages in our app. That's why I asked for the status ;)

     

    Best regards

     

     

  4. Shlomi
    Shlomi avatar
    1 posts
    Member since:
    May 2016

    Posted 07 Aug 2016 Link to this post

    Perhaps I'm completely out here...

    But with Angular 2 I can put the drawer in the root component's template and in the main set a page-router-outlet.

     

    This should be an app-level style drawer, unless the outlet won't work for some reason

  5. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    295 posts

    Posted 08 Aug 2016 Link to this post

    Hello Shlomi Assaf,

    You are absolutely right - you can use NativeScript + Angular-2 and use <page-router-outlet> to set it.
    I think Mark Geller was referring to the NativeScript core functionality where the applicable option at this moment is to create your RadSideDrawer and reuse it on each page with a boilerplate drawer xml.

    Regards, 
    Nikolay Iliev
    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
  6. Marc
    Marc avatar
    84 posts
    Member since:
    Oct 2013

    Posted 08 Aug 2016 in reply to Nikolay Iliev Link to this post

    Hi Nikolay and Shlomi,

    I did not know that, thank you. We consider to build our app with angular 2 in the future, anyway. So this would bethe best solution for us, I guess.

    Best regards

  7. Stephen
    Stephen avatar
    2 posts
    Member since:
    May 2016

    Posted 05 Jun in reply to Nikolay Iliev Link to this post

    I'm currently developing an app with Nativescript and Angular and cannot figure out how I would programmatically open the menu from a component inside of <page-router-outlet>. I have looked for an example to no avail. Can you give me an idea how I would do so, or is there a github repo for an example?

     

    Thanks Steve

  8. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    295 posts

    Posted 06 Jun Link to this post

    Hi Steve,

    What you need to do is get a reference to your side-drawer in your component class and the use showDrawer method. An example of programmatically opening and closing a side drawer can be found here. In the linked example the reference is taken via ViewChild directive In the same application many other possibilities are shown for working with side drawer via the code-behind files.

    Regards,
    Nikolay Iliev
    Progress Telerik
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  9. Stephen
    Stephen avatar
    2 posts
    Member since:
    May 2016

    Posted 06 Jun Link to this post

    Nikolay, thank you for the reply and the link! 
  10. Imran
    Imran avatar
    1 posts
    Member since:
    Sep 2017

    Posted 25 Sep in reply to Shlomi Link to this post

    Hi, can you please illustrate this methodology with an example? I am trying to build the exact same thing but no success so far.
  11. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    295 posts

    Posted 26 Sep Link to this post

    Hello Marc,

    The requested sample is already available in this demonstration application.

    The application uses page-router-outlet in its app.component.ts file.
    The example demonstrating how to use the SideDrawer events can be found here.
    What is happening is that we are getting a reference to the SideDrawer. In this example, we are using the exposed RadSideDrawerComponent but you can achieve the same by using Angular id and ElementRef.

    Example for using Angular id:
    // getting reference by using Angular id
    @ViewChild("myDrawer') public drawerComponent: ElementRef;
    and in the HTML file the id is assigned as follows:
    <RadSideDrawer #myDrawer >

    Then we are getting a reference to the NativeScript drawer control after Angular is loaded (ngAfterViewInit)
    At this point, we can already use the closeDrawer and openDrawer methods as shown here.

    I hope this information will help you get through - Let me know if you need further assistance on the matter with programmatically opening and closing the drawer.

    Regards,
    Nikolay Iliev
    Progress Telerik
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
Back to Top