Telerik blogs

As most of you already know (at least those that have been using Mobile Safari lately), scrolling containers support in Mobile Safari is kind of limited. They are rendered with overflow: hidden and with no scrollbars and can only be scrolled with a two finger swipe gesture. Since several of our controls happen to use such scrollbars for scrolling, we set out to create a small extender that can take care of this issue more or less gracefully.

Meet the TouchScrollExtender

The TouchScrollExtender is a small self-sustained client-only control that depends only on core.js and the built-in jQuery in RadControls for ASP.NET AJAX. It should work in all browsers regardless if they are desktop or mobile (except the browsers that lack the needed desktop or touch events - Mobile Operas and IEs, I mean YOU!). In this release Mobile Firefox 4 is not supported as it is still in beta and supports only the Mozilla type of touch events.

In Q3 2010 the TouchScrollExtender should be automatically enabled in mobile browsers for the following controls: RadComboBox, RadListBox, RadGrid, RadToolTip, RadWindow, RadDock, RadSplitter and RadXmlHttpPanel.

When you see it in action, you will notice that the TouchScrollExtender misses the fancy dragging the contents outside of their bounds and the automatic adjustment after you lift your finger which you may see in the native iOS controls. This is a feature we skipped on purpose - it can't be done without adding additional element(s) between the container and the scrollable content - an approach which often introduces more problems than gains.

Initialization

If you use the TouchScrollExtender separately, you will first need to reference its external libraries using a RadScriptManager, like this:

<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.jQueryPlugins.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.TouchScrollExtender.js" />
    </Scripts>
</telerik:RadScriptManager>

TouchScrollExtender can be initialized whenever needed and requires only a target parameter. There's a second optional parameter for additional settings. The simplest initialization looks something like this:

var touchScroll = false;
 
if (Telerik.Web.UI.TouchScrollExtender._getNeedsScrollExtender() && !touchScroll) {
    touchScroll = new Telerik.Web.UI.TouchScrollExtender( element );
    touchScroll.initialize();
}

This example will initialize the element for touch scrolling in all desktop or mobile browsers. The element can be a simple DOM element, a CSS selector(s) or directly a jQuery selection. You can pass a second argument to Telerik.Web.UI.TouchScrollExtender - an object with several settings:

  • autoScan - by default false, if you set this option to true, TouchScrollExtender will scan all elements inside the selected ones and if they have overflow: scroll or auto - will add them to the list of elements to initialize,
  • showScrollHints - by default true, this option controls if scroll hints will be shown while scrolling.

For instance you can add scrolling containers to the body element and all scrolling content automatically in all mobile browsers by using this initialization:

var touchScroll = false;
 
function initializeMobile() {
    if (Telerik.Web.UI.TouchScrollExtender._getNeedsScrollExtender() && !touchScroll) {
        touchScroll = new Telerik.Web.UI.TouchScrollExtender( 'body', { autoScan: true } );
        touchScroll.initialize();
    }
}

You can see above that we are checking for mobile browsers using an internal _getNeedsScrollExtender() method that currently only checks if the browser is iOS or Android Mobile Safari and returns true. Further as more mobile browsers appear we can extend this check or alternatively you can override it to your liking by placing something like this directly after your script manager:

Telerik.Web.UI.TouchScrollExtender._getNeedsScrollExtender = function() {
    return $telerik.isMobileSafari || $telerik.isAndroid;
};

This is all that is to be said about the TouchScrollExtender. Check the demo page here.

Extending RadScheduler

Due to limited time, RadScheduler was not internally touch extended in Q3 2010, so if you need it, you can do it manually. This is done similarly to the above examples:

var touchScroll = false;
 
function initializeScheduler() {
    if (Telerik.Web.UI.TouchScrollExtender._getNeedsScrollExtender() && !touchScroll) {
        touchScroll = new TouchScrollExtender( '.rsContentScrollArea' );
        touchScroll.initialize();
        $telerik.$('.rsInnerFix').css('margin-right', 0);
    }
}

Call this function whenever you need it, for instance in pageLoad().

You can also assign the RadScheduler context menu to left click by adding these two handlers to OnClientTimeSlotClick and OnClientAppointmentClick events:

function timeSlotClick(sender, args) {
    sender.raise_timeSlotContextMenu(args);
}
 
function appointmentSlotClick(sender, args) {
    sender.raise_appointmentContextMenu(args);
}

You won't need this fix when Q3 2010 SP1 rolls out in several weeks.


About the Author

Iana Tsolova

is Product Manager at Telerik’s DevTools division. She joined the company back in the beginning of 2008 as a Support Officer and has since occupied various positions at Telerik, including Senior Support Officer, Team Lead at one of the ASP.NET AJAX teams and Technical Support Director. Iana’s main interests are web development, reading articles related to geography, wild nature and latest renewable energy technologies.

Comments

Comments are disabled in preview mode.