Click here to Skip to main content
15,867,308 members
Articles / Web Development / ASP.NET / ASP.NET4.0

Add Responsive Behaviour to a GridView in ASP.NET

Rate me:
Please Sign up or sign in to vote.
4.90/5 (26 votes)
28 Apr 2014CPOL4 min read 176K   7K   52   21
A technique which ensures that an ASP.NET GridView displays nicely on small screen devices.

Introduction

The <code><code>GridView is a convenient control for displaying tabular data with ASP.NET web forms. When used in web applications which target the desktop browser it works very well, however, the user experience is not always optimal when using these same applications on smaller screen devices such as tablets and phones. Tables of data are usually quite wide and they don't scale down very well for small screens. The page layout can get messed up and the user often has to zoom in and out and scroll around the screen to use the application.

Responsive web design provides techniques for building web pages which can be viewed on any screen size, this article describes one of the techniques for displaying tabular data and shows how it can be applied to a GridView.

Background

Mobile devices are being used more frequently to access web applications and users expect to have a good experience while using them, unfortunately, existing projects don't always have the time or resources to develop a dedicated mobile client app or a dedicated mobile web application. The best we can do in this scenario is to spend some time refactoring and to apply some responsive web design techniques, with careful planning, these changes can greatly improve the user experience with minimal effort.

Responsive Design Patterns

Several patterns have emerged to help solve the problem of wide data tables on small screens, one of these patterns keeps the first few columns in place and allows the others to flow underneath. Priority columns and action buttons on the left and right are visible when the table loads and the user can scroll horizontally to view the other columns as required. This pattern works well on the desktop and on touch enabled mobile devices.

The Responsive Table jQuery Plugin can be used to apply this pattern to a GridView, the appearence of the GridView is not altered dramatically when the repsonsive behaviour is triggered therefore any user who already uses the web application on the desktop will feel familiar with it on a small screen device.

Image 1

Setting up the Page

When applying responsive design techniques, we want to control how the page will be displayed on a small screen device. Adding a viewport meta tag to the page header will prevent the page from being scaled to a mobile browsers default viewport size. This will also prevent the user from pinch zooming so ensure that you set a reasonable font size so that zooming is not required.

HTML
<meta name="viewport" 
    content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width"> 

Setting up the GridView

We also want to control how the GridView behaves when it exceeds the width of its container therefore we need to prevent it from changing in the normal flow of the page. If the table data contains white spaces then these cells will wrap when the table width is reduced, to prevent this from happening there are two options:

1. Set the RowStyle-Wrap property on the GridView to false:

ASP.NET
<asp:GridView runat="server" RowStyle-Wrap="false">

2. Or add some CSS:

CSS
table th, table td { white-space: nowrap; }

Setting up the Responsive Table jQuery Plugin

Add jQuery to your page and then add the jquery.responsivetable.min.js plugin script:

HTML
<script src="scripts/jquery.responsivetable.min.js"></script> 

Call the responsive table plugin from within a jQuery document ready function, there are also some options which can be set:

JavaScript
$(document).ready(function() {
    // Default settings
    $('.myTable1').responsiveTable();
    // Custom settings
    $('.myTable2').responsiveTable({
        staticColumns: 2, 
        scrollRight: true, 
        scrollHintEnabled: true, 
        scrollHintDuration: 2000
    });
});  

You do not have to set any predefined breakpoints, the code automatically detects when the GridView is about to overflow its container.

Responsive Table jQuery Plugin Options

  • staticColumns: The number of columns to remain static when the plugin is triggered, default is 1
  • scrollRight: Scroll the overflow table to the right, default is true
  • scrollHintEnabled: Display a hint to the user that the table content can be scrolled left and right, default is true
  • scrollHintDuration: The duration in milliseconds which the hint is displayed, default is 2000

Using the Responsive Table plugin with an ASP.NET UpdatePanel

If the GridView is inside an UpdatePanel then the plugin must be called at the end of an async call as the GridView's HTML will have been replaced in the DOM. You can achieve this by registering a callback with the ASP.NET AJAX PageRequestManager:

JavaScript
$(window).on('load', function () {
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endUpdatePanelRequest);
});
 
function endUpdatePanelRequest() {
    // Setup the responsive gridview ...
} 

References:

Conclusion

If you need a GridView to display nicely on a small screen device then this technique may be useful.

History

  • v1.0 - 17th Feb 2013
  • v1.1 - 19th Feb 2013 - Updated description and source
  • v1.2 - 28th Apr 2014 - Updated plugin to latest version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Chief Technology Officer
Ireland Ireland
I have been designing and developing business solutions for the aviation, financial services, healthcare and telecommunications industries since 1999. My experience covers a wide range of technologies and I have delivered a variety of web and mobile based solutions.

Comments and Discussions

 
QuestionNot working in all mobile Browser Perfectly Pin
TCS543212-Dec-16 19:54
TCS543212-Dec-16 19:54 
PraiseAwesome Brother... Very Nice Article and Demo. Pin
Member 1052739317-Jan-16 19:11
Member 1052739317-Jan-16 19:11 
QuestionI cannot get my GridView Responsive Pin
Member 1187503013-Nov-15 7:46
Member 1187503013-Nov-15 7:46 
BugSomething is eating my padding in the fix columns Pin
moNTeZIon21-Jul-15 1:38
moNTeZIon21-Jul-15 1:38 
QuestionPager style broken Pin
Durjoy399-Jun-15 6:01
Durjoy399-Jun-15 6:01 
BugNice but few issue Pin
sushiljadhav13-Mar-15 2:43
sushiljadhav13-Mar-15 2:43 
QuestionError in jQuery file :( Pin
842144133313-Jan-15 22:41
professional842144133313-Jan-15 22:41 
AnswerRe: Error in jQuery file :( Pin
Declan Bright15-Jan-15 4:24
Declan Bright15-Jan-15 4:24 
GeneralRe: Error in jQuery file :( Pin
842144133318-Jan-15 17:05
professional842144133318-Jan-15 17:05 
QuestionEdit javascript to detect and remove a bootstrap class Pin
Julie Carlson17-Dec-14 4:32
Julie Carlson17-Dec-14 4:32 
GeneralThanks Huge! Pin
Julie Carlson12-Dec-14 2:41
Julie Carlson12-Dec-14 2:41 
QuestionNice article Pin
RahulMGunjal29-Apr-14 3:03
RahulMGunjal29-Apr-14 3:03 
AnswerRe: Nice article Pin
842144133313-Jan-15 22:42
professional842144133313-Jan-15 22:42 
QuestionSolution For responsive grid View in asp.net Pin
sajiddesigner30-Jan-14 1:39
sajiddesigner30-Jan-14 1:39 
BugGetting erro while running demo Pin
KARTHICKEYANRAJU16-Jan-14 23:13
KARTHICKEYANRAJU16-Jan-14 23:13 
QuestionGetting error when i try to run the code sample Pin
r_mcl3-Oct-13 22:40
r_mcl3-Oct-13 22:40 
QuestionIt's exactly what I want but I can't use it... help Pin
Bernie Greene10-Jul-13 11:13
Bernie Greene10-Jul-13 11:13 
SuggestionRe: It's exactly what I want but I can't use it... help Pin
Declan Bright10-Jul-13 21:18
Declan Bright10-Jul-13 21:18 
GeneralRe: It's exactly what I want but I can't use it... help Pin
Bernie Greene11-Jul-13 1:27
Bernie Greene11-Jul-13 1:27 
Thanks for the fast reply and advice. I'll try those suggestions.
GeneralMy vote of 5 Pin
Member 1051082221-Feb-13 19:01
professionalMember 1051082221-Feb-13 19:01 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.