This is a migrated thread and some comments may be shown as answers.

GridView and footable plugin

1 Answer 185 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sophie
Top achievements
Rank 1
Sophie asked on 28 Jun 2016, 03:06 PM

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

1 Answer, 1 is accepted

Sort by
0
Kostadin
Telerik team
answered on 01 Jul 2016, 08:00 AM
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
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Tags
Grid
Asked by
Sophie
Top achievements
Rank 1
Answers by
Kostadin
Telerik team
Share this question
or