GridView and footable plugin

2 posts, 0 answers
  1. Sophie
    Sophie avatar
    4 posts
    Member since:
    Jun 2016

    Posted 28 Jun 2016 Link to this post


    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=""
        rel="stylesheet" type="text/css" />
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript">
        $(function () {
            alert("enter function footable");
            $('[id*=GridView1]').bind('footable_breakpoint', function () {
            alert("exit function footable");
      <asp:GridView ID="GridView1" CssClass="footable" runat="server"
               <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" />

    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;

                //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....

  2. Kostadin
    Kostadin avatar
    1733 posts

    Posted 01 Jul 2016 Link to this post

    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.

    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top