Bootstrap Responsive ASP.Net GridView with multiple columns for Mobile Phone using jQuery

Hi ahmadsubuhanl...,

Refer below code.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

HTML

<asp:GridView ID="GridView1" CssClass="footable" runat="server" AutoGenerateColumns="false"
    Style="max-width: 500px">
    <Columns>
        <asp:BoundField DataField="CustomerId" HeaderText="Customer Id" />
        <asp:BoundField DataField="ContactName" HeaderText="Name" />
        <asp:BoundField DataField="Address" HeaderText="Address" />
        <asp:BoundField DataField="City" HeaderText="City" />
        <asp:BoundField DataField="Country" HeaderText="Country" />
        <asp:BoundField DataField="PostalCode" HeaderText="Postal Code" />
        <asp:BoundField DataField="Phone" HeaderText="Phone" />
        <asp:BoundField DataField="Fax" HeaderText="Fax" />
    </Columns>
</asp:GridView>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/0.1.0/css/footable.min.css"
    rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<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();
    });
</script>

Namespaces

C#

using System.Data;
using System.Data.SqlClient;
using System.Configuration;

VB.Net

Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        string query = "SELECT TOP 10 * FROM Customers";
        using (SqlConnection con = new SqlConnection(conString))
        {
            SqlCommand cmd = new SqlCommand(query, con);
            using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
            {
                using (DataTable dt = new DataTable())
                {
                    sda.Fill(dt);
                    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";
                    GridView1.HeaderRow.Cells[5].Attributes["data-hide"] = "phone";
                    GridView1.HeaderRow.Cells[6].Attributes["data-hide"] = "phone";
                    GridView1.HeaderRow.Cells[7].Attributes["data-hide"] = "phone";

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

VB.Net

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
        Dim query As String = "SELECT TOP 10 * FROM Customers"
        Using con As SqlConnection = New SqlConnection(conString)
            Dim cmd As SqlCommand = New SqlCommand(query, con)
            Using sda As SqlDataAdapter = New SqlDataAdapter(cmd)
                Using dt As DataTable = New DataTable()
                    sda.Fill(dt)
                    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"
                    GridView1.HeaderRow.Cells(5).Attributes("data-hide") = "phone"
                    GridView1.HeaderRow.Cells(6).Attributes("data-hide") = "phone"
                    GridView1.HeaderRow.Cells(7).Attributes("data-hide") = "phone"

                    'Adds THEAD and TBODY to GridView.
                    GridView1.HeaderRow.TableSection = TableRowSection.TableHeader
                End Using
            End Using
        End Using
    End If
End Sub

Screenshot