ASP.Net: jQuery Footable plugin is not showing plus minus in mobile view

pandey47
 
on Nov 17, 2022 12:35 AM
275 Views

I have copy paste your code on my project by on mobile view plus minus button is not showing

please help

<asp:GridView ID="GridView1"  CssClass="footable" runat="server" AutoGenerateColumns="false"
    Style="max-width: 500px">
    <Columns>
        <asp:BoundField DataField="Id" HeaderText="Customer Id" />
        <asp:BoundField DataField="Name" HeaderText="Customer Name" />
        <asp:BoundField DataField="Country" HeaderText="Country" />
        <asp:BoundField DataField="Salary" HeaderText="Salary" />
    </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="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/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>

 

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[4] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Country"), new DataColumn("Salary") });
        dt.Rows.Add(1, "John Hammond", "United States", 70000);
        dt.Rows.Add(2, "Mudassar Khan", "India", 40000);
        dt.Rows.Add(3, "Suzanne Mathews", "France", 30000);
        dt.Rows.Add(4, "Robert Schidner", "Russia", 50000);
        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";

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

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Nov 17, 2022 12:36 AM

I am checking. I will get back to you soon.

PrinceG
 
on Nov 17, 2022 02:58 AM

Hi pandey47,

I have verified the code is working.

Note: For this sample i have refer below article. For more details refer below article article.

Make GridView Responsive using jQuery FooTable plugin in ASP.Net

Please refer below sample.

HTML

<asp:GridView ID="GridView1" CssClass="footable" runat="server" AutoGenerateColumns="false"
    Style="max-width: 500px">
    <Columns>
        <asp:BoundField DataField="Id" HeaderText="CustomerId" />
        <asp:BoundField DataField="Name" HeaderText="CustomerName" />
        <asp:BoundField DataField="Country" HeaderText="Country" />
        <asp:BoundField DataField="Salary" HeaderText="Salary" />
    </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="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/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;

VB.Net

Imports System.Data

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[4] { 
                            new DataColumn("Id"), 
                            new DataColumn("Name"), 
                            new DataColumn("Country"), 
                            new DataColumn("Salary") });
        dt.Rows.Add(1, "John Hammond", "United States", 70000);
        dt.Rows.Add(2, "Mudassar Khan", "India", 40000);
        dt.Rows.Add(3, "Suzanne Mathews", "France", 30000);
        dt.Rows.Add(4, "Robert Schidner", "Russia", 50000);
        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.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(3) {
            New DataColumn("Id"), 
            New DataColumn("Name"), 
            New DataColumn("Country"), 
            New DataColumn("Salary")
        })
        dt.Rows.Add(1, "John Hammond", "United States", 70000)
        dt.Rows.Add(2, "Mudassar Khan", "India", 40000)
        dt.Rows.Add(3, "Suzanne Mathews", "France", 30000)
        dt.Rows.Add(4, "Robert Schidner", "Russia", 50000)
        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.TableSection = TableRowSection.TableHeader
    End If
End Sub

Screenshot