Progress® Kendo UI® for jQuery Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 12 Oct 2023 15:21 by ADMIN
KM
Created on: 15 Jan 2020 14:11
Category: View (Mobile)
Type: Bug Report
0
swipe to change view

I am using Layout and View....

 

How to I change view by swiping ?

6 comments
ADMIN
Martin
Posted on: 20 Jan 2020 12:10

Hello,

Thank you for sharing the code snippet. The reported behavior is a bug, so I have converted this thread to a bug report. You will find the thread in our Feedback Portal. Please follow it for further information when the bug will be fixed.

Regards,
Martin
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
KM
Posted on: 17 Jan 2020 14:34

The direction is correct now..but my first data-icon is still weird...

You try swiping left and then right...you will notice the highlight is not moving back to 'Home'
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Index - Template</title>




<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.default.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/jszip.min.js"></script>
</head>
<body>

    



<styles>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.mobile.all.min.css">
</styles>

<div id="home" data-role="view" data-layout="default">
    Hello Mobile World!
</div>

<div id="globe" data-role="view" data-layout="default">
    GLOBE
</div>

<div id="page3" data-role="view" data-layout="default">
    Page 3
</div>

<div id="page4" data-role="view" data-layout="default">
    Page 4
</div>


<section data-role="layout" data-id="default">

    <header data-role="header">
        <div data-role="navbar">My App</div>
    </header>

    <footer data-role="footer">
        <div data-role="tabstrip" data-animation="false">
            <a data-icon="home" href="#home"></a>
            <a data-icon="globe" href="#globe"></a>
            <a data-icon="pause" href="#page3"></a>
            <a data-icon="play" href="#page4"></a>
            
        </div>
    </footer>

</section>


<script src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>

<script>

      var anchors = $("a").toArray();
      var index = 0;

    var app = new kendo.mobile.Application($(document.body),
       
    );

  $("div[data-role='view']").kendoTouch({ 
        enableSwipe: true, 
        swipe: function (e) { 
          if(e.direction === "right"){
            if(index == 0){
              index = anchors.length - 1;
            }
            else{
              index--;
            }
            app.navigate(anchors[index].hash)

            //alert("Swiping " + e.direction); 
          }else if(e.direction === "left"){
          
            if(index == anchors.length -1){    
              index = 0;
            }
            else{
              index++;
            }
            app.navigate(anchors[index].hash)
           // alert("Swiping " + e.direction); 
          }

        } 
      });

</script>

    

</body>
</html>

ADMIN
Tsvetomir
Posted on: 17 Jan 2020 11:45

Hi,

My name is Tsvetomir and I am temporarily covering for my colleague Martin. 

I have taken a look and I can confirm that the swipe handlers were swapped. I did swap them and it appears that the issue is now resolved. I also updated the styles and scripts of the page to utilize the latest versions.

https://dojo.telerik.com/EhOJUWoF

I hope you find this helpful.

 

Regards,
Tsvetomir
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
KM
Posted on: 17 Jan 2020 02:50

I think there is some issue with the swipe direction...

and my data-icon is not highlighted properly...

ADMIN
Martin
Posted on: 16 Jan 2020 16:29

Hello,

Thank you again for your patience.

On this link you will find a Dojo with a Mobile Views. To change views by swiping, you can define all the divs with data-role=view as Kendo Touch with swipe configuration set to true:

$("div[data-role='view']").kendoTouch({ 
        enableSwipe: true, 
        swipe: function (e) {

In the swipe event, you can use the navigate event of the Kendo Application to change the views.

Please review the project and let me know if it works for you.

Regards,
Martin
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
ADMIN
Martin
Posted on: 16 Jan 2020 14:09

Hello,

I am currently reviewing your question. I will get back to you shortly with information about a possible approach to handle the scenario.

Thank you for your patience.

Regards,
Martin
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Create an account Log In
View
Type
Status
Category