Navigate from data-init event

7 posts, 0 answers
  1. AmrElsayed
    AmrElsayed avatar
    9 posts
    Member since:
    Jul 2012

    Posted 18 Apr 2012 Link to this post

    Hello,

    I am using kendo mobile, and I am trying to navigate to a view in page-init event, but it is not working.
    <!DOCTYPE html>
    <html>
      <head>
        <title></title>   
        <script type="text/javascript" charset="utf-8" src="jquery.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="kendo.mobile.min.js"></script
        <link href="kendo.mobile.all.min.css" rel="stylesheet"/>
      </head>
      <body>
             
            <div data-role="view" id="settings" data-layout="commonLayout" >
                Login
            </div>
             
            <div data-role="view" id="favorites" data-layout="commonLayout" data-init="favoritesPageInit">
                Featured
            </div
             
            <div data-role="layout" data-id="commonLayout">
                <footer data-role="footer">
                    <div data-role="tabstrip">
                        <a href="#favorites" data-icon="favorites">Favorites</a>
                        <a href="#settings" data-icon="settings">Setting</a>
                    </div>
                </footer>
            </div>
             
            <script type="text/javascript" charset="utf-8">
                var app = new kendo.mobile.Application($(document.body), { initial: "settings" }); 
                 
                function favoritesPageInit(e){
                    app.navigate("#settings");
                }
            </script>
      </body>
    </html>
    When I am running the simple code above, click on the 'favorites' icon of the tabstrip, I am expecting to navigate to the 'login' view, but it is not working well.

    Am I missing anything?

    Thanks,
    Amr
  2. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 19 Apr 2012 Link to this post

    Hi,

    Unfortunately, navigation from the init event handler is not possible (as the init event itself happens within the navigation itself). You can use the show event for that purpose.
     
    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!
  3. Kendo UI is VS 2017 Ready
  4. AmrElsayed
    AmrElsayed avatar
    9 posts
    Member since:
    Jul 2012

    Posted 19 Apr 2012 Link to this post

    Thanks Petyo,

    I tried the navigation from the data-show event but it is not working too
    <div data-role="view" id="settings" data-layout="commonLayout" >
                Login
    </div>
             
    <div data-role="view" id="favorites" data-layout="commonLayout" data-show="favoritesPageShow">
                Featured
    </div
             
            <div data-role="layout" data-id="commonLayout">
                <footer data-role="footer">
                    <div data-role="tabstrip">
                        <a href="#favorites" data-icon="favorites">Favorites</a>
                        <a href="#settings" data-icon="settings">Setting</a>
                    </div>
                </footer>
            </div>
             
            <script type="text/javascript" charset="utf-8">
                var app = new kendo.mobile.Application($(document.body), { initial: "settings" }); 
                 
                function favoritesPageShow(e){
                    app.navigate("#settings");
                }
            </script>
    Do you have any suggestions?

    Amr
  5. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 21 Apr 2012 Link to this post

    Hi,

    I am sorry I have mislead you - we had plans for allowing such navigation, but it did not make it in the release. Looking at the implementation, I think we should probably allow the cancelation of the event itself in order to support it. 

    A (not so great) workaround I may suggest is to 'pop' the redirect using setTimeout. See this jsFiddle for details. 

    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!
  6. AmrElsayed
    AmrElsayed avatar
    9 posts
    Member since:
    Jul 2012

    Posted 23 Apr 2012 Link to this post

    Thanks Petyo,

    It seems like that it is working, however, unfortunately, if I have a data-init event attached to the 'settings' view it won't be fired when the app navigates to the view.

    <div data-role="view" id="settings" data-layout="commonLayout" data-init="settingsInit">
            <a href="#favorites">Login</a>
    </div>
      
    <div data-role="view" id="favorites" data-layout="commonLayout" data-show="favoritesPageShow">
        Featured
    </div>
      
    <div data-role="layout" data-id="commonLayout">
        <footer data-role="footer">
            <div data-role="tabstrip">
                <a href="#favorites" data-icon="favorites">Favorites</a>
                <a href="#settings" data-icon="settings">Setting</a>
            </div>
        </footer>
    </div>
    var app = new kendo.mobile.Application($(document.body), { initial: "settings" });
      
    function favoritesPageShow(e){
        setTimeout(function() {
            app.navigate("#settings");
        }, 0);
    }
    function settingsInit(e){
    alert('settings');       
    }


    When I clicked on 'favorites' the settings view is displayed, but the alert('settings') is not prompted.

    Even, if I removed the navigation code, and try to navigate to the settings view simply by clicking on the 'settings' icon in the tabstrip, the init event will not fire too.

    var app = new kendo.mobile.Application($(document.body), { initial: "settings" });
       
    function favoritesPageShow(e){
        //setTimeout(function() {
        //    app.navigate("#settings");
        //}, 0);
    }
    function settingsInit(e){
    alert('settings');      
    }

    Do I miss anything?

    Amr
  7. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 23 Apr 2012 Link to this post

    Hello,

    The init event of the settings view will be fired immediately after the app is loaded, as the settings tab is the initial one. I tried this in this updated jsFiddle

    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. AmrElsayed
    AmrElsayed avatar
    9 posts
    Member since:
    Jul 2012

    Posted 23 Apr 2012 Link to this post

    Hi Petyo,
    I were looking for a code to be run every one the settings view is displayed, I used the data-show event instead of the init.

    Thanks,
    Amr
Back to Top
Kendo UI is VS 2017 Ready