Post
Ask Question

Responsive GridView Using DataTables Plug-in

Introduction

In this article, we will learn how to make an ASP GridView responsive using jQuery based DataTables plug-in.

Nowadays every website is made responsive. Most of the web developers are familiar with responsive websites but still, there are some beginners who don't know much about responsive websites. So, beginners, in simple terms, a responsive website is one that is compatible with different devices having different screen resolutions, like desktop, laptop, tablet, and mobile etc. The website is adapted to have the best viewing experience in all the above devices without any horizontal scrollings and all. This is achieved mainly with the help of CSS, HTML 5, and jQuery.

One of the major headaches in making a website responsive is to manage the HTML tables. So, here is a plug-in built on jQuery to manage the tables and make them responsive, the DataTables plug-in. So in our article, we are going to make a GridView responsive using DataTables plug-in. Before going to that, let's see how to make a simple HTML table responsive using DataTables plug-in.

Responsive HTML tables using DataTables

Consider an HTML table as shown below that contains Employee details.
  1. <table id="mytable" cellpadding="5" border="1" cellspacing="0" width="100%">  
  2.     <thead>  
  3.         <tr>  
  4.             <th>  
  5.                 Employee Code  
  6.             </th>  
  7.             <th>  
  8.                 Employee Name  
  9.             </th>  
  10.             <th>  
  11.                 Employee Age  
  12.             </th>  
  13.             <th>  
  14.                 Designation  
  15.             </th>  
  16.             <th>  
  17.                 Experience  
  18.             </th>  
  19.         </tr>  
  20.     </thead>  
  21.     <tbody>  
  22.         <tr>  
  23.             <td>  
  24.                 10011  
  25.             </td>  
  26.             <td>  
  27.                 Rajeev  
  28.             </td>  
  29.             <td>  
  30.                 31  
  31.             </td>  
  32.             <td>  
  33.                 Developer  
  34.             </td>  
  35.             <td>  
  36.                 6  
  37.             </td>  
  38.         </tr>  
  39.         <tr>  
  40.             <td>  
  41.                 10012  
  42.             </td>  
  43.             <td>  
  44.                 Sandhya  
  45.             </td>  
  46.             <td>  
  47.                 27  
  48.             </td>  
  49.             <td>  
  50.                 Tester  
  51.             </td>  
  52.             <td>  
  53.                 2  
  54.             </td>  
  55.         </tr>  
  56.         <tr>  
  57.             <td>  
  58.                 10013  
  59.             </td>  
  60.             <td>  
  61.                 Ramesh  
  62.             </td>  
  63.             <td>  
  64.                 25  
  65.             </td>  
  66.             <td>  
  67.                 Designer  
  68.             </td>  
  69.             <td>  
  70.                 1  
  71.             </td>  
  72.         </tr>  
  73.         <tr>  
  74.             <td>  
  75.                 10014  
  76.             </td>  
  77.             <td>  
  78.                 Sanjay  
  79.             </td>  
  80.             <td>  
  81.                 32  
  82.             </td>  
  83.             <td>  
  84.                 Developer  
  85.             </td>  
  86.             <td>  
  87.                 5  
  88.             </td>  
  89.         </tr>  
  90.         <tr>  
  91.             <td>  
  92.                 10015  
  93.             </td>  
  94.             <td>  
  95.                 Ramya  
  96.             </td>  
  97.             <td>  
  98.                 23  
  99.             </td>  
  100.             <td>  
  101.                 Developer  
  102.             </td>  
  103.             <td>  
  104.                 1  
  105.             </td>  
  106.         </tr>  
  107.     </tbody>  
  108. </table>  
On viewing in browser, it will be like below.


Also, on mobile browser, it will be as below.



We can clearly see that the last columns are hidden in mobile screen. We need to scroll horizontally for viewing those columns. So now, we are going to make this table responsive. For that, first, add references to the plug-in JS and CSS files in the head section of your page.
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head id="Head1" runat="server">  
  4.     <meta charset="utf-8">  
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  7.     <title>Responsive Table using Datatable plug-in</title>  
  8.     <link href="Files/jquery.dataTables.css" rel="stylesheet" type="text/css" />  
  9.     <link href="Files/responsive.bootstrap.min.css" rel="stylesheet" type="text/css" />  
  10.     <script src="Files/jquery-1.10.2.min.js" type="text/javascript"></script>  
  11.     <script src="Files/jquery.dataTables.js" type="text/javascript"></script>  
  12.     <script src="Files/dataTables.responsive.min.js" type="text/javascript"></script>  
  13. </head>  
Now, we have to add a class "dt-responsive" in our table to make it responsive.
  1. <table id="mytable" cellpadding="5" border="1" cellspacing="0" width="100%" class="dt-responsive">  
Now, we can initialize DataTables for this table.
  1. <script type="text/javascript">  
  2.     $(document).ready(function () {  
  3.         $('#mytable').DataTable({ "paging": false, "ordering": false, "searching": false });  
  4.     });  
  5. </script>  
You can clearly see in the above script that I have given paging, ordering, and searching functionalities as false only because I'm showing here the basic application of DataTables plug-in. If you remove the above options from the script, you can see those functionalities without any additional scripts or CSS. By default, all will be true. 
 
Now, on viewing the page in browser, we can see the change.

In desktop - No change


In mobile - Last columns are hidden.



That's it. Our table is responsive now.

We can view the hidden column by clicking the '+' icon.



Responsive GridView using DataTables plug-in

Now, let's see how to make our GridView responsive using DataTables. The basic idea behind making a GridView responsive is that it is rendered as an HTML table in browsers!!

First, we will replace the HTML table with GridView in our page.
  1. <asp:GridView ID="grdviewnew" runat="server" CellPadding="5" CellSpacing="0" OnRowDataBound="grd_RowDataBound"  
  2.    AutoGenerateColumns="false" Width="100%">  
  3.    <Columns>  
  4.        <asp:TemplateField HeaderText="Employee Code" HeaderStyle-HorizontalAlign="Center">  
  5.            <ItemTemplate>  
  6.                <%#Eval("Employee Code")%>  
  7.            </ItemTemplate>  
  8.        </asp:TemplateField>  
  9.        <asp:TemplateField ItemStyle-HorizontalAlign="Left" HeaderText="Employee Name" HeaderStyle-HorizontalAlign="Center">  
  10.            <ItemTemplate>  
  11.                <%#Eval("Employee Name")%>  
  12.            </ItemTemplate>  
  13.        </asp:TemplateField>  
  14.        <asp:TemplateField ItemStyle-HorizontalAlign="Left" HeaderText="Employee Age" HeaderStyle-HorizontalAlign="Center">  
  15.            <ItemTemplate>  
  16.                <%#Eval("Employee Age")%>  
  17.            </ItemTemplate>  
  18.        </asp:TemplateField>  
  19.        <asp:TemplateField ItemStyle-HorizontalAlign="Left" HeaderText="Designation" HeaderStyle-HorizontalAlign="Center">  
  20.            <ItemTemplate>  
  21.                <%#Eval("Designation")%>  
  22.            </ItemTemplate>  
  23.        </asp:TemplateField>  
  24.        <asp:TemplateField ItemStyle-HorizontalAlign="Left" HeaderText="Experience" HeaderStyle-HorizontalAlign="Center">  
  25.            <ItemTemplate>  
  26.                <%#Eval("Experience")%>  
  27.            </ItemTemplate>  
  28.        </asp:TemplateField>  
  29.    </Columns>  
  30. lt;/asp:GridView>  
Now, we will bind the GridView with the same employee data from C# code.
  1. protected void Page_Load(object sender, EventArgs e)  
  2. {  
  3.     if (!IsPostBack)  
  4.     {  
  5.         BindGrid();  
  6.     }  
  7. }  
  8.   
  9. public void BindGrid()  
  10. {  
  11.     DataTable dt = new DataTable();  
  12.     dt.Columns.Add("Employee Code");  
  13.     dt.Columns.Add("Employee Name");  
  14.     dt.Columns.Add("Employee Age");  
  15.     dt.Columns.Add("Designation");  
  16.     dt.Columns.Add("Experience");  
  17.     DataRow dru = dt.NewRow();  
  18.     dru["Employee Code"] = "10011";  
  19.     dru["Employee Name"] = "Rajeev";  
  20.     dru["Employee Age"] = "31";  
  21.     dru["Designation"] = "Developer";  
  22.     dru["Experience"] = "6";  
  23.     dt.Rows.Add(dru);  
  24.     dru = dt.NewRow();  
  25.     dru["Employee Code"] = "10012";  
  26.     dru["Employee Name"] = "Sandhya";  
  27.     dru["Employee Age"] = "27";  
  28.     dru["Designation"] = "Tester";  
  29.     dru["Experience"] = "2";  
  30.     dt.Rows.Add(dru);  
  31.     dru = dt.NewRow();  
  32.     dru["Employee Code"] = "10013";  
  33.     dru["Employee Name"] = "Ramesh";  
  34.     dru["Employee Age"] = "25";  
  35.     dru["Designation"] = "Designer";  
  36.     dru["Experience"] = "1";  
  37.     dt.Rows.Add(dru);  
  38.     dru = dt.NewRow();  
  39.     dru["Employee Code"] = "10014";  
  40.     dru["Employee Name"] = "Sanjay";  
  41.     dru["Employee Age"] = "32";  
  42.     dru["Designation"] = "Developer";  
  43.     dru["Experience"] = "5";  
  44.     dt.Rows.Add(dru);  
  45.     dru = dt.NewRow();  
  46.     dru["Employee Code"] = "10015";  
  47.     dru["Employee Name"] = "Ramya";  
  48.     dru["Employee Age"] = "23";  
  49.     dru["Designation"] = "Developer";  
  50.     dru["Experience"] = "1";  
  51.     dt.Rows.Add(dru);  
  52.     dt.TableName = "table1";  
  53.     grdviewnew.DataSource = dt;  
  54.     grdviewnew.DataBind();  
  55.  }  
On viewing in browser, it will look like below.

 
On mobile browser, it will be as below.



Clearly, the last columns are hidden on the mobile screen as in the case of HTML table.

Now, to make this GridView responsive, we have to follow the same steps that we followed in the case of HTML table but with a few differences. First, add references to the plug-in files in the head section.

Then, add the class "dt-responsive" to GridView.
  1. <asp:GridView ID="grdviewnew" runat="server" CellPadding="5" CellSpacing="0" OnRowDataBound="grd_RowDataBound"  
  2.             AutoGenerateColumns="false" CssClass="dt-responsive" Width="100%">  
Now, before initializing DataTables plug-in to GridView, we have to write a single but important line of code in the code behind.
  1. grdviewnew.DataSource = dt;  
  2. grdviewnew.DataBind();  
  3. grdviewnew.HeaderRow.TableSection = TableRowSection.TableHeader;  
Note the highlighted line in the above code. After the binding of GridView, we have to call this line of code. Basically, this code makes the GridView group the header row inside a <thead> tag while rendering in browsers. Without this code, the GridView renders the header row inside <tbody> only.

For DataTables plug-in to work, the table must be having header row inside the <thead> tag.

Now, we can initialize the DataTables plugin for this table.
  1. <script type="text/javascript">  
  2.     $(document).ready(function () {  
  3.         $('#<%=grdviewnew.ClientID%>').DataTable({ "paging": false, "ordering": false, "searching": false });  
  4.     });  
  5. </script>  
Now, on viewing the page in browser, we can see the change.

In desktop - No change

In mobile - Last columns are hidden.



That's it. Our GridView is responsive now!!

We can expand the rows and view hidden column values by clicking on the '+' icon.

Reference

https://datatables.net/
Summary

This article covered the very basic functionality of DataTables plug-in to make an HTML table responsive and to integrate the same in ASP GridView so as to make it responsive.

DataTables is a very powerful plug-in with a vast variety of functionalities to make our HTML table more attractive and responsive. Please explore the DataTables site for more details and get the best out of it.

Hope this will be helpful!


Similar Articles