showOverNavigation works only from XML, not from JS

[Marc]

Hi,

today I installed the latest NativeScript (3.0) and the latest version of the Telerik UI for NativeScript 2.0.1.

I read in the changelog, that it is not necessary anymore to define the page with RadSideDrawer as a DrawerPage instance, just to show the Drawer over the ActionBar. We only need to set the showOverNavigation property to true.

I noticed, that everything works as expected, when the property is set directly in the XML. When I do this from javascript, it opens the drawer under the ActionBar for the first time... and when I navigate to another page and go back, then it is opened over the ActionBar as expected.

 

 

Here is what I am doing:

<!-- main-page.xml -->


<drawer:RadSideDrawer id="ffSideDrawer">

      <drawer:RadSideDrawer.mainContent>

          <StackLayout>

              <Label text="First page" />

          </StackLayout>

      </drawer:RadSideDrawer.mainContent>

      <drawer:RadSideDrawer.drawerContent>

          <sidemenu:sidemenu />

      </drawer:RadSideDrawer.drawerContent>

</drawer:RadSideDrawer>

 

<!-- sidemenu.xml -->
<StackLayout backgroundColor="blue">
    <Button text="next page" tap="navigateToSecondPage" />
</StackLayout>

 

// main-page.js
// when page is loaded:

ffSideDrawer = page.getViewById('ffSideDrawer');
ffSideDrawer.setDrawerLocation(drawerModule.SideDrawerLocation.Left);
ffSideDrawer.showOverNavigation = true;

 

Later on, I want to re-use the whole sidedrawer functionality on every page I have in our app, because it contains the main menu that needs to be accessible from every page. So thats why I want to set this property (and the position, the transition,...) only in the one javascript code-behind of my sidemenu and not in the xml in every page.

 

Is it just a bug of the latest RadSideDrawer or does the way I try to init the RadSideDrawer just not work? It seems the showOverNavigation property is set, when the Drawer is already rendered...

I am thankful for any advice.

 

Best regards

[Nick Iliev]

Hi Marc,

I can confirm that setting the property showOverNavigation from your code-behind files is not supported. The reason for that is because logically the SideDrawer contains the Page content and is loading the structural tree of the whole page after its own initialization. The main challenge in front of our developers is to find a way to attach the property and in the same way not to refresh the whole UI runtime. If our developer's team find an acceptible solution we will release this feature but currently, you can only set it via XML.

At this very moment, a partial solution to reuse a common functionality for your drawer on multiple pages is shown here, however, the side-drawer bar still needs to be implemented in each XML layout with showOverNavigation explicitly set there.

Regards,
Nikolay Iliev
Telerik by Progress