After navigate('#...','...') the first view is showed behind

9 posts, 0 answers
  1. Appmasters
    Appmasters avatar
    6 posts
    Member since:
    Jul 2014

    Posted 11 Oct 2014 Link to this post

    Hi,

    after i have update the appbuilder app, now in the compiled version, when i use app.application.navigate('#...','slide...') the first view is displayed behind the second view.

    This don't occurs in the simulator where all works fine.

    Whit the tab navigation, the error don't occurs

    I've attached 3 images :
    1) Home view (in iPhone)
    2) Secondary view after the navigate function (in iPhone)
    3) Secondary view after the navigate function (in Simulator)


  2. Appmasters
    Appmasters avatar
    6 posts
    Member since:
    Jul 2014

    Posted 11 Oct 2014 in reply to Appmasters Link to this post

    Debugging the App, there's no javascript error, or nothing.

    The views between i navigate are
    #home
    and
    #vetrinalist1


    After the navigate this is a slice of the DOM :

    <div id="home" data-role="view" data-title="Home" data-model="app.homeService.viewModel" data-after-show="app.homeService.viewModel.onShow" data-url="/" style class="km-widget km-view k-fx-current k-fx-next" >...</div>
    <div id="vetrinaList1" class="vetrinaList km-widget km-view k-fx-next k-fx-current" data-role="view" data-title="" data-model="app.vetrineListService.viewModel" data-before-show="app.vetrineListService.viewModel.show1" data-after-show="app.vetrineListService.viewModel.showTitle" data-stretch="true" style="">...</div>

    I think the problem is that both the views have the class : "k-fx-current k-fx-next"

    I've attached another 2 images :
    1) DOM in home
    2) DOM after the navigate action
  3. Martin Yankov
    Admin
    Martin Yankov avatar
    177 posts

    Posted 15 Oct 2014 Link to this post

    Hello,

    From the screen shots you provided, it seems that something interrupted or stopped the view navigation. The fx classes should be there only for the duration of the navigation and when it completes, the view you navigated from should have style="display: none". In your case, both views have empty style attributes. I can't be sure what is causing the issue from the screenshots alone. Is this happening only with these two views or with all views? You mentioned you have updated the AppBuilder app, what exactly have you updated?

    This seems to be a front-end issue connected with Kendo UI. Can you open a support ticket and send me your app project or a sample app project that reproduces the issue? This will let me investigate the issue faster and provide a better solution.

    I am looking forward to your reply.

    Regards,
    Martin Yankov
    Telerik
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  4. Mike
    Mike avatar
    3 posts
    Member since:
    Jan 2013

    Posted 10 Nov 2014 in reply to Martin Yankov Link to this post

    Hi Guys,

    I am having the same problem with my navigations.  Can someone please tell me if a resolution was found?  The issue occurred after upgrading to the latest kendo library (2014.2.1008) with no other changes.  I am currently upgrading to the 1107 internal build to see if it makes a difference.

    Originally it was occurring because we had a data-transition="slide" tag on a splitter pane view tag.  Removing that fixed the issue.  Later, we added coded transitions in the kendo.application.navigate() calls, by passing in 'slide' as a parameter.  This now breaks the views again.  It would appear to be an issue where data-transition is on the HTML tag as well in the .navigate which caused the navigation to occur.  I have removed data-transition from all HTML tags and buttons but the issue is still occurring.
  5. Martin Yankov
    Admin
    Martin Yankov avatar
    177 posts

    Posted 13 Nov 2014 Link to this post

    Hello Mike,

    I could not reproduce the issue when Appmasters reported this and they did not sent me a sample project. Can you please open a support ticket and send us a project where we can reproduce and investigate this?

    I am looking forward to your reply.

    Regards,
    Martin Yankov
    Telerik
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  6. Mike
    Mike avatar
    3 posts
    Member since:
    Jan 2013

    Posted 25 Nov 2014 in reply to Martin Yankov Link to this post

    Hi Martin,

    Unfortunately I am still unable to create a demo app that reproduces it.  I am 99.9% sure that this is a race condition based on the speed during transitions.  I have observed that when the problem occurs, the new k-fx-next and previous classes are still on the previous and current views/panes.  In all cases, the issue is that the old view is still set to display: block, or the new view is still set to display: none.

    In this new case we are transitioning with pane.navigate, and forcing the slide transition as the second parameter.  It only happens 1 time out of 10, and we can only make it happen on an iPad, the issue does not occur on the browser.  This leads me to believe that the issue is speed related and is a race condition.  I wish I could do more to help, but in making a demo app it appears that it is fast enough that I can not make it occur.




  7. Mike
    Mike avatar
    3 posts
    Member since:
    Jan 2013

    Posted 25 Nov 2014 in reply to Martin Yankov Link to this post

    Is there a way for now to disable the k-fx transitions completely, and fall back on the transitions from the previous release?  Another post said to exclude the fx.js file.  We are using the mobile.all file, and even with the file builder on your site I could not exclude the FX library from the build.

    Thanks
  8. Martin Yankov
    Admin
    Martin Yankov avatar
    177 posts

    Posted 28 Nov 2014 Link to this post

    Hello Mike,

    I have identified a couple of possible reasons for this behavior.
    • You haven't updated the Kendo UI Styles and your .js and .css files are not from the same version. I suggest you open all your Kendo files and check the version on the top.
    • There is a possibility that some third party components are making transitions similar to the Kendo transitions and are breaking them. For example, if you have any Bootstrap Components, try removing them from your view and try to reproduce the problem, so that we can identify which one is causing this. 

    These are the only reasons I could find out. If you can open a support ticket and send me your project, so that we can investigate and identify the problem, I could provide more insight.

    I am looking forward to your reply.


    Regards,
    Martin Yankov
    Telerik
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  9. Cynthia
    Cynthia avatar
    2 posts
    Member since:
    Nov 2013

    Posted 07 Jan 2015 in reply to Martin Yankov Link to this post

    Hi Martin,

    We ran into this exact issue after upgrading to version 2014.2.1008 (and higher) - when navigating from one view to another with a transition, we'd still see the old view under the new view and the app would appear frozen, but there wouldn't be any JavaScript errors.

    Turns out your suggestion to upgrade the CSS was correct. We had only upgraded the JavaScript. Upgrading the CSS fixed the problem for us, and now transitions work perfectly.

    Lesson learned: always upgrade the CSS files along with the JavaScript!

    Thanks!

    Cynthia 
Back to Top