App-level SideDrawer

[Marc]

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

[Victor]

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

[Marc]

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

 

 

[Shlomi]

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

[Nick Iliev]

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

[Marc]

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

[Stephen]

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

[Nick Iliev]

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

[Stephen]

Nikolay, thank you for the reply and the link! 

[Imran]

Hi, can you please illustrate this methodology with an example? I am trying to build the exact same thing but no success so far.

[Nick Iliev]

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

[Navya]

how to connect to all other pages ? can you please explain? or any eg ?

[Nick Iliev]

Hi Navya,

As far as I understand, you are asking about how to share single side drawer code base within multiple pages.
One possible solution in Angular based projects is to use router-outlet for the drawer main content and navigate through nsRouterLink.
A detailed example can be found here (the example is updated version of this one). Another option would be simply to reuse the drawer on each page you want to have a drawer.

Regards,
Nikolay Iliev
Progress Telerik

[Navya]

i am using two router .one in app.component.ts for displaying login page..after login navigates to dashboard component.there i create a side drawer and make a <router-outlet>,but i only get side drawer on that page not other pages that navigates from the side drawer

[Navya]

i solve the issue..by making children route path..thank you