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

How to use the new TouchScrollExtender?

4 Answers 123 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Christian Robert Schulz
Top achievements
Rank 1
Christian Robert Schulz asked on 13 Nov 2010, 05:27 PM
I'm wondering how to use the new TouchScrollExtender - could someone post an example- code?

Thank you!

4 Answers, 1 is accepted

Sort by
0
Accepted
Kamen Bundev
Telerik team
answered on 17 Nov 2010, 07:07 PM
Hello Christian,

I've just published a blog post about it here.

Best wishes,
Kamen Bundev
the Telerik team
Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
Ethan
Top achievements
Rank 1
answered on 17 Dec 2010, 06:45 PM
Hello Kamen,

Is there a code example of how to do this?  I could not get it to work with other Telerik controls, so I tried to make my own example with the below .aspx page and 2010 Q3 SP1 (2010.3.1215.35).  It works in that the containers scroll on an iPad, but when the touch is lifted, this error occurs: "TypeError: Result of expression 'c.easing[this.options.specialEasing&&this.options.specialEasing..."  Is there something that I am missing?  Thanks.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Test.aspx.vb" Inherits="Test" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
   
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head id="Head1">
    <style type="text/css">
        .simpleContainer
        {
            position: relative;
            left: 50%;
            margin-left: -240px;
            width: 480px;
            height: 300px;
            font: 11px Arial, Helvetica, sans-serif;
            overflow: auto;
            border: 1px solid #9CF;
        }
   
        .simpleContainer span
        {
            display: block;
            padding-left: 10px;
            height: 30px;
            vertical-align: middle;
            line-height: 30px;
            border-bottom: 1px solid #CCC;
            background: #FFF;
        }
   
        .simpleContainer1 span
        {
            width: 200%;
        }
   
        .simpleContainer span:nth-child(2n)
        {
            background: #EEE;
        }
   
        .simpleContainer .lastItem
        {
            border-bottom: 0;
        }
    </style>
    <script type="text/javascript">
        var touchScroll = false;
  
        function initializeExtender() {
            if (!touchScroll) {
                touchScroll = new Telerik.Web.UI.TouchScrollExtender('body', { autoScan: true });
                touchScroll.initialize();
            }
        }
  
        function initializeMobile() {
            if (Telerik.Web.UI.TouchScrollExtender._getNeedsScrollExtender() && !touchScroll) {
                touchScroll = new Telerik.Web.UI.TouchScrollExtender('body', { autoScan: true });
                touchScroll.initialize();
            }
        }
    </script>
</head>
<body>
    <button onclick="initializeMobile()">Initialize Mobile Browsers</button>
    <button onclick="initializeExtender()">Initialize All Browsers</button>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    <Scripts>
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <%--<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />--%>
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.TouchScrollExtender.js" />
    </Scripts>
   
    </telerik:RadScriptManager>
      
<div>
        <div class="simpleContainer simpleContainer1">
            <span>Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 </span>
            <span>Test 2 Test 2 Test 2 Test 2 Test 2 Test 2 Test 2 Test 2 </span>
            <span>Test 3 Test 3 Test 3 Test 3 Test 3 Test 3 Test 3 Test 3 </span>
            <span>Test 4 Test 4 Test 4 Test 4 Test 4 Test 4 Test 4 Test 4 </span>
            <span>Test 5 Test 5 Test 5 Test 5 Test 5 Test 5 Test 5 Test 5 </span>
            <span>Test 6 Test 6 Test 6 Test 6 Test 6 Test 6 Test 6 Test 6 </span>
            <span>Test 7 Test 7 Test 7 Test 7 Test 7 Test 7 Test 7 Test 7 </span>
            <span>Test 8 Test 8 Test 8 Test 8 Test 8 Test 8 Test 8 Test 8 </span>
            <span>Test 9 Test 9 Test 9 Test 9 Test 9 Test 9 Test 9 Test 9 </span>
            <span>Test 10 Test 10 Test 10 Test 10 Test 10 Test 10 Test 10 </span>
            <span>Test 11 Test 11 Test 11 Test 11 Test 11 Test 11 Test 11 </span>
            <span>Test 12 Test 12 Test 12 Test 12 Test 12 Test 12 Test 12 </span>
            <span>Test 13 Test 13 Test 13 Test 13 Test 13 Test 13 Test 13 </span>
            <span>Test 14 Test 14 Test 14 Test 14 Test 14 Test 14 Test 14 </span>
            <span>Test 15 Test 15 Test 15 Test 15 Test 15 Test 15 Test 15 </span>
            <span>Test 16 Test 16 Test 16 Test 16 Test 16 Test 16 Test 16 </span>
            <span>Test 17 Test 17 Test 17 Test 17 Test 17 Test 17 Test 17 </span>
            <span>Test 18 Test 18 Test 18 Test 18 Test 18 Test 18 Test 18 </span>
            <span>Test 19 Test 19 Test 19 Test 19 Test 19 Test 19 Test 19 </span>
            <span class="lastItem">Test 20 Test 20 Test 20 Test 20 Test 20 Test 20 Test 20 </span>
        </div>
          
      
 </div>
</form>
      
</body>
</html>


0
Mike
Top achievements
Rank 2
answered on 17 Dec 2010, 09:38 PM
Sample source code would be greatly appreciated.  I tried using it as well, but I'm getting a similar error:

Line: 997
Error: Object doesn't support this property or method

Debug:
this.pos=c.easing[this.options.specialEasing&&this.options.specialEasing[this.prop]||b](this.state,a,0,1,this.options.duration)

0
Kamen Bundev
Telerik team
answered on 23 Dec 2010, 03:44 PM
Hi Ethan,

The easings are defined in the Telerik.Web.UI.Common.jQueryPlugins.js library, so you need to include that too in order to get the TouchScrollExtender to work. Thank you for noticing this, I will update your Telerik points for it and the blog post to mention the file specifically.

Best wishes,
Kamen Bundev
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Tags
General Discussions
Asked by
Christian Robert Schulz
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Ethan
Top achievements
Rank 1
Mike
Top achievements
Rank 2
Share this question
or