Responsive GridView Using DataTables Plug-in

Now, we have to add a class "dt-responsive" in our table to make it responsive.

Now, we can initialize DataTables for this table.

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.

Now, we will bind the GridView with the same employee data from C# code.

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.

Now, before initializing DataTables plug-in to GridView, we have to write a single but important line of code in the code behind.

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.

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!