Anker Berg-Sonne
Top achievements
Rank 1
Rank 1
Anker Berg-Sonne
asked on 14 May 2012, 04:15 PM
Inside mobile views controlled by a tab bar. I have been unable to make drag and drop work. As soon as I remove all the mobile views drag and drop works. Is this a feature or am I missing something?
Thanks/Anker
Thanks/Anker
4 Answers, 1 is accepted
0
Anker Berg-Sonne
Top achievements
Rank 1
Rank 1
answered on 14 May 2012, 06:46 PM
Here's some more information:
The following works because it is not a tabstrip view:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test</title>
<!--Kendo UI, Mobile and DataViz-->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script>
<script src="js/kendo.custom.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" />
<meta name="viewport" content="width=980, minimum-scale=1, initial-scale=1, maximum-scale=10"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<style type="text/css">
.km-login
{
-webkit-mask-box-image: url("images/Logout.png");
}
</style>
</head>
<body>
<div data-role="view" style="height: 600px;width: 600px; border-style: solid; border-width: 1px"
>
<div id="Test" style="height: 20px; width: 20px; background-color: #000"></div>
</div>
<script type="text/javascript">
$(document).ready(
function () {
var app = new kendo.mobile.Application(document.body);
$("#Test").kendoDraggable(
{
hint: function () {
return $("#Test").clone();
}
}
);
}
)
</script>
</body>
</html>
If modify it to a tabstrip view like this:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test</title>
<!--Kendo UI, Mobile and DataViz-->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script>
<script src="js/kendo.custom.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" />
<meta name="viewport" content="width=980, minimum-scale=1, initial-scale=1, maximum-scale=10"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<style type="text/css">
.km-login
{
-webkit-mask-box-image: url("images/Logout.png");
}
</style>
</head>
<body>
<div data-role="view" style="height: 600px;width: 600px; border-style: solid; border-width: 1px"
id="tabstrip-home" data-layout="mobile-tabstrip"
>
<div id="Test" style="height: 20px; width: 20px; background-color: #000"></div>
</div>
<div data-role="layout" data-id="mobile-tabstrip">
<div data-role="header"></div>
<p>TabStrip</p>
<div data-role="footer">
<div data-role="tabstrip" id="TabStrip">
<a id="HomeTab" href="#tabstrip-home" data-icon="home">Home</a>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(
function () {
var app = new kendo.mobile.Application(document.body);
$("#Test").kendoDraggable(
{
hint: function () {
return $("#Test").clone();
}
}
);
}
)
</script>
</body>
</html>
Then it doesn't.
Anker
The following works because it is not a tabstrip view:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test</title>
<!--Kendo UI, Mobile and DataViz-->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script>
<script src="js/kendo.custom.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" />
<meta name="viewport" content="width=980, minimum-scale=1, initial-scale=1, maximum-scale=10"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<style type="text/css">
.km-login
{
-webkit-mask-box-image: url("images/Logout.png");
}
</style>
</head>
<body>
<div data-role="view" style="height: 600px;width: 600px; border-style: solid; border-width: 1px"
>
<div id="Test" style="height: 20px; width: 20px; background-color: #000"></div>
</div>
<script type="text/javascript">
$(document).ready(
function () {
var app = new kendo.mobile.Application(document.body);
$("#Test").kendoDraggable(
{
hint: function () {
return $("#Test").clone();
}
}
);
}
)
</script>
</body>
</html>
If modify it to a tabstrip view like this:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test</title>
<!--Kendo UI, Mobile and DataViz-->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script>
<script src="js/kendo.custom.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" />
<meta name="viewport" content="width=980, minimum-scale=1, initial-scale=1, maximum-scale=10"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<style type="text/css">
.km-login
{
-webkit-mask-box-image: url("images/Logout.png");
}
</style>
</head>
<body>
<div data-role="view" style="height: 600px;width: 600px; border-style: solid; border-width: 1px"
id="tabstrip-home" data-layout="mobile-tabstrip"
>
<div id="Test" style="height: 20px; width: 20px; background-color: #000"></div>
</div>
<div data-role="layout" data-id="mobile-tabstrip">
<div data-role="header"></div>
<p>TabStrip</p>
<div data-role="footer">
<div data-role="tabstrip" id="TabStrip">
<a id="HomeTab" href="#tabstrip-home" data-icon="home">Home</a>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(
function () {
var app = new kendo.mobile.Application(document.body);
$("#Test").kendoDraggable(
{
hint: function () {
return $("#Test").clone();
}
}
);
}
)
</script>
</body>
</html>
Then it doesn't.
Anker
0
Hello,
Thanks for contacting us. In the official release, the draggable widget does not work when in mobile applications. This is a known issue, which is resolved in the latest internal builds. Can you please try using an internal build?
Greetings,
Petyo
the Telerik team
Thanks for contacting us. In the official release, the draggable widget does not work when in mobile applications. This is a known issue, which is resolved in the latest internal builds. Can you please try using an internal build?
Greetings,
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
Simon
Top achievements
Rank 1
Rank 1
answered on 05 Feb 2014, 12:34 AM
Dear Petyo,
this post was published in 2012. Is this feature now available?
thank you
this post was published in 2012. Is this feature now available?
thank you
0
Hello Simon,
As my colleague Petyo stated, the issue was resolved in an internal build long time ago. This means the fix should be present in consecutive releases, including the latest 2013.3.1324 version.
Regards,
Sebastian
Telerik
As my colleague Petyo stated, the issue was resolved in an internal build long time ago. This means the fix should be present in consecutive releases, including the latest 2013.3.1324 version.
Regards,
Sebastian
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!