Data-reload and tabstrip issue

[Stefan]

Hi, I have a problem with navigating between two remote views, where one view has the data-reload=true attribute.

I have a remote view which show details of a message, you can then post this message on twitter. If the user didn't authorize twitter before, they get a message with that they have to do that. The user then has two options: authorize twitter or go back to the message. If back to the message is selected, the tabstrip in the data-reload view dissappears and reappears immediatly. 

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 another message is selected.

How can I make sure the tabstrip doesn't flicker when navigating back to the remote view with the data-reload true attribute.


-EDIT:
When i go to the remote view with data-reload=true for the first time no flicker appears only for second time and the times after that.

[Steve]

Hi Stefan,

What is the platform that you observe the flicker on - Android or iOS? If the latter, have you applied any Kendo UI platform specific properties when initiating the mobile app and if yes, what? It would be best to provide us with a very simple use case that reproduces the problem (jsfiddle/jsbin or sample app), so we can run it locally and investigate.

On a side note, have you tried the suggested approach from this forum and does it help?

Regards,
Steve
Telerik
You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.

[Stefan]

Hi Steve,

I observed the flicker on both the platforms, but I have solved the problem. I was using two different layouts for the two pages even though the layouts were the same. This was part inexperience and has now been fixed by using the same layout.

[Irina]

Hi,[quote]Stefan said:Hi Steve,

I observed the flicker on both the platforms, but I have solved the problem. I was using two different layouts for the two pages even though the layouts were the same. This was part inexperience and has now been fixed by using the same layout.[/quote]

Hi, I'm using an unique layout and my tabstrip flicker. Take a look:

http://www.youtube.com/watch?v=pkLt8hHJFPQ&hd=1

http://www.youtube.com/watch?v=npZvLaq2WK4

[Stefan]

Hello Irinia,

I fixed it by using only one layout for the views and working with that. Is it possible to show some example code so I can take a look at it. 

Below is the layout i used:

<!-- LAYOUT MANAGER -->
<div data-role="layout" data-id="LBSDefault">
    <header data-role="header" data-id="DefaultHeader">
        <div data-role="navbar" data-id="DefaultNavbar">
            <a class="navButton" data-role="backbutton" data-align="left">Back</a>
            <span data-role="view-title"></span>
        </div>
    </header>
    <!--View content will render here-->
    <footer data-role="footer" data-id="DefaultFooter">
        <div data-role="tabstrip" data-id="DefaultTabstrip">
            <a class="secretsTab" data-icon="organize" href="category.html">
                <span class="secretsTabName">Secrets</span>
            </a>
            <a class="placeSecretTab" data-icon="compose" href="postSecret.html">
                <span class="placeSecretTabName">Place a secret</span>
            </a>
            <a class="profileTab" data-icon="contacts" href="profile.html">
                <span class="profileTabName">Profile</span>
            </a>
        </div>
    </footer>
</div>

And I initiated the layout in the app like this:

app.application = new kendo.mobile.Application(document.body, {
                               transition:"slide",
                               layout: "LBSDefault"
                               });

[Irina]

Hi, i've tried your code but does not fix my problem. I'm using an unique layout.

I can see:

When I load the main page and i click to load the first remote view works ok, no problem. Now i'm in the remote view, ok?. Now if i load a second remote view from the first loaded remote view, with data-reload="true" then my tabstrip is gone and back

Can Telerik help me with this?

[Irina]

Only if i use data-reload="false" works nice, but the remote view is not updated. Any way to load a remote view with data-reload=false then refresh the listview (without datasource because is a form)?

[Stefan]

Okay, Yeah I revisited my old code and I see that is also removed the data-reload=true. I have a big project to finish today. So I will look at your proposed solution of loading data another way (which is possible) tomorrow

[Alexander Valchev]

Hi guys,

The layout flicker issues might occurs when the mobile application is re-initialized multiple times. I will suggest you to check whether you are not initializing the mobile application in the remote view. If this is the case please initialize the application only in the index file which contains the root view.

Using serverNavigation in your application can also cause such kind of an issue but the serverNavigation is specific to the mobile MVC wrappers.

On a side note, you can refresh the data in the mobile View using jQuery.ajax and Kendo MVVM (overview, mobile integration) without refreshing the View itself.

Regards,
Alexander Valchev
Telerik