This is the skeleton of my KendoUI Mobile app:
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<!-- Kendo UI Mobile CSS -->
<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
<!-- jQuery JavaScript -->
<script src="js/jquery.min.js"></script>
<!-- Kendo UI Mobile combined JavaScript -->
<script src="js/kendo.mobile.min.js"></script>
<title>Degrado Ambientale</title>
</head>
<body>
<!-- View Map -->
<div data-role="view" data-title="Degrado Ambientale" id="map-view" data-layout="default" data-stretch="true">
...
</div>
<!-- View List -->
<div data-role="view" data-title="Degrado Ambientale" id="list-view" data-layout="default" data-show="app.getDataFromServer" >
...
</div>
<!-- View New -->
<div data-role="view" data-title="Degrado Ambientale" id="new-view" data-layout="default" data-show="app.clearRepo">
...
</div>
<!-- View User -->
<div data-role="view" data-title="Degrado Ambientale" id="user-view" data-use-native-scrolling="true" class="newformstyle" data-show="app.showOptionView" data-init="app.initOptionView">
...
</div>
<!-- View Dettagli Segnalazione -->
<div data-role="view" id="view-repoDetail" style="width: 100%; height: 100%" data-show="app.loadRepo">
...
</div>
<!-- Default Layout -->
<div data-role="layout" data-id="default">
<div data-role="header">
<div data-role="navbar">
<a data-role="button" data-rel="drawer" href="#drawer" data-icon="drawer-icon" data-align="left"></a>
<span data-role="view-title"></span>
</div>
</div>
</div>
<!-- Drawer -->
<div data-role="drawer" data-views='["map-view", "list-view", "new-view"]' data-swipe-to-open="false" id="drawer">
<ul data-role="listview" data-type="group">
<li>Menù
<ul>
<li data-icon="globe"><a href="#map-view" data-transition="none">Mappa</a></li>
<li data-icon="list-icon"><a href="#list-view" data-transition="none">Segnalazioni</a></li>
<li data-icon="compose"><a href="#new-view" data-transition="none">Segnala</a></li>
</ul>
</li>
<li>Opzioni
<ul>
<li data-icon="contacts"><a href="#user-view" data-transition="none">Utente</a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="javascript/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
and javascript/index.js is:
var app = new kendo.mobile.Application($(document).body,{
init: function(){
app.navigate('#user-view');
}
});
....
app.initialize = function() {
this.bindEvents();
};
app.bindEvents = function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
};
app.onDeviceReady = function() {
....
};
I want to disable drawer-opening via swipe and the drawer must be displayed only on the views with IDs: map-view, list-view and new-view.
To do this, i set the drawer configuration attributes:
data-swipe-to-opento"false";data-viewsto'["map-view", "list-view", "new-view"]'
but the drawer does not appear in any view. If i delete data-views config then the drawer is displayed in all views via swipe.
WRT the data-swipe issue - there is a known issue in Kendo where it does not work on Android (you can still swipe to open the menu - works fine on iOS).
I downloaded the kendoui.complete.2013.3.1324.trial and extracted the kendo.mobile.min.js and css files and it fixed the issue.