Programmatic Navigation?

17 posts, 0 answers
  1. Shawn
    Shawn avatar
    30 posts
    Member since:
    Mar 2011

    Posted 01 Feb 2012 Link to this post

    Maybe I am missing something basic, once I set up the application, i'd like to navigate to a view programatically (e.g. if the user isn't logged in, I want to navigate to the login view). Is this possible?
  2. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 02 Feb 2012 Link to this post

    Hi Shawn,

    It is actually not yet documented, but you can use the application#navigate method to go to a certain view. 

    var app = new kendo.mobile.Application();
    app.navigate("#home");


    Greetings,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Shawn
    Shawn avatar
    30 posts
    Member since:
    Mar 2011

    Posted 02 Feb 2012 Link to this post

    I think I know know why it's undocumented ;) See the image with the error it's throwing. 

  5. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 02 Feb 2012 Link to this post

    Hi,

    My wild guess is that you are calling the navigate method before the application is fully initialized (and the initial view is present). 

    Here is the code I tried:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    </head>
    <body>
        <div data-role="view" data-init="verifyLogin">
            Index
        </div>
     
        <div data-role="view" data-init="verifyLogin" id="login">
            Login
        </div>
     
    <script>
        var app = new kendo.mobile.Application();
     
        function verifyLogin() {
            app.navigate("#login");
        }
    </script>
    </body>
    </html>


    Regards,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Shawn
    Shawn avatar
    30 posts
    Member since:
    Mar 2011

    Posted 02 Feb 2012 Link to this post

    That helps and probably solves it for  me need (since I am using back to get out of login) but is there a way (or, perhaps *there should be a way*) to specify the default view to start the app with?

  7. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 02 Feb 2012 Link to this post

    Hi,

    Thanks for the feedback. By default, the application picks the first view from the DOM of the page. I think that you probably mean to pass the initial view URL in the application constructor, am I correct? Would something like the option below work for your case?

    <script>
    var app = new kendo.mobile.Application(document.body, {initial: "#login" });
    </script>

    We can do that for the v1 release. 

    All the best,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Shawn
    Shawn avatar
    30 posts
    Member since:
    Mar 2011

    Posted 02 Feb 2012 Link to this post

    Yes, though initialView or initialNavigate makes more sense to me. That way I could check during application creation to determine whether to go to login first or the first view and not have to use the callback which feels hacky.
  9. Shawn
    Shawn avatar
    30 posts
    Member since:
    Mar 2011

    Posted 02 Feb 2012 Link to this post

    Just to clarify, this doesn't work right now:

    app.kendoMobileApplication = new kendo.mobile.Application(document.body,
    {
      layout: "landing-layout"
    });
    app.initViewModel();
    app.kendoMobileApplication.bind("viewInit", function (e) {
      var viewName = e.view.element[0].id;
      if (viewName == "tattoos" && !app.theViewModel.hasInitialized) {
        app.kendoMobileApplication.hasInititalized = true;
        if (!app.theViewModel.isAuthenticated) {
          app.kendoMobileApplication.navigate("#login");
        }
      }
    });

    The "viewInit" or "viewShow" events fire and I can test for the view name to see if it has happened...but since I am calling navigate and the navigation seems to not have happened yet on the 'tattoos' view, the back button on the login page goes to a non-existent page. I think you're calling the viewInit and viewShow earlier than the journal (history) is happening. Is this intended?
  10. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 02 Feb 2012 Link to this post

    Hi,

    Your observations are correct. Both events occur before the URL hash is changed, so the back button won't work in this case.  

    An (ugly) workaround is to push the history hash in the event. 

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    </head>
    <body>
        <div data-role="view" id="index">
            Index
        </div>
     
        <div data-role="view" id="login">
            Login
            <a data-role="backbutton">Back</a>
        </div>
     
    <script>
        var loggedIn = false;
        var app = new kendo.mobile.Application(document.body, {
            viewShow: function(e) {
                var viewID = e.view.element.attr("id");
                if (viewID == "index" && !loggedIn) {
                    loggedIn = true;
                    kendo.history.navigate("#index");
                    app.navigate("#login");
                }
            }
        });
     
    </script>
    </body>
    </html>

    Greetings,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. amit
    amit avatar
    7 posts
    Member since:
    Aug 2011

    Posted 07 Mar 2012 Link to this post

    Hi Petyo ,

    I am looking for full login application with DB connectivitiy Can you provide me any sample application please thx
     
  12. Shawn
    Shawn avatar
    30 posts
    Member since:
    Mar 2011

    Posted 17 Mar 2012 Link to this post

    Any word if there is a way to address this by v1?
  13. Shawn
    Shawn avatar
    30 posts
    Member since:
    Mar 2011

    Posted 17 Mar 2012 Link to this post

    Also:

    I am using the data-init functionality (as you mentioned in an earlier post) and it works, but it seems to only work with global functions. Any way to specify a function member of an object?  This doesn't work:

    var vm = {
      verifyAccount: function () {
        //...
      }
    };
    window.vm = vm;

    <div data-role="view" data-layout="landing-layout" id="tattoos" data-init="vm.verifyAccount">

    or

    <div data-role="view" data-layout="landing-layout" id="tattoos" data-init="window.vm.verifyAccount">
  14. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 20 Mar 2012 Link to this post

    Hello Shawn,

    I am glad to confirm both features. The initial view application feature will be available for the final release. The member syntax for event handling you described is already implemented and will be available too. 

    Thanks again for your feedback and beta testing.

    Kind regards,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  15. Jeremy Wiebe
    Jeremy Wiebe avatar
    11 posts
    Member since:
    Jun 2012

    Posted 24 Sep 2012 Link to this post

    I found this thread and was going to start using the viewInit even on the mobile Application object, but it seems to have been removed since this thread started (note that there are _no_ events on the mobile application anymore http://docs.kendoui.com/api/mobile/application).  

    What was the reason for removing it?  I could really use having a central event that would notify me when a view is initializing (instead of using view-init attributes on each view).  
  16. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 25 Sep 2012 Link to this post

    Hi,

    You can use the layout events instead.

    All the best,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  17. Jeremy Wiebe
    Jeremy Wiebe avatar
    11 posts
    Member since:
    Jun 2012

    Posted 25 Sep 2012 Link to this post

    Thanks.  I feel like this might be obvious but how do I get a handle to the layout object to bind to those events?  I'm creating the mobile Application in javascript and specifying the layout using the 'layout' configuration option that is passed to the Application constructor.

    Update: Ok, I found the attributes that can be added to the layout markup for hooking these events (data-init="" data-show="").   Note: it would be nice if you could do this purely in javascript (possibly through a .getLayout() method on the application object).  As it stands I have to add these methods to the global javascript namespace which doesn't feel right.  
  18. Daní
    Daní avatar
    303 posts
    Member since:
    Feb 2008

    Posted 19 Oct 2012 Link to this post

    Hi,

    Does exists in kendoui mobile any feature similar to jQuery Mobile method "loadPage" to prefetch views?

    Thanks.
Back to Top
Kendo UI is VS 2017 Ready