Responsive GridView with jQuery Footable and Freeze Header in ASP.Net

Hi ahmadsubuhanl...

Please refer the below code.

 HTML:

  <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" CssClass="footable"
      Style="max-width: 500px">
      <Columns>
          <asp:BoundField DataField="Id" HeaderText="Customer Id" />
          <asp:BoundField DataField="Name" HeaderText="Name" />
          <asp:BoundField DataField="Country" HeaderText="Country" />
          <asp:BoundField DataField="Salary" HeaderText="Salary" />
          <asp:BoundField DataField="Designation" HeaderText="Designation" />
      </Columns>
  </asp:GridView>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/0.1.0/css/footable.min.css" />
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/0.1.0/js/footable.min.js"></script>
  <script type="text/javascript">
      $(function () {
          $('[id*=GridView1]').footable();
          var gridId = "<%=GridView1.ClientID %>";
          var scrollHeight = 150;
          var grid = document.getElementById(gridId);
          var gridWidth = grid.offsetWidth;
          var gridHeight = grid.offsetHeight;
          var headerCellWidths = new Array();
          for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) {
              headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth;
          }
          grid.parentNode.appendChild(document.createElement("div"));
          var parentDiv = grid.parentNode;

          var table = document.createElement("table");
          for (i = 0; i < grid.attributes.length; i++) {
              if (grid.attributes[i].specified && grid.attributes[i].name != "id") {
                  table.setAttribute(grid.attributes[i].name, grid.attributes[i].value);
              }
          }
          table.style.cssText = grid.style.cssText;
          table.style.width = gridWidth + "px";
          table.appendChild(document.createElement("tbody"));
          table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]);
          var cells = table.getElementsByTagName("TH");

          var gridRow = grid.getElementsByTagName("TR")[0];
          for (var i = 0; i < cells.length; i++) {
              var width;
              if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) {
                  width = headerCellWidths[i];
              }
              else {
                  width = gridRow.getElementsByTagName("TD")[i].offsetWidth;
              }
              cells[i].style.width = parseInt(width - 3) + "px";
              gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px";
          }
          parentDiv.removeChild(grid);

          var dummyHeader = document.createElement("div");
          dummyHeader.appendChild(table);
          parentDiv.appendChild(dummyHeader);
          var scrollableDiv = document.createElement("div");
          if (parseInt(gridHeight) > scrollHeight) {
              gridWidth = parseInt(gridWidth) + 17;
          }
          scrollableDiv.style.cssText = "overflow:auto;height:" + scrollHeight + "px;width:" + gridWidth + "px";
          scrollableDiv.appendChild(grid);
          parentDiv.appendChild(scrollableDiv);
      });
  </script>

CODE:

C#

   protected void Page_Load(object sender, EventArgs e)
   {
       if (!this.IsPostBack)
       {
           DataTable dt = new DataTable();
           dt.Columns.AddRange(new DataColumn[5] {
                   new DataColumn("Id"),
                   new DataColumn("Name"),
                   new DataColumn("Country"),
                   new DataColumn("Salary"),
                   new DataColumn("Designation")
               });
           dt.Rows.Add(1, "John Hammond", "United States", 70000, "Software");
           dt.Rows.Add(2, "Mudassar Khan", "India", 40000, "Software");
           dt.Rows.Add(3, "Suzanne Mathews", "France", 30000, "Software");
           dt.Rows.Add(4, "Robert Schidner", "Russia", 50000, "Software");
           dt.Rows.Add(5, "Robert DJ", "USA", 60000, "Software");
           GridView1.DataSource = dt;
           GridView1.DataBind();

           //Attribute to show the Plus Minus Button.
           GridView1.HeaderRow.Cells[0].Attributes["data-class"] = "expand";

           //Attribute to hide column in Phone.
           GridView1.HeaderRow.Cells[2].Attributes["data-hide"] = "phone";
           GridView1.HeaderRow.Cells[3].Attributes["data-hide"] = "phone";
           GridView1.HeaderRow.Cells[4].Attributes["data-hide"] = "phone";

           //Adds THEAD and TBODY to GridView.
           GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
       }
   }

VB.NET

 Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
     If Not Me.IsPostBack Then
         Dim dt As DataTable = New DataTable()
         dt.Columns.AddRange(New DataColumn(4) {New DataColumn("Id"), New DataColumn("Name"), New DataColumn("Country"), New DataColumn("Salary"), New DataColumn("Designation")})
         dt.Rows.Add(1, "John Hammond", "United States", 70000, "Software")
         dt.Rows.Add(2, "Mudassar Khan", "India", 40000, "Software")
         dt.Rows.Add(3, "Suzanne Mathews", "France", 30000, "Software")
         dt.Rows.Add(4, "Robert Schidner", "Russia", 50000, "Software")
         dt.Rows.Add(5, "Robert DJ", "USA", 60000, "Software")
         GridView1.DataSource = dt
         GridView1.DataBind()
         GridView1.HeaderRow.Cells(0).Attributes("data-class") = "expand"
         GridView1.HeaderRow.Cells(2).Attributes("data-hide") = "phone"
         GridView1.HeaderRow.Cells(3).Attributes("data-hide") = "phone"
         GridView1.HeaderRow.Cells(4).Attributes("data-hide") = "phone"
         GridView1.HeaderRow.TableSection = TableRowSection.TableHeader
     End If
 End Sub