GridView and footable plugin

[Sophie]

Hi,

I am trying to use the plugin footable on GridView but it does not work. Maybe you would have an idea about my problem?

Here is the code of my ascx file:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Search.ascx.cs" Inherits="Controls.Search.Search" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %>

<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 () {
        alert("enter function footable");
        $('[id*=GridView1]').bind('footable_breakpoint', function () {
            $('[id*=GridView1]').trigger('footable_expand_first_row');
        }).footable();
        alert("exit function footable");
    });
</script>
<div>
  <asp:GridView ID="GridView1" CssClass="footable" runat="server"
           AutoGenerateColumns="False">
       <Columns>
           <asp:BoundField DataField="FirstName" HeaderText="First Name"   />
           <asp:BoundField DataField="LastName" HeaderText="Last Name" />
           <asp:BoundField DataField="Email" HeaderText="Email" />
           <asp:BoundField DataField="Contact" HeaderText="Contact" />
       </Columns>
   </asp:GridView>
</div>

Here the cs file that define the grid:

DataTable tab = new DataTable();
            tab.Columns.Add("FIRSTNAME", typeof(string));
            tab.Columns.Add("LASTNAME", typeof(string));
            tab.Columns.Add("EMAIL", typeof(string));
            tab.Columns.Add("CONTACT", typeof(string));
            
            var firstname = "toto";
            var lastname = "toto";
            var email = "toto@email";
            var contact = "loremipsum loremipsum loremipsumloremipsum";
            tab.Rows.Add(new object[] { firstname, lastname, email, contact });

            GridView1.DataSource = tab;
            GridView1.DataBind();

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

            //Attribute to hide column in Phone and Tablet
            GridView1.HeaderRow.Cells[0].Attributes["data-hide"] = "phone,tablet";
            GridView1.HeaderRow.Cells[0].Attributes["data-hide"] = "phone,tablet";

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

The 2 alerts in the javascript are displayed but the table remains unchanged when I resize the window to phone size....

[Kostadin]

Hello Sophie,

I am afraid due to the complicity of the RadGrid we do not support any third-party library and we cannot predict the results from them. Nevertheless, you should note that RadGrid control fully responsive and adaptive to all kind of devices. You can find more information how to enable it in the following help article.

Regards,
Kostadin
Telerik