ASP.NET

Responsive GridView in ASP.Net

A GridView control provides a Responsive Design and is easy with a fast and responsive development Bootstrap framework.



So, let's proceed with the following procedure.

  • Package Manager Console

PM > Install-Package Twitter.Bootstrap.Bootswatch.Cosmo

  • Grid view Control and Data Binding

HeaderStyle-CssClass=" " ItemStyle-CssClass=" "

  • Bootstrap Responsive Classes

Table table-striped table-bordered table-hover



Create a new project using "File" -> "New" -> "Project..." then select Web then select "ASP.Net Web Forms Application". Name it “GridviewResponsive".



For the new ASP.NET Project select Empty template then select the Web Forms checkbox then click OK.



In the Design Source write the code as in the following.

Default.aspx

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="GridviewResponsive.Default" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head>  
  7.     <title>Responsive GridView in ASP.NET</title>  
  8.     <meta charset="utf-8" />  
  9.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
  10.     <link href="Content/bootstrap.cosmo.min.css" rel="stylesheet" />  
  11.     <link href="Content/StyleSheet.css" rel="stylesheet" />  
  12.   
  13. </head>  
  14. <body>  
  15.     <form id="form1" runat="server">  
  16.         <br />  
  17.         <div id="mainContainer" class="container">  
  18.             <div class="shadowBox">  
  19.                 <div class="page-container">  
  20.                     <div class="container">  
  21.                         <div class="jumbotron">  
  22.                             <p class="text-danger">Responsive GridView in ASP.NET </p>  
  23.                             <span class="text-info">Desktop Tablet Phone Different layout </span>  
  24.                         </div>  
  25.                         <div class="row">  
  26.                             <div class="col-lg-12 ">  
  27.                                 <div class="table-responsive">  
  28.                                     <asp:GridView ID="grdCustomer" runat="server" Width="100%" CssClass="table table-striped table-bordered table-hover" AutoGenerateColumns="False" DataKeyNames="CustomerID" EmptyDataText="There are no data records to display.">  
  29.                                         <Columns>  
  30.                                             <asp:BoundField DataField="CustomerID" HeaderText="CustomerID" ReadOnly="True" SortExpression="CustomerID" />  
  31.                                             <asp:BoundField DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName" HeaderStyle-CssClass="visible-lg" ItemStyle-CssClass="visible-lg" />  
  32.                                             <asp:BoundField DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName" ItemStyle-CssClass="visible-xs" HeaderStyle-CssClass="visible-xs" />  
  33.                                             <asp:BoundField DataField="ContactTitle" HeaderText="ContactTitle" SortExpression="ContactTitle" HeaderStyle-CssClass="visible-md" ItemStyle-CssClass="visible-md" />  
  34.                                             <asp:BoundField DataField="Address" HeaderText="Address" SortExpression="Address" ItemStyle-CssClass="hidden-xs" HeaderStyle-CssClass="hidden-xs" />  
  35.                                             <asp:BoundField DataField="City" HeaderText="City" SortExpression="City" ItemStyle-CssClass="hidden-xs" HeaderStyle-CssClass="hidden-xs" />  
  36.                                             <asp:BoundField DataField="Region" HeaderText="Region" SortExpression="Region" HeaderStyle-CssClass="visible-md" ItemStyle-CssClass="visible-md" />  
  37.                                             <asp:BoundField DataField="PostalCode" HeaderText="PostalCode" SortExpression="PostalCode" HeaderStyle-CssClass="visible-lg" ItemStyle-CssClass="visible-lg" />  
  38.                                             <asp:BoundField DataField="Country" HeaderText="Country" SortExpression="Country" HeaderStyle-CssClass="visible-md" ItemStyle-CssClass="visible-md" />  
  39.                                             <asp:BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone" HeaderStyle-CssClass="visible-lg" ItemStyle-CssClass="visible-lg" />  
  40.                                         </Columns>  
  41.                                     </asp:GridView>  
  42.                                 </div>  
  43.                             </div>  
  44.                         </div>  
  45.                     </div>  
  46.                 </div>  
  47.             </div>  
  48.         </div>  
  49.     </form>  
  50. </body>  
  51. </html>  
In the code behind write the code as in the following.

Default.aspx.cs
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7.   
  8. namespace GridviewResponsive  
  9. {  
  10.       public partial class Default : System.Web.UI.Page  
  11.       {  
  12.             NorthwindDataContext dc = new NorthwindDataContext();  
  13.             protected void Page_Load(object sender, EventArgs e)  
  14.             {  
  15.                   var qry = from s in dc.Customers  
  16.                   select s;  
  17.                   grdCustomer.DataSource = qry;  
  18.                   grdCustomer.DataBind();  
  19.             }  
  20.       }  
  21. }  
Now run the page, it will look like the following Desktop layout.



Now run the page, it will look like the following Tablet layout.



Now run the page, it will look like the following Phone layout.



I hope this article is useful. If you have any other questions then please provide your comments below.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs