Month: February 2017

/***********************************************

UPDATE

There is now a new way for scrolling to the top of the page in Telerik, and it does NOT require you to set the Kendo application to have native scrolling enabled!

The function call for doing this is:

kendo.mobile.application.scroller().reset();

Calling this function will scroll the screen to the top. And it does not require you to have to set useNativeScrolling: true as well.

In fact, I would recommend the above solution BEFORE trying the solution below, as I have had issues with the below solution (the application would lock-up the scrolling, so the user could not even scroll the window at all, ie with a finger swipe).

Hope this helps!

Jeff

***********************************************/

Hi there!

The other day I needed to find a way to scroll to the top of the page in Telerik (after pressing a button). I tried a standard javascript function call to do this – namely, window.scrollTo(0, 0), but this didn’t work for me right away. I had to set the Kendo application object to have native scrolling enabled in order to get this function to work.

To do this, find in your code where you have declared the kendo.mobile.Application object, and modify its initialization properties to have useNativeScrolling: true. In my code (generated by Telerik), this is found in the app.js file:

app.js

var bootstrap = function() {
        $(function() {
            app.mobileApp = new kendo.mobile.Application(document.body, {
                transition: 'slide',
                skin: 'nova',
                initial: 'components/home/view.html',
                useNativeScrolling: true
            });

            kendo.bind($('.navigation-link-text'), app.navigation.viewModel);
        });
    };

By default, the useNativeScrolling: true line is not included, so you have to add that in. Once that line is added, you can now use window.scrollTo(0, 0) or other javascript/jquery scroll functions in your code!

By the way, if you do not want to use native scrolling, you may want to consider using the Kendo Mobile ‘scroller’ object instead. I found myself that this would not work for me, but it might work for you. You can find out more information about it from here – http://docs.telerik.com/kendo-ui/api/javascript/mobile/ui/scroller. Also, if you want extra Kendo tips, as well as more info about the differences/advantages of native scrolling (vs Telerik scrolling) you can visit this link here – http://developer.telerik.com/featured/20-kendo-ui-mobile-telerik-appbuilder-tips-tricks/.

Hope this helps!

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!