How to navigate anchor link in Kendo SplitView

2 posts, 0 answers
  1. Christian
    Christian avatar
    6 posts
    Member since:
    Dec 2013

    Posted 04 Feb 2014 Link to this post


    I'm trying to create a mobile test script of an iOS mobile hybrid app. 
    The UIWebView has a navigation section that uses a Kendo SplitView. (see below)
    I'm trying to click the link 'bInfo' below using the mobile test command{'id':'bInfo'}) but I'm unable to navigate to the new page.
    I assume it has to do with the fact that this is an Ajax call. However, when I click the link manually it works fine.
    Can you provide me with the correct way to navigate the link?




        <div data-role="splitview" data-init="initSplitView">

            <div data-role="pane" id="menuPane" data-layout="side-default" data-transition="slide" style="max-width:20%">

                <div data-role="view" data-title="H1700-1" id="side-root">

                    <ul data-role="listview" data-style="inset" data-click="listViewClick">

                        <li class="navLink"><a id="aIdentity" href="1700-1-A-Identity.html" data-target="main-pane">A. Identity</a></li>

                        <li class="navLink"><a id="bInfo" href="1700-1-B-Info.html" data-target="main-pane">B. Info this is the test</a></li>

                        <li class="navLink"><a href="1700-1-C-Costs.html" data-target="main-pane">C. Costs</a></li>

                        <li class="navLink"><a href="1700-1-D-Signature.html" data-target="main-pane">D. Signature</a></li>



                <div data-role="layout" data-id="side-default">

                    <div data-role="header">

                        <div data-role="navbar" style="background-image: url('../../Img/title-bar-left.png'); background-repeat:no-repeat; background-size: 100% 60px;">

    <!--                        <a id="back-button" class="nav-button" data-align="left"

                                data-role="backbutton" style="color:white">Back</a>-->

                            <span data-role="view-title" style="color:white"></span>





            <div data-role="pane" id="main-pane" data-layout="main-default" data-transition="slide" data-initial="1700-1-A-Identity.html">

    <!--            <div data-role="view" data-title="Main">

                    <div style="color: gray; text-align: center; "><div style="font-size: 160px; opacity: 0.2">mCare</div><div style="font-size: larger; opacity: 0.25; font-weight: bold; ">Select a category from the sidebar to begin</div></div>


                <div data-role="layout" data-id="main-default">

                    <div data-role="header">

                        <div data-role="navbar" style="background-image: url('../../Img/title-bar-right.png'); background-repeat:no-repeat; background-size: 100% 60px;">

                            <span data-role="view-title" id="main-pane-title" style="color:white"></span>

                            <a data-role="button" data-align="right" data-click="onLoadButtonClick" style="color:white">Load</a>

                            <a data-role="button" data-align="right" data-click="onSaveButtonClick" style="color:white">Save</a>






        <style scoped>

    .required-field {

    color: #23a7b3;




  2. Anthony
    Anthony avatar
    19 posts

    Posted 10 Feb 2014 Link to this post

    Hello Chris,

    Our API still has a few shortcomings, like full KendoUI support, so the proper events aren't being called with in this case.

    Instead, use executeScript to call the events:

    web.executeScript('$(targetElement).trigger("touchstart").trigger("touchend");', {'id':'bInfo'});

    Test your Android and iOS apps against any device or browser with Telerik Mobile Testing. Part of the Telerik Platform.
Back to Top