Pane Navigation Issue

4 posts, 0 answers
  1. Kevin
    Kevin avatar
    1 posts
    Member since:
    Jun 2013

    Posted 05 Jul 2013 Link to this post

    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>
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 05 Jul 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. avi
    avi avatar
    1 posts
    Member since:
    Jul 2013

    Posted 15 Jul 2013 Link to this post

    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>
  5. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 17 Jul 2013 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready