use kendo framework FX in mobile

[ai]

hi ,
       I  use  kendo framework FX flip and pageTurn effect in kendoui mobile  ,  make transiton between two views,

<div data-role="view" id="loginpage" data-layout="loginLayout">
        <div id="testpanel"></div>
        <center><a data-click="gotoListPage1" data-role="button" id="appBtn">1:flip</a></center>
</div>
<div data-role="layout" data-id="loginLayout">
    <div data-role="header">
        <div data-role="navbar">
            <span data-role="view-title">test</span>
        </div>
    </div>
</div>

<div data-role="view" id="listpage" data-layout="listLayout" data-show="testInit">
    <div class="wrapper">
        <div class="headwrapper">
            <div class="appheader">test</div>
        </div>

        <div id="testcontent">
                <div id="testA" style="width=100px;height:100px;">1111111111111111111111</div>
                <div id="testB" style="display:none;width=100px;height:100px;">2222222222222222222222</div>
        </div>
        <center><a data-click="testButton" data-role="button" id="appBtn">test</a></center>
    </div>
</div>
<div data-role="layout" data-id="listLayout">
    <div data-role="header">
        <div data-role="navbar"><span data-role="view-title">Demo</span></div>
    </div>
</div>

function gotoListPage1(){
    //MYAPP.app.navigate("#listpage",'slide:left');
    var effect = kendo.fx("#body").flipHorizontal($("#loginpage"), $("#listpage")).duration(1000);
    effect.play();
    kendo.mobile.init("#listpage");
}

function testButton(){
    kendo.fx("#testcontent").pageturnVertical($("#testA"), $("#testB")).play();
}

my code above,  
(1) after transitions , data-show="testInit" function  not run as usual,  how to make it take action 

(2) in kendo mobile ,  append data to widget via ajax or other way, the right to render  widget is ?    
kendo.mobile.init("#listpage")   is the universal method?

(3) navbar in mobile not show in new view after transition  , why ? how to fix it 

[Kiril Nikolov]

Hi Ai,

As you are flipping the whole body using the flipHorizontal() effect, the data-show event is not being fired, therefore the testInit() function is never called. Flipping the whole page is also the reason why the NavBar is not shown after the transition. Please check our examples, to find out how to implement the Kenod UI Fx.

Details about kendo init and its usage can be found in this article. 
 
Regards,
Kiril Nikolov
Telerik