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

Pane Navigation Issue

3 Answers 162 Views
SplitView
This is a migrated thread and some comments may be shown as answers.
Kevin
Top achievements
Rank 1
Kevin asked on 05 Jul 2013, 09:45 AM
Hi,

We're trialing Kendo UI Mobile for an iOS app targeted for the iPad. The pane navigation in the SplitView doesn't seem to be working. Navigating within the same view works but links with the target set to the other pane don't work. There are no errors in the console.

Tried with v2013.2.626 and v2013.1.514, also using jQuery 1.9.1 and RequireJS. The online demo works in the browser but not in the contained app. Please advise. Thanks

<div data-role="splitview">
     
    <div data-role="pane" id="side-pane" data-layout="side-default">
         
        <div data-role="view" data-title="Level 1" id="menu-root">
            <ul data-role="listview">
                <li><a href="#menu-sub" >Sub Menu</a></li>
            </ul>
        </div>
         
        <div data-role="view" data-title="Level 2" id="menu-sub">
            <ul data-role="listview">
                <li><a href="#test" data-target="main-pane">Test</a></li>
                <li><a href="#messages" data-target="main-pane">Messages</a></li>
            </ul>
        </div>
         
        <div data-role="layout" data-id="side-default" >
            <div data-role="header">
                <div data-role="navbar">
                    <span data-role="view-title"></span>
                </div>
            </div>
        </div>
         
    </div>
     
 
     
    <div data-role="pane" data-layout="main-default" id="main-pane">
         
        <div data-role="view" data-title="Test" id="test">
            <p>Test!</p>
            <a href="#messages" data-role="button">Go To Messages</a>
        </div>
         
        <div data-role="view" data-title="Messages" id="messages">
            <p>Messages!</p>
        </div>
         
        <div data-role="layout" data-id="main-default">
            <div data-role="header">
                <div data-role="navbar">
                    <span data-role="view-title"></span>
                </div>
            </div>
        </div>
    </div>
     
</div>

3 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 05 Jul 2013, 10:34 AM
Hi Kevin,

I have reproduced your code in a JSBin and its seems to be working correctly. Could you please check this example and modify it to represent your problem?

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
avi
Top achievements
Rank 1
answered on 15 Jul 2013, 08:07 AM
Hi,
The pane navigation in the SplitView doesn't seem to be working. Navigating within the same view works but links with the target set to the other pane don't work. there is console error "Uncaught TypeError: Cannot call method 'switchWith' of undefined".

<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="Kstayles/kendo.common.min.css" rel="stylesheet" />
<link href="Kstayles/kendo.default.min.css" rel="stylesheet" />
<link href="Kstayles/kendo.mobile.all.min.css" rel="stylesheet" />
<script src="Kstayles/jquery.min.js"></script>
<script src="Kstayles/kendo.all.min.js"></script>
</head>
<body>
<script id="routTemplat" type="text/x-kendo-template">

<a href="\#rout_side?route=#:ID#">#: Name # </a>
</script>
<script id="tripTemplat" type="text/x-kendo-templat">
<a href="\#schedules?scheduleID=#: ID #" data-target="schedules_pane">
#: ID #
<div class="#if (this.idx++ % 2 == 0) {# schedule #} else {# alt_schedule #}# n">
        <h2>#= Icons#</h2>
        <i> #= Comments#</i>
        <h4>Departs on #=dDate# From</h4>
        <div class="padding_left10 padding_bottom5">#= Pickups#</div>
        <h4>Drops At</h4>
        <div class="padding_left10 padding_bottom5">#= Dropoffs#</div>

        <div class="padding_left2 padding_top5">
            <b>Seat Price</b> <span class="price">#=kendo.toString(Price,"c")#</span>
        </div>
        
    </div>
</a>
</script>

<script id="scheduleTemplat" type="text/x-kendo-templat">
<h2>#:ID#</h2>
</script>

<div data-role="splitview">
<div data-role="pane" data-layout="rout_default" data-transition="slide">
<div data-role="view" data-title="schedule rout" id="rout_root" data-init="routesOnInit" >
<input id="datepicker" type="date" >
<ul id="list_routes" >

</ul>
</div>
<div data-role="view" id="rout_side" data-title="trip"  data-show="route_sideOnShow">
<ul id="list_trip" data-templat="tripTemplat">

</ul>
</div>

<div data-role="layout" data-id="rout_default" data-show="tripOnShow" >
<div data-role="header">
<div data-role="navbar">
<a id="back-button" class="nav-button" data-align="left" data-role="backbutton">Back</a>
<span data-role="view-title"></span>
</div>
</div>
</div>

</div>

<div data-role="pane" data-layout="schedules_default" id="schedules_pane">
<div data-role="view" data-title="schedules">
no rout was selected
</div>

<div data-rol="view" data-titel="schedules" id="schedules" data-show="schedulesOnShow">
<div id="selected_trip" data-templat="scheduleTemplat">

</div>
</div>

<div data-role="layout" data-id="schedules_default" data-show="resevationOnShow">
<div data-role="header">
<div data-role="navbar">
<a id="lockbus_button" class="nav-button" data-align="left" data-role="button">lock bus</a>
<a id="updateselected" class="nav-button" data-align="left" data-role="button">update selected</a>
<a id="updateunselected" class="nav-button" data-align="left" data-role="button">update unselected</a>
<span data-role="view-title"></span>
</div>
</div>
</div>
</div>
</div>

<script>
function routesOnInit(e) {
  var list_routes = e.view.element.find("#list_routes");
  var template = kendo.template($("#routTemplat").html());
  var list_routes_DS = new kendo.data.DataSource({
  transport: {
  read: {
  url: "/SITE/m/webService/route.asmx/GetRoutes",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  type: "POST"
  },
  },
  schema: {
  data: function (arg) {
  //console.log(arg, arg.d)
  return arg.d;
  }
  },

  error: function (msg) {
  $("#modalview-alerts-message").html("Error ocurred! Please reload.").css("color", "red");
  $("#modalview-alerts").parent().height(100);
  $("#modalview-alerts").kendoMobileModalView("open");
  },

  });


  list_routes.kendoMobileListView({
  dataSource: list_routes_DS,
  template: template,
  headerTemplate: "<h2>Select Route</h2>"
  });
  var date = new Date();

var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();

if (month < 10) month = "0" + month;
if (day < 10) day = "0" + day;

var today = year + "-" + month + "-" + day;


$("#datepicker").attr("value", today);
 
};
function tripOnShow(e) {
var list_trip = e.view.element.find("#list_trip");
var templeteTrip = kendo.template($("#tripTemplat").html());
var list_trip_DS = new kendo.data.DataSource({
transport: {
read: {
url: "/SITE/m/webService/schedulesforTab.asmx/GetSchedulesForTab",
contentType: "application/json; charset=utf-8",
dataType: "json",
type: "POST"
},
parameterMap: function (data, type) {
if (type == "read") {
var rv = $.extend({ route_id: e.view.params.route, trip_date: datepicker.value}, data);
console.log(rv);
return kendo.stringify(rv);
}
}
},
schema: {
data: function (arg) {
console.log(arg, arg.d)
return arg.d;
}
},

error: function (msg) {
$("#modalview-alerts-message").html("Error ocurred! Please reload.").css("color", "red");
$("#modalview-alerts").parent().height(100);
$("#modalview-alerts").kendoMobileModalView("open");
},

});
list_trip.kendoMobileListView({
dataSource: list_trip_DS,
template: templeteTrip,
headerTemplate: "<h2>Select Trip</h2>",
autoBind: false
});

};

function route_sideOnShow(e) {
var list_trip = e.view.element.find("#list_trip");
var dataSource = list_trip.data("kendoMobileListView").dataSource;
dataSource.read();
}



function resevationOnShow(e) {
var selected_trip = e.view.element.find("#selected_trip");
var templeteselectedTrip = kendo.template($("#scheduleTemplat").html());
var selected_trip_DS = new kendo.data.DataSource({

transport: {
read: {
url: "/SITE/m/webService/reservationforTab.asmx/GetresvationForTab",
contentType: "application/json; charset=utf-8",
dataType: "json",
type: "POST"
},
parameterMap: function (data, type) {
if (type == "read") {
var rv = $.extend({ schdule_id: e.view.params.schdule}, data);
console.log(rv);
return kendo.stringify(rv);
}
}
},
schema: {
data: function (arg) {
console.log(arg, arg.d)
return arg.d;
}
},

error: function (msg) {
$("#modalview-alerts-message").html("Error ocurred! Please reload.").css("color", "red");
$("#modalview-alerts").parent().height(100);
$("#modalview-alerts").kendoMobileModalView("open");
},

});
selected_trip.kendoMobileListView({
dataSource: selected_trip_DS,
template: templeteselectedTrip,
headerTemplate: "<h2>Select Trip</h2>",
autoBind: false
});

};

function sideOnShow(e) {
var selected_trip = e.view.element.find("#selected_trip");
var dataSource = selected_trip.data("kendoMobileListView").dataSource;
dataSource.read();
}

</script>
<script>


            </script>
<style scoped>
#rout_side .Icon {
float: right;
color: rgba(200,200,200,.8);
font-size: .7em;
font-weight: normal;
}
#rout_side .cap {
clear: both;
font-size: .7em;
font-weight: normal;
}
#rout_side .km-content h3 {
margin-left: 0;
}
#schedules_pane .km-content{
padding: 30px;
}
#schedules_pane dl {
float: left;
margin: 0;
padding: 0 0 20px 0;
}
#schedules_pane dl:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
#schedules_pane dt, #schedules_pane dd {
display: block;
float: left;
margin: 0;
padding: 0;
}
#schedules_pane dt {
clear: left;
text-align: right;
padding: 0 10px;
}
</style>

<script>
var app = new kendo.mobile.Application(document.body);
</script>
</body>
</html>
0
Petyo
Telerik team
answered on 17 Jul 2013, 07:35 AM
Hi avi,

I am not sure what goes on in your case, as the example you have posted cannot be run due to service references. A very similar scenario is fully functional in our demos - you can use it as a starting point for your implementation. 

Regards,
Petyo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
SplitView
Asked by
Kevin
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
avi
Top achievements
Rank 1
Petyo
Telerik team
Share this question
or