Telerik blogs

We here at Telerik always strive to help you deliver applications leveraging the latest and greatest industry trends from the moment that they are released. With touch-enabled devices gaining more popularity by each passing day, we surely don’t want you to miss out on the opportunity to build applications leveraging this exciting technology. Android, iOS and now even Windows 8 devices – they all use touch as their primary way of interaction. Some of you might even be reading this very post with one of these devices! What about your favorite set of ASP.NET AJAX controls?

Tap and touch are the new click

First things first, the Telerik’s ASP.NET AJAX controls work perfectly fine on these devices. I actually demo the controls off of my phone (Android) when I’m on the go. While this isn’t always a huge hit in bars, it definitely helps when I’m caught away from the booth at conferences ;) All of our controls support touch and drag gestures, which end up being the way all users will interact with elements on their devices. If you haven’t already, I recommend going over to the RadControls for ASP.NET AJAX demo page and playing around with the controls on one of these devices. Keep in mind that when creating applications specifically targeting mobile devices you might now want to necessarily create the exact same page for mobile browsers as you would with a desktop (tiny screens = LOTS of scrolling).However, you can still benefit from the same power you are used to when navigating to a page utilizing the RadControls, just in a smaller format.

What is the magic that goes into all of this? Well the controls utilize two client-side components, created here at Telerik, called TouchScrollExtender and Resize and Drag Extender.

The TouchScrollExtender control, as the name gives away, helps when dealing with scrolling on touch-enabled devices. This is applied to both horizontal and vertical scrolling. This little assistant library is already included in our controls, but you can even utilize it by itself if you so desire! For more information about it you can look over the TouchScrollExtender documentation article. It even has a nice little demo linked at the end which allows you to see it in action. I recommend using a tablet or mobile device for the demo to make the most sense :)

The Resize and Drag Extender deals with, as the name gives away, resizing and dragging within the mobile browsers. Just like with TouchScrollExtender this is included in our controls but can also be used on its own. The best place to learn more about this component is the Resize and Drag Extender documentation article.

These two components combined, as well as some tweaks within the code of individual ASP.NET AJAX controls as well, has led to the ability for you to use the Telerik RadControls for ASP.NET AJAX on your favorite touch-enabled device!

The proof is in the pudding

While I can talk (or well write) all day about how we have support for this and that, I feel like the best way to display this power is by showing you a couple of quick examples. I dusted off (or truth be told, polished) the good ole’ iPad and shot a video of me playing around with some of the controls. Keep in mind that these are only a subset of the controls so these aren’t the only ones that work on these devices. Although this video only shows iOS support you should have the same experience navigating to these demos on any Android tablet you might have handy.

Touch Support for RadControls for ASP.NET AJAX

So there you have it! Telerik’s ASP.NET AJAX controls are awesome enough to have touch support enabled out of the box, so you can feel free to start using them in web pages without worrying if mobile device users will have issues interacting with them. On that note, if you currently are using our ASP.NET AJAX controls in an application that mobile device users are accessing, feel free to share your experiences in the comments below!


Carl Bergenhem
About the Author

Carl Bergenhem

Carl Bergenhem was the Product Manager for Kendo UI.

Comments

Comments are disabled in preview mode.