Hi there!
A new lesson in coding I had to learn the other day – I was working with Telerik – Appbuilder, and I wanted to be able to add the navigation to a view (the bottom menu) but at the same time did NOT want to add the current view to the navigation. With the Telerik UI, you can add the navigation to a view, but it always requires that the current view also be included in it.
So, I found a way to add the navigation, without adding the current view to it! The below code does it, and works as follows:
1) First, you will need to figure out the id of the current view. Open the view.html file of the view you want to add the navigation to, and look at the very top line. It will look something like this:
view.html
<div data-role="view" data-title="View" data-layout="main-nonav" data-model="app.myView" data-show="app.myView.onShow" data-after-show="app.myView.afterShow" data-reload="true" id="myViewScreen" class="screen">
If you look carefully, you will see the id of this view is myViewScreen.
Also note that in this view, you can see that the data-layout attribute is set to main-nonav. As you could imagine, this means the view is configured to have no navigation! To fix this, the below code does this, and is as follows:
view.html
<!-- START_CUSTOM_CODE_myView -->
<!-- Add custom code here. For more information about custom code, see http://docs.telerik.com/platform/screenbuilder/troubleshooting/how-to-keep-custom-code-changes -->
<script>
// enable navigation
$('#myViewScreen').attr("data-layout", "main");
</script>
.... (rest of HTML/code for view)
This little chunk of code simply changes the attribute value of the view (the attribute being ‘data-layout’) to ‘main’. And now that the view has this value for the ‘data-layout’ attribute, it will now have the navigation in it!
NOTE: One big thing to note as well about the above code – you may be tempted to simply change the ‘data-layout’ attribute in the very first line of view.html to ‘main’. YOU DO NOT WANT TO DO THIS! And the reason you do not want to do this is because, the first line of code is Telerik-generated. This means, once you make changes to the views (ie add a new view, or change a view title), it will erase the data-layout=”main” change, and you will no longer have the desired functionality.
Hope this helps!
PS. Also, although I haven’t tried it, I could imagine you could disable the nav from a view, for a view that you want to include in the navigation. In other words, you want the current view to be in the nav bar, but you don’t want the nav bar to show in the current view.
If this is what you want to do, you could imagine it would be similar to the above. Simply find the id (as discussed above) of the view, and with it, add the following code to view.html:
view.html
<!-- START_CUSTOM_CODE_myView -->
<!-- Add custom code here. For more information about custom code, see http://docs.telerik.com/platform/screenbuilder/troubleshooting/how-to-keep-custom-code-changes -->
<script>
// disable navigation
$('#myViewScreen').attr("data-layout", "main-nonav");
</script>
.... (rest of HTML/code for view)
As you can see, this will change the ‘data-layout’ attribute value from “main” (which it should already be) to “main-nonav”. By doing this, it should remove the nav from the current view.
Again, hope this helps 😉
Happy coding everyone!