Anker Berg-Sonne
Top achievements
Rank 1
Rank 1
Anker Berg-Sonne
asked on 21 May 2012, 06:09 PM
This release broke my tabstrips completely.
I tried to run the example from the web site using this release and going from tab to tab doesn't display the new tab contests correctly.
As far as I can see tabstrips just aren't working.
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/kendo.web.min.js" type="text/javascript"></script>
<script src="js/kendo.mobile.min.js" type="text/javascript"></script>
<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div data-role="view" id="tabstrip-profile" data-title="Profile" data-layout="mobile-tabstrip">
<ul data-role="listview" data-style="inset" data-type="group">
<li>
<ul>
<li>
<h2>
Carine <span>Callahan</span>
</h2>
</li>
<li>
Weekly average sales <span class="sales-up">$ 8,250</span>
</li>
<li>
Monthly average sales <span class="sales-up">$ 32,000</span>
</li>
</ul>
</li>
<li>
Languages
<ul>
<li>
English <span class="value">Native</span>
</li>
<li>
Hungarian <span class="value">Advanced</span>
</li>
<li>
French <span class="value">Advanced</span>
</li>
<li>
Chinese <span class="value">Beginner</span>
</li>
</ul>
</li>
<li>
Sales commodity
<ul>
<li>Beverages</li>
<li>Condiments</li>
<li>Confections</li>
<li>Diary Products</li>
<li>Grains/Cereals</li>
<li>Meat/Poultry</li>
<li>Produce</li>
<li>Seafood</li>
</ul>
</li>
<li>
PC Skills
<ul>
<li>MS Word</li>
<li>MS Excel</li>
<li>MS Outlook</li>
<li>MS PowerPoint</li>
<li>MS Project</li>
<li>Windows (XP, Vista)</li>
<li>Internet</li>
<li>SAP - Sales and Marketing Module</li>
<li>MS Visual Studio</li>
<li>Adobe Acrobat</li>
<li>CorelDraw</li>
</ul>
</li>
</ul>
</div>
<div data-role="view" id="tabstrip-sales" data-title="Sales History" data-layout="mobile-tabstrip">
<ul data-role="listview" data-style="inset" data-type="group">
<li>
Sales 2011
<ul>
<li>
January <span class="sales-up">↑ $ 35,000</span>
</li>
<li>
February <span class="sales-down">↓ $ 25,000</span>
</li>
<li>
March <span class="sales-down">↓ $ 23,000</span>
</li>
<li>
April <span class="sales-up">↑ $ 30,000</span>
</li>
<li>
May <span class="sales-up">↑ $ 31,000</span>
</li>
<li>
June <span class="sales-down">↓ $ 29,000</span>
</li>
<li>
July <span class="sales-up">↑ $ 35,000</span>
</li>
<li>
August <span class="sales-up">↑ $ 37,000</span>
</li>
<li>
September <span class="sales-hold">→ $ 37,000</span>
</li>
<li>
October <span class="sales-hold">→ $ 37,000</span>
</li>
<li>
November <span class="sales-up">↑ $ 38,000</span>
</li>
<li>
December <span class="sales-up">↑ $ 40,000</span>
</li>
</ul>
</li>
</ul>
</div>
<div data-role="view" id="tabstrip-rating" data-title="Rating" data-layout="mobile-tabstrip">
<ul data-role="listview" data-style="inset" data-type="group">
<li>
Sales Representatives
<ul>
<li data-icon="toprated">1. Andrew Fuller</li>
<li data-icon="toprated">2. Janet Leverling</li>
<li data-icon="toprated" style="background-color: #3589e7; color: #fff;">3. Carine Callahan</li>
<li data-icon="toprated">4. Margaret Johnson</li>
<li data-icon="toprated">5. Steve Collins</li>
<li data-icon="toprated">6. Maria Steward</li>
</ul>
</li>
</ul>
</div>
<div data-role="view" id="tabstrip-settings" data-title="Settings" data-layout="mobile-tabstrip">
<ul data-role="listview" data-style="inset" data-type="group">
<li>
Carine Callahan
<ul>
<li>
Notify when online
<input type="checkbox" data-role="switch" checked>
</li>
<li>
Administrator
<input type="checkbox" data-role="switch">
</li>
<li>
Access to stats
<input type="checkbox" data-role="switch" checked>
</li>
</ul>
</li>
</ul>
</div>
<div data-role="layout" data-id="mobile-tabstrip">
<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>
<p>TabStrip</p>
<div data-role="footer">
<div data-role="tabstrip">
<a href="#tabstrip-profile" data-icon="contacts">Profile</a>
<a href="#tabstrip-sales" data-icon="history">Sales</a>
<a href="#tabstrip-rating" data-icon="favorites">Rating</a>
<a href="#tabstrip-settings" data-icon="settings">Settings</a>
</div>
</div>
</div>
<style scoped>
#tabstrip-profile h2
{
display: inline-block;
font-size: 1.1em;
margin: 1.5em 0 0 1em;
}
#tabstrip-profile h2 span
{
display: block;
clear: both;
font-size: 2em;
margin: .2em 0 0 0;
}
#tabstrip-profile img
{
width: 5em;
height: 5em;
float: left;
margin: 1em;
-webkit-box-shadow: 0 1px 3px #333;
box-shadow: 0 1px 3px #333;
-webkit-border-radius: 8px;
border-radius: 8px;
}
.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>
var app = new kendo.mobile.Application(document.body);
</script>
</body>
</html>
I tried to run the example from the web site using this release and going from tab to tab doesn't display the new tab contests correctly.
As far as I can see tabstrips just aren't working.
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/kendo.web.min.js" type="text/javascript"></script>
<script src="js/kendo.mobile.min.js" type="text/javascript"></script>
<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div data-role="view" id="tabstrip-profile" data-title="Profile" data-layout="mobile-tabstrip">
<ul data-role="listview" data-style="inset" data-type="group">
<li>
<ul>
<li>
<h2>
Carine <span>Callahan</span>
</h2>
</li>
<li>
Weekly average sales <span class="sales-up">$ 8,250</span>
</li>
<li>
Monthly average sales <span class="sales-up">$ 32,000</span>
</li>
</ul>
</li>
<li>
Languages
<ul>
<li>
English <span class="value">Native</span>
</li>
<li>
Hungarian <span class="value">Advanced</span>
</li>
<li>
French <span class="value">Advanced</span>
</li>
<li>
Chinese <span class="value">Beginner</span>
</li>
</ul>
</li>
<li>
Sales commodity
<ul>
<li>Beverages</li>
<li>Condiments</li>
<li>Confections</li>
<li>Diary Products</li>
<li>Grains/Cereals</li>
<li>Meat/Poultry</li>
<li>Produce</li>
<li>Seafood</li>
</ul>
</li>
<li>
PC Skills
<ul>
<li>MS Word</li>
<li>MS Excel</li>
<li>MS Outlook</li>
<li>MS PowerPoint</li>
<li>MS Project</li>
<li>Windows (XP, Vista)</li>
<li>Internet</li>
<li>SAP - Sales and Marketing Module</li>
<li>MS Visual Studio</li>
<li>Adobe Acrobat</li>
<li>CorelDraw</li>
</ul>
</li>
</ul>
</div>
<div data-role="view" id="tabstrip-sales" data-title="Sales History" data-layout="mobile-tabstrip">
<ul data-role="listview" data-style="inset" data-type="group">
<li>
Sales 2011
<ul>
<li>
January <span class="sales-up">↑ $ 35,000</span>
</li>
<li>
February <span class="sales-down">↓ $ 25,000</span>
</li>
<li>
March <span class="sales-down">↓ $ 23,000</span>
</li>
<li>
April <span class="sales-up">↑ $ 30,000</span>
</li>
<li>
May <span class="sales-up">↑ $ 31,000</span>
</li>
<li>
June <span class="sales-down">↓ $ 29,000</span>
</li>
<li>
July <span class="sales-up">↑ $ 35,000</span>
</li>
<li>
August <span class="sales-up">↑ $ 37,000</span>
</li>
<li>
September <span class="sales-hold">→ $ 37,000</span>
</li>
<li>
October <span class="sales-hold">→ $ 37,000</span>
</li>
<li>
November <span class="sales-up">↑ $ 38,000</span>
</li>
<li>
December <span class="sales-up">↑ $ 40,000</span>
</li>
</ul>
</li>
</ul>
</div>
<div data-role="view" id="tabstrip-rating" data-title="Rating" data-layout="mobile-tabstrip">
<ul data-role="listview" data-style="inset" data-type="group">
<li>
Sales Representatives
<ul>
<li data-icon="toprated">1. Andrew Fuller</li>
<li data-icon="toprated">2. Janet Leverling</li>
<li data-icon="toprated" style="background-color: #3589e7; color: #fff;">3. Carine Callahan</li>
<li data-icon="toprated">4. Margaret Johnson</li>
<li data-icon="toprated">5. Steve Collins</li>
<li data-icon="toprated">6. Maria Steward</li>
</ul>
</li>
</ul>
</div>
<div data-role="view" id="tabstrip-settings" data-title="Settings" data-layout="mobile-tabstrip">
<ul data-role="listview" data-style="inset" data-type="group">
<li>
Carine Callahan
<ul>
<li>
Notify when online
<input type="checkbox" data-role="switch" checked>
</li>
<li>
Administrator
<input type="checkbox" data-role="switch">
</li>
<li>
Access to stats
<input type="checkbox" data-role="switch" checked>
</li>
</ul>
</li>
</ul>
</div>
<div data-role="layout" data-id="mobile-tabstrip">
<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>
<p>TabStrip</p>
<div data-role="footer">
<div data-role="tabstrip">
<a href="#tabstrip-profile" data-icon="contacts">Profile</a>
<a href="#tabstrip-sales" data-icon="history">Sales</a>
<a href="#tabstrip-rating" data-icon="favorites">Rating</a>
<a href="#tabstrip-settings" data-icon="settings">Settings</a>
</div>
</div>
</div>
<style scoped>
#tabstrip-profile h2
{
display: inline-block;
font-size: 1.1em;
margin: 1.5em 0 0 1em;
}
#tabstrip-profile h2 span
{
display: block;
clear: both;
font-size: 2em;
margin: .2em 0 0 0;
}
#tabstrip-profile img
{
width: 5em;
height: 5em;
float: left;
margin: 1em;
-webkit-box-shadow: 0 1px 3px #333;
box-shadow: 0 1px 3px #333;
-webkit-border-radius: 8px;
border-radius: 8px;
}
.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>
var app = new kendo.mobile.Application(document.body);
</script>
</body>
</html>
8 Answers, 1 is accepted
0
Hello,
Petyo
the Telerik team
I tried reproducing the problem in this jsFiddle, to no avail. Perhaps the problem lies in the inclusion of kendo.web and kendo.mobile scripts? Or maybe you updated the one without the other?
If you need both web and mobile, I would like to suggest that you use the download builder tool for that.
Petyo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Anker Berg-Sonne
Top achievements
Rank 1
Rank 1
answered on 21 May 2012, 08:16 PM
It works if I only include the mobile files like this:
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/kendo.mobile.min.js" type="text/javascript"></script>
<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
But it breaks if I include the .web files, like this:
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/kendo.web.min.js" type="text/javascript"></script>
<script src="js/kendo.mobile.min.js" type="text/javascript"></script>
<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
How do I get my hands on kendo.all.min? It isn't included in any of the downloads I have access to.
The custom download builder page at http://www.kendoui.com/custom-download.aspx is badly broken. WHen I go to it and have the dropdown at 2012.1.515 there are no checkboxes listed at all. If I change the dropdown to 2012.1.322 I see the checkboxes and if I check one of them I see the download button appear. If I then change the dropdown back to 2012.1.515 I have both checkboxes and download button.
Anker
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/kendo.mobile.min.js" type="text/javascript"></script>
<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
But it breaks if I include the .web files, like this:
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/kendo.web.min.js" type="text/javascript"></script>
<script src="js/kendo.mobile.min.js" type="text/javascript"></script>
<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
How do I get my hands on kendo.all.min? It isn't included in any of the downloads I have access to.
The custom download builder page at http://www.kendoui.com/custom-download.aspx is badly broken. WHen I go to it and have the dropdown at 2012.1.515 there are no checkboxes listed at all. If I change the dropdown to 2012.1.322 I see the checkboxes and if I check one of them I see the download button appear. If I then change the dropdown back to 2012.1.515 I have both checkboxes and download button.
Anker
0
Anker Berg-Sonne
Top achievements
Rank 1
Rank 1
answered on 21 May 2012, 08:22 PM
ARRRGGGGGGG!
I built a custom script with the dropdown at 2012.1.515 and when I downloaded and looked at it it had the following at the top:
/*
* Kendo UI Complete v2012.1.322 (http://kendoui.com)
* Copyright 2012 Telerik AD. All rights reserved.
*
So I have no way of building a custom script from version 2012.1.515!!!! And as I mentioned before I don't appear to have any access download kendo.all.min.js!!!!
Anker
I built a custom script with the dropdown at 2012.1.515 and when I downloaded and looked at it it had the following at the top:
/*
* Kendo UI Complete v2012.1.322 (http://kendoui.com)
* Copyright 2012 Telerik AD. All rights reserved.
*
So I have no way of building a custom script from version 2012.1.515!!!! And as I mentioned before I don't appear to have any access download kendo.all.min.js!!!!
Anker
0
Anker Berg-Sonne
Top achievements
Rank 1
Rank 1
answered on 21 May 2012, 09:01 PM
I have tried various combinations of loading kendo.web.min.js, kendo.dataviz.min.js and kendo.mobile.min.js.
The tabstrip demo ONLY works if neither kendo.web.min.js nor kendo,dataviz.min.js is loaded. Order doesn't matter. I would be extremely surprised if it works with kendo.all.min.js, but can't test that because I don't have access to it.
Anker
The tabstrip demo ONLY works if neither kendo.web.min.js nor kendo,dataviz.min.js is loaded. Order doesn't matter. I would be extremely surprised if it works with kendo.all.min.js, but can't test that because I don't have access to it.
Anker
0
Hello,
Petyo
the Telerik team
I am really sorry for the problem. This is an expected behavior - Kendo UI Mobile, Web and DataViz use common core. including the three scripts overrides some class definitions, which results in the problem you describe.
Thanks for reporting the problem with the outdated download builder - we are working on fixing that immediately. I will get back to you when it is fixed. Once done, you will be able to build the script needed. Your telerik points have been updated for the inconvenience.
On a side note, our mobile demos use kendo.all.min.js 515, and the tabstrip functions correctly. You can refer that script from the CDN url -
Petyo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Anker Berg-Sonne
Top achievements
Rank 1
Rank 1
answered on 22 May 2012, 01:02 PM
Thanks Petyo,
That did clear up all the problems.
I do not recall seeing anywhere that loading the three libraries independently causes problems. It would have saved me several days of grief to have known that.
It would also be really helpful if your support staff could be more explicit about this issue.
Anker
That did clear up all the problems.
I do not recall seeing anywhere that loading the three libraries independently causes problems. It would have saved me several days of grief to have known that.
It would also be really helpful if your support staff could be more explicit about this issue.
Anker
0
Hello Anker,
The problem with the Kendo UI Download builder is fixed - now you are able to create a custom js file with the needed scripts. Please check it and let me know if you still observe any problems.
Kind regards,
Iliana Nikolova
the Telerik team
The problem with the Kendo UI Download builder is fixed - now you are able to create a custom js file with the needed scripts. Please check it and let me know if you still observe any problems.
Kind regards,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Anker Berg-Sonne
Top achievements
Rank 1
Rank 1
answered on 28 May 2012, 02:46 PM
Yes, it works for me now.
Thanks/Anker
Thanks/Anker