The Most Mobile-Friendly Grid for Your Responsive ASP.NET Web Forms Apps

Your next web project begins and one of its objectives is to target users on mobile devices, just as well as those on a desktop. One of the controls used in almost every application is the datagrid and datagrids are everything but user-friendly on small screen resolutions. No need to sweat it, though, because Telerik ASP.NET Grid control features UX tailored for different screen sizes and is the most advanced solution for responsive Web Forms websites on the market. Here’s what we do differently.

Before We Start

Just a sidenote: all you have to do to leverage the Grid’s mobile-friendly functionalities is set its RenderMode property to Auto.

This turns on the control’s smart rendering, and it will render the UI optimized for the screen size on which it’s being served.

UI Tailored for Touch

Larger Clickable Areas

One of the requirements for a mobile-friendly site is to provide larger clickable areas, because visitors use their fingers instead of a mouse. Microsoft recommends designing your touch areas to be 40 pixels or wider with at least 10 pixels between targets. This is why Telerik Grid comes with four ready-to-use skins built with touch in mind: MetroTouch, BlackMetroTouch, Silk and Glow.

Support for Gestures

In addition to visitors being able to tap instead of click, they also need to be able to use the gestures they are used to on mobile devices. RadGrid for ASP.NET AJAX supports two-finger swipe, so users can move between pages, as well as double clicking on a row, reordering items and columns and more.

Native-Like User Experience

By default, Telerik Grid renders native HTML5 controls on mobile devices, which has a few benefits over using custom controls:

1. Native-like user experience people are familiar with
2. Performance improvements–native browser implementation of controls will always be faster
3. Lower number of resources that need to load–on a slow mobile network that could save your users precious seconds

Here is a list with the native controls that the Grid uses under mobile:

• HTML5 range input instead of RadRating
• HTML5 date input instead of RadDatePicker
• HTML5 number input instead of RadNumericTextBox
• HTML select element instead of RadComboBox and RadDropDownList

UX Tailored for Different Screen Sizes

To provide an optimal user experience on every device, Telerik Grid features different rendering for desktop and mobile devices. This is why the control features separate dedicated views for most common actions, such as editing, filtering, grouping, exporting and more.

Editing

By default the editing experience on mobile devices is the same as the one on desktops, because in some cases it’s better to feature the same user experience in both devices. However, for a more native-like experience, you can set the editing to happen in a separate view:

Filtering

When users tap on the filtering icon, rather than opening a dropdown, RadGrid takes them to a separate filtering view for easier configuration. The filtering view enables users to perform even advanced filter queries.

Showing, Hiding and Reordering Columns

If users were to show and hide or reorder Grid columns on a desktop device, they would expect to do it via a context menu and drag and drop. Both of these options are not optimal on mobile devices and this is where the dedicated RadGrid view is very useful:

If you as a developer want to make sure no unnecessary content gets served in the Grid on a mobile device, you can use Telerik Device Detection Framework to tell you what screen size the Grid is served on (small, medium, large or extra large) and specify exactly which columns to show on which type of screen resolution. Take a look at the example below, which hides a column when the width of the device is smaller than 650 pixels (small).

Grouping

It’s hard to enable users to group data on mobile, because groups take a lot of space. Instead of showing all groups at all times, Telerik Grid displays a button “View Groups,” thus enabling users to manage them without wasting precious space.

Export

The exporting user experience is consistent with the rest and happens in a separate view:

Try for Yourself

RadGrid’s optimized-for-mobile look and feel is the best Web Forms solution on the market. We did the same UX overhaul for other important Telerik ASP.NET UI controls, such as the Scheduler, Menu, Media Player, LightBox and more. Grab your phone or tablet and scan the QR below to test the showcased features yourself. Don’t forget to let us know what you think!

Scan the QR code to test the behavior of our controls on mobile devices.