Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Programmatic Navigation?

16 Answers 1336 Views
Application
This is a migrated thread and some comments may be shown as answers.
Shawn
Top achievements
Rank 1
Shawn asked on 02 Feb 2012, 02:02 AM
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?

16 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 02 Feb 2012, 09:24 AM
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!
0
Shawn
Top achievements
Rank 1
answered on 02 Feb 2012, 01:12 PM
2-2-2012-7-10-38-AM.png
I think I know know why it's undocumented ;) See the image with the error it's throwing. 

0
Petyo
Telerik team
answered on 02 Feb 2012, 01:30 PM
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!
0
Shawn
Top achievements
Rank 1
answered on 02 Feb 2012, 02:27 PM
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?

0
Petyo
Telerik team
answered on 02 Feb 2012, 02:47 PM
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!
0
Shawn
Top achievements
Rank 1
answered on 02 Feb 2012, 02:51 PM
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.
0
Shawn
Top achievements
Rank 1
answered on 02 Feb 2012, 02:56 PM
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?
0
Petyo
Telerik team
answered on 02 Feb 2012, 03:34 PM
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!
0
amit
Top achievements
Rank 1
answered on 07 Mar 2012, 10:58 PM
Hi Petyo ,

I am looking for full login application with DB connectivitiy Can you provide me any sample application please thx
 
0
Shawn
Top achievements
Rank 1
answered on 17 Mar 2012, 10:57 PM
Any word if there is a way to address this by v1?
0
Shawn
Top achievements
Rank 1
answered on 17 Mar 2012, 11:38 PM
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">
0
Petyo
Telerik team
answered on 20 Mar 2012, 08:34 AM
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!
0
Jeremy Wiebe
Top achievements
Rank 1
answered on 24 Sep 2012, 05:06 PM
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).  
0
Petyo
Telerik team
answered on 25 Sep 2012, 07:35 AM
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!
0
Jeremy Wiebe
Top achievements
Rank 1
answered on 25 Sep 2012, 02:24 PM
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.  
0
Daní
Top achievements
Rank 1
answered on 19 Oct 2012, 11:25 AM
Hi,

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

Thanks.
Tags
Application
Asked by
Shawn
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Shawn
Top achievements
Rank 1
amit
Top achievements
Rank 1
Jeremy Wiebe
Top achievements
Rank 1
Daní
Top achievements
Rank 1
Share this question
or