BUG: data-reload="true" causes tabstrip gone while loading

10 posts, 0 answers
  1. Irina
    Irina avatar
    13 posts
    Member since:
    Mar 2014

    Posted 08 Mar 2014 Link to this post

    Hi, guys.

    This framework is awesome... like a native app! but i have a problem that subtracts points to my user experience.

    The problem is about navigating to a remote view for second time, where the view has the data-reload=true attribute.

    This problem wont happen when data-reload is set to false. But if i set it to false the data in the remote view wont update.

    When i go to the remote view with data-reload=true for the first time no flicker appears and work perfect!... only for second time and the times after that (header and tabstript footer dissapear)

    please advise to fix it...

  2. Irina
    Irina avatar
    13 posts
    Member since:
    Mar 2014

    Posted 08 Mar 2014 in reply to Irina Link to this post

    Video with issue is here:
    http://www.youtube.com/watch?v=pkLt8hHJFPQ&hd=1

    And same issue if i add a tabstrip to your Music Application example:
    http://www.youtube.com/watch?v=npZvLaq2WK4

    And another thread with same problem...

    You can try the Application example... add a tabstrip and add data-reload="true" to music-store.html and play-music.html and try it please...

    <div data-role="layout" data-id="mobile-tabstrip" >
        <header data-role="header">
            <div data-role="navbar">
                <a data-align="left" data-role="backbutton" class="nav-button">Back</a>
                <span data-role="view-title"></span>
            </div>
        </header>
         
        <div data-role="footer">
         
            <div data-role="tabstrip" id="myTabStrip">
                <a href="#http://localhost:8086/Kendo/play-music.html" data-icon="recents">Play Music</a>
                <a href="#http://localhost:8086/Kendo/music-store.html" data-icon="cart">Music Store</a>
            </div>
        </div>
    </div>
  3. Irina
    Irina avatar
    13 posts
    Member since:
    Mar 2014

    Posted 08 Mar 2014 Link to this post

    Sorry, another thread with same problem:

    http://www.telerik.com/forums/data-reload-and-tabstrip-issue
  4. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 11 Mar 2014 Link to this post

    Hi Irina,

    Thank you for contacting us. I managed to reproduce the flick, however it seems to be happening only in desktop browsers/simulators. The real device (iPhone) does not exhibit this behavior. 

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

    Posted 11 Mar 2014 in reply to Petyo Link to this post

    I have his behavior in Android and Windows Phone real devices also Desktop Browsers. I haven't iPhone
  6. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 13 Mar 2014 Link to this post

    Hello Irina,

    If this is the case, then you may consider using local views (or remote views with data-reload set to false), and retrieve dynamic data using jQuery Ajax calls or the kendo DataSource component

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Irina
    Irina avatar
    13 posts
    Member since:
    Mar 2014

    Posted 13 Mar 2014 in reply to Petyo Link to this post

    Hi, that is not a solution for me. I've completed my project and i'm happy and ready to buy few licences but my only one problem is tabstript blinking. Any way to clean the app cache? or disable the loading animation? looks like when i load a remote view, the loading animation bring to front of tabstript. I've tried to modify tabstrip style and set z-index 999999 but does not work...
  8. Irina
    Irina avatar
    13 posts
    Member since:
    Mar 2014

    Posted 13 Mar 2014 Link to this post

    I think that i 've fixed my problem.

    When the remote view is hidden then i remove the view:
    <div data-role="view" data-use-native-scrolling="true" id="customer_order_mobile" data-layout="mobile-tabstrip"  data-show="afterShow" data-hide="onHide">


    function onHide(e) {
     
            $("#customer_order_mobile").remove();   
        }


    Then, when the remote view is loaded for second time, load without tabstrip blinking

    thanks any way.
  9. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 17 Mar 2014 Link to this post

    Hi Irina,

    The loading animation cannot be disabled - I am not sure how this is related to the problem you describe, though. Also, what do you mean by app cache? If you refer to the contents of the fetched remote view - this is exactly what the data-reload attribute does - it clears the previously created view and re-fetches its contents. 

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  10. Irina
    Irina avatar
    13 posts
    Member since:
    Mar 2014

    Posted 18 Mar 2014 in reply to Petyo Link to this post

    Hi

    The problem is gone. Just i remove the view after hide the remote view. Then: when i load again, load without tabstrip problems. :)
Back to Top