Problem with internal views render

2 posts, 0 answers
  1. Romain
    Romain avatar
    4 posts
    Member since:
    Jul 2012

    Posted 03 Aug 2012 Link to this post

    Hi,

    I'm facing a problem with the render of my internal views background, in a PhoneGap iOS application using Kendo. Here is a code demo of my problem:

    <!DOCTYPE html>
    <html>
        <head>
            <title>Test</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
            <meta charset="utf-8" />
            <!-- ********** JS ********** -->
            <script src="js/cordova-2.0.0.js" type="text/javascript" charset="utf-8"></script>
            <script src="js/jquery.min.js"></script>
            <script src="js/kendo.all.min.js"></script>
            <!-- ********** CSS ********** -->
            <link rel="stylesheet" href="styles/kendo.mobile.all.min.css" type="text/css" />
        </head>
        <body>
            <!-- ********** Login View ********** -->
            <div data-role="view" id="loginView" data-title="Login">
                <div id="form" >
                    <header data-role="header">
                        <div data-role="navbar">
                            <span data-role="view-title"></span>
                        </div>
                    </header>
                    <ul data-role="listview" data-style="inset" data-type="group">
                        <li>
                            <label for="txtLogin">Login</label><br/>
                            <input id="txtLogin" name="txtLogin" maxlength="20" type="text"/>
                        </li>
                        <li>
                            <a data-role="button" id="btnSubmit" data-icon="globe">Connect</a>
                        </li>
                    </ul>
                </div>
            </div>
             
            <!-- ********** Another View ********** -->
            <div data-role="view" id="otherView">
                <header data-role="header">
                    <div data-role="navbar">
                        <span data-role="view-title" data-bind="text: userName"></span>
                    </div>
                </header>
                <ul data-role="listview" data-style="inset" data-type="group">
                    <li>
                        <span data-bind="text: userName"></span>
                    </li>
                    <li>
                        <span>Displayed?</span>
                    </li>
                </ul>
            </div>
             
            <script>
                var app = new kendo.mobile.Application($(document).body, {
                                                       transition: 'slide'
                                                       });
                 
                var viewModel = kendo.observable({
                                                 userName: null
                                                 });
                 
                $("#btnSubmit").click(function() {
                                      viewModel.userName = $("#txtLogin").val();
                                      app.navigate("#otherView");
                                      kendo.bind($("#otherView"), viewModel);
                                      });
           </script>
        </body>
    </html>


    In the "loginView", the view's background & control are correctly displayed.
    But when you navigate to the view "otherView" (by entering a text in the textbox and clicking on the Submit button), the controls aren't visible...
    And when I remove the <ul> & <li> tags from this second view, I lose the "iOS-like" background of the view naturally but the controls are visible, like in this second test:

    <!DOCTYPE html>
    <html>
        <head>
            <title>Test2</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
            <meta charset="utf-8" />
            <!-- ********** JS ********** -->
            <script src="js/cordova-2.0.0.js" type="text/javascript" charset="utf-8"></script>
            <script src="js/jquery.min.js"></script>
            <script src="js/kendo.all.min.js"></script>
            <!-- ********** CSS ********** -->
            <link rel="stylesheet" href="styles/kendo.mobile.all.min.css" type="text/css" />
        </head>
        <body>
            <!-- ********** Login View ********** -->
            <div data-role="view" id="loginView" data-title="Login">
                <div id="form" >
                    <header data-role="header">
                        <div data-role="navbar">
                            <span data-role="view-title"></span>
                        </div>
                    </header>
                    <ul data-role="listview" data-style="inset" data-type="group">
                        <li>
                            <label for="txtLogin">Login</label><br/>
                            <input id="txtLogin" name="txtLogin" maxlength="20" type="text"/>
                        </li>
                        <li>
                            <a data-role="button" id="btnSubmit" data-icon="globe">Connect</a>
                        </li>
                    </ul>
                </div>
            </div>
             
            <!-- ********** Another View ********** -->
            <div data-role="view" id="otherView">
                <header data-role="header">
                    <div data-role="navbar">
                        <span data-role="view-title" data-bind="text: userName"></span>
                    </div>
                </header>
                <span data-bind="text: userName"></span>
                <span>Displayed?</span>
            </div>
             
            <script>
                var app = new kendo.mobile.Application($(document).body, {
                                                       transition: 'slide'
                                                       });
                 
                var viewModel = kendo.observable({
                                                 userName: null
                                                 });
                 
                $("#btnSubmit").click(function() {
                                      viewModel.userName = $("#txtLogin").val();
                                      app.navigate("#otherView");
                                      kendo.bind($("#otherView"), viewModel);
                                      });
                </script>
        </body>
    </html>

    Does anyone know the reason of this problem please?

    UPDATE: when I remove all things around the view-model binding in the code, there is no more problem, like with this test code:
    <!DOCTYPE html>
    <html>
        <head>
            <title>Test</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
            <meta charset="utf-8" />
            <!-- ********** JS ********** -->
            <script src="js/cordova-2.0.0.js" type="text/javascript" charset="utf-8"></script>
            <script src="js/jquery.min.js"></script>
            <script src="js/kendo.all.min.js"></script>
            <!-- ********** CSS ********** -->
            <link rel="stylesheet" href="styles/kendo.mobile.all.min.css" type="text/css" />
        </head>
        <body>
            <!-- ********** Another View ********** -->
            <div data-role="view" id="otherView" data-title="other">
                <header data-role="header">
                    <div data-role="navbar">
                        <span data-role="view-title"></span>
                    </div>
                </header>
                <ul data-role="listview" data-style="inset" data-type="group">
                    <li>
                        <span>Displayed?</span>
                    </li>
                    <li><a data-role="button" id="btnSubmit2" data-icon="globe">Connect</a></li>
                </ul>
            </div>
     
            <!-- ********** Login View ********** -->
            <div data-role="view" id="loginView" data-title="Login">
                <div id="form" >
                    <header data-role="header">
                        <div data-role="navbar">
                            <span data-role="view-title"></span>
                        </div>
                    </header>
                    <ul data-role="listview" data-style="inset" data-type="group">
                        <li>
                            <label for="txtLogin">Login</label><br/>
                            <input id="txtLogin" name="txtLogin" maxlength="20" type="text"/>
                        </li>
                        <li>
                            <a data-role="button" id="btnSubmit" data-icon="globe">Connect</a>
                        </li>
                    </ul>
                </div>
            </div>
             
            <script>
                var app = new kendo.mobile.Application($(document).body, {
                                                       transition: 'slide'
                                                       });
                 
                $("#btnSubmit").click(function() {
                                      app.navigate("#otherView");
                                      });
     
                $("#btnSubmit2").click(function() {
                                      app.navigate("#loginView");
                                      });
                </script>
        </body>
    </html>

    It seems that view-model binding with content controls (the "kendo.bind(...)" instructions) breaks the content render of data-role="listview" data-style="inset" blocks :(
  2. Eva
    Eva avatar
    2 posts
    Member since:
    Jul 2012

    Posted 08 Aug 2012 Link to this post

    UHF Label is the main products among all UHF products with the most ecnomic, efficient and quick converter product for common application which had advantage in mass production.
    It is a updating identification products of barcode label in logestic and supplier chain management.
    OPRFID UHF Label can produce qualify the label UHF 860-960 MHz Gen2 Passive RFID Gen2 paper label compliant to the requirement of Wal-Mart Dock Door Portal of 3X3 meters in Conveyor Portal Speed at 600 feet/min , with size 4”x4”, 4”x2”,4”x6”, or any size at your requiement.

    OPRFID Technologies., LTD
    2-603 Room, Hong Feng Jia Yuan , 270# BeiMo Street
    ChengXiang Putian City Fujian, P.R, China.
    Tel: (0086)594 2790031
    Fax: (0086)594 2790185
    Mobile:(0086)13599454033
    Email:oprfid.eva@oprfid.com
    MSN:eva.oprfid@hotmail.com
    skype:oprfid.eva
     

  3. Kendo UI is VS 2017 Ready
Back to Top