How to use the new TouchScrollExtender?

5 posts, 1 answers
  1. Christian Robert Schulz
    Christian Robert Schulz avatar
    2 posts
    Member since:
    Jun 2010

    Posted 13 Nov 2010 Link to this post

    I'm wondering how to use the new TouchScrollExtender - could someone post an example- code?

    Thank you!
  2. Answer
    Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 17 Nov 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ethan
    Ethan avatar
    3 posts
    Member since:
    Oct 2007

    Posted 17 Dec 2010 Link to this post

    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>


  5. Mike
    Mike avatar
    26 posts
    Member since:
    Jul 2008

    Posted 17 Dec 2010 Link to this post

    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)

  6. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 23 Dec 2010 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017