I need to clic twice on tabstrip to activate the view [VIDEO]

4 posts, 1 answers
  1. Orlando
    Orlando avatar
    9 posts
    Member since:
    Mar 2013

    Posted 15 Feb 2014 Link to this post

    Hi,

    I've a little problem. I'm using the TabStrip and i need to clic twice on tabstrip to activate the view or press F5 to refresh the page. I posted a video to see the problem.

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


    please your help.

    I posted part of the source:

    <!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>Dashboard</title>
        <meta name="author" content="">
        <script src="view/theme/js/jquery.min.js"></script>
        <script src="view/theme/js/kendo.all.min.js"></script>
        <link href="view/theme/css/kendo.common.min.css" rel="stylesheet" />
        <link href="view/theme/css/kendo.rtl.min.css" rel="stylesheet">
        <link href="view/theme/css/kendo.default.min.css" rel="stylesheet">
        <link href="view/theme/css/kendo.mobile.all.min.css" rel="stylesheet" />
        <link href="view/theme/css/kendo.mobile.exported.css" rel="stylesheet" />
    </head>
    <body>
        <div data-role="layout" data-id="mobile-view">
            <header data-role="header">
                <div data-role="navbar">
                    <a class="nav-button" data-align="left" data-role="backbutton">Back</a>
                    <span data-role="view-title"></span>
                    <a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
                </div>
            </header>
        </div>
        <div data-role="view" id="tabstrip-home" data-title="General" data-layout="mobile-tabstrip">
            <div class="head"> </div>
            <ul data-role="listview" data-style="inset" data-type="group">
                <li>
                    Overview           
                    <ul>
                        <li>Total Sales:<span class="sales-up">$15,436</span></li>
                        <li>Total Sales This Year:<span class="sales-up">$15,436</span></li>
                        <li>Total Orders:<span class="sales-up">3</span></li>
                        <li>No. of Customers:<span class="sales-up">1</span></li>
                        <li>Customers Awaiting Approval:<span class="sales-up">0</span></li>
                        <li>Reviews Awaiting Approval:<span class="sales-up">0</span></li>
                        <li>No. of Affiliates:<span class="sales-up">0</span></li>
                        <li>Affiliates Awaiting Approval:<span class="sales-up">0</span></li>
                    </ul>
                </li>
            </ul>
            <ul data-role="listview" data-style="inset" data-type="group" class="inboxList">
                <li>
                    Latest 10 Orders           
                    <ul>
                        <li>
                            <a data-rel="external" href="product?order_id=3">
                                <h3 class="time">Orlando Jerez</h3>
                                <h3>14/02/2014</h3>
                                <h3>$15,005</h3>
                                <p>14/02/2014</p>
                            </a>
                        </li>
                        <li>
                            <a data-rel="external" href="product?order_id=2">
                                <h3 class="time">Orlando Jerez</h3>
                                <h3>11/02/2014</h3>
                                <h3>$106</h3>
                                <p>11/02/2014</p>
                            </a>
                        </li>
                        <li>
                            <a data-rel="external" href="product?order_id=1">
                                <h3 class="time">Orlando Jerez</h3>
                                <h3>11/02/2014</h3>
                                <h3>$325.00</h3>
                                <p>11/02/2014</p>
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div data-role="view" id="tabstrip-sales" data-title="Profile" data-layout="mobile-tabstrip">
            <ul data-role="listview" data-style="inset" data-type="group">
                <li>
                    <ul>
                        <li>
                            <h2>Sales <span>page</span></h2>
                            <img src="../../content/mobile/overview/carine.jpg" />
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div data-role="view" id="tabstrip-config" data-title="Profile" data-layout="mobile-tabstrip">
            <ul data-role="listview" data-style="inset" data-type="group">
                <li>
                    <ul>
                        <li>
                            <h2>Config <span>page</span></h2>
                            <img src="../../content/mobile/overview/carine.jpg" />
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <style>
            .inboxList
            {
            font-size: .8em;
            }
            .inboxList p,
            .inboxList h2,
            .inboxList h3
            {
            margin: 5px 2px;
            }
            .inboxList p,
            .inboxList h3
            {
            color: #777;
            }
            .inboxList h3.time
            {
            color: #369;
            float: left;
            margin-right: 10px;
            }
        </style>
        <style>
            .km-ventas:after,
            .km-ventas:before
            {
            content: "\e09c";
            }
            .km-total:after,
            .km-total:before
            {
            content: "\e086";
            }
        </style>
        <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>
                    <a data-align="right" data-role="button" class="nav-button" href="#index" data-icon="refresh"></a>
                </div>
            </header>
            <div data-role="footer">
                <div data-role="tabstrip">
                    <a href="#tabstrip-home" data-icon="recents">General</a>
                    <a href="#index.php?route=catalog/product&token=5f7d94ff10d1569f07d17e5caba9c82d" data-icon="cart">Catalog</a>
                    <a href="#tabstrip-sales" data-icon="bookmarks">Sales</a>
                    <a href="#tabstrip-config" data-icon="settings">Settings</a>
                </div>
            </div>
        </div>
        <style scoped>
            #tabstrip-home .head {
            display: block;
            margin: 1em;
            height: 110px;
            background: url(images/logo.jpg) no-repeat center center;
            -webkit-background-size: 100% auto;
            background-size: 100% auto;
            }
            .km-ios #tabstrip-home .head {
            -webkit-border-radius: 10px;
            border-radius: 10px;
            }
        </style>
        <style scoped>
            #tabstrip-home h2 {
            display: inline-block;
            font-size: 1.1em;
            margin: 1.5em 0 0 .7em;
            }
            #tabstrip-home h2 span {
            display: block;
            clear: both;
            font-size: 1.8em;
            margin: .1em 0 0 0;
            }
            #tabstrip-home img {
            width: 5em;
            height: 5em;
            float: left;
            margin: 1em;
            border: 1px solid rgba(0,0,0,.2);
            -webkit-border-radius: 4em;
            border-radius: 4em;
            }
            .sales-down,
            .sales-hold,
            .sales-up,
            .value {
            float: right;
            }
            .sales-up { color: green; }
            .sales-down { color: red; }
            .sales-hold { color: blue; }
            .value { color: #bbb; }
        </style>
        <script>
            new kendo.mobile.Application($(document.body), {
            // platform: "ios", //Platform can be one of "ios", "ios7", "android", "blackberry", "wp", "meego"
            skin: "flat",
            transition: "slide",
            hideAddressBar: true,
            serverNavigation: false,
            loading: "<h1>Cargando...</h1>"
            });
     
        </script>
    </body>
    </html>


  2. Answer
    Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 18 Feb 2014 Link to this post

    Hi Orlando,

    This usually happens if you initialize your application again in the remote view? Do you have a Kendo UI Mobile app initialization in your remote view? If this is not the case, please extract a sample that is runnable, so we can test and reproduce the behavior.

    Thank you in advance for your cooperation.

    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Orlando
    Orlando avatar
    9 posts
    Member since:
    Mar 2013

    Posted 18 Feb 2014 in reply to Kiril Nikolov Link to this post

    Yes, it work! thanks so much!
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 19 Feb 2014 Link to this post

    Hi Orlando,

    I am glad it helped. Please keep in mind that every single widget in your Kendo UI Mobile application should be instantiated only once, as well as the mobile application.

    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready