This is a migrated thread and some comments may be shown as answers.

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

3 Answers 45 Views
TabStrip (Mobile)
This is a migrated thread and some comments may be shown as answers.
Orlando
Top achievements
Rank 1
Orlando asked on 15 Feb 2014, 07:05 PM
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>


3 Answers, 1 is accepted

Sort by
0
Accepted
Kiril Nikolov
Telerik team
answered on 18 Feb 2014, 09:39 AM
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!
0
Orlando
Top achievements
Rank 1
answered on 18 Feb 2014, 01:29 PM
Yes, it work! thanks so much!
0
Kiril Nikolov
Telerik team
answered on 19 Feb 2014, 08:00 AM
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!
Tags
TabStrip (Mobile)
Asked by
Orlando
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Orlando
Top achievements
Rank 1
Share this question
or