Using the FooTable plugin with the ASP.NET DataGrid

Question

I am currently redesigning an application for the company I work for. All the data is displayed through a DataGrid, which is fine, except for when I try to incorporate a JQuery library called "Footable" to make all the grids collapse when on a smaller device as explained here. In the tutorial it uses a GridView. I made the demo, it worked well and it's exactly what I want, but I'm having trouble doing the same thing with a DataGrid. My first idea was to switch my DataGrid for a Gridview and implement it as in the demo, but I'd have to rewire everything in the code behind, which is vast, and would be very labour intensive. So I was wondering if it's possible to implement the FooTable JQuery plugin with a DataGrid instead of the GridView

There are only a couple of lines in the code behind that actually trigger the JQuery, but it doesn't seem to work on a DataGrid. Here is what the demo does with the GridView (in C#):

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

Here is my attempt at it through datagrid (in VB.NET), but no success:

'Attribute to show the Plus Minus Button.
e.Item.Cells(0).Attributes("data-class") = "expand"

'Attribute to hide column in Phone.
e.Item.Cells(2).Attributes("data-hide") = "phone"

'Adds THEAD and TBODY to GridView.
e.Item.TableSection = TableRowSection.TableHeader

From what I have been reading a GridView is basically a super DataGrid with extra attributes, so I'm skeptic if I can actually implement the FooTable plugin with a DataGrid. Any help would be great, I'm not expecting anybody to hold my hand through this, just a point in the right direction.

Answer 1

Even if it's harder to implement the FooTable plugin with the DataGrid than with a GridView, it does not means it's not possible. If you read a little bit the FooTable introduction page, you realize that this plugin works with the HTML table element. So, no matter the control you are using with whatever technology, as long as it generates a table, it should work.

The code proposed in the above example which works with the Gridview control, renders the following table:

<table class="footable" cellspacing="0" rules="all" border="1" id="MainContent_GridView1" style="border-collapse:collapse;max-width: 500px">
    <thead>
        <tr>
            <th data-class="expand" scope="col">Customer Name</th><th scope="col">Customer Id</th><th data-hide="phone" scope="col">Country</th><th data-hide="phone" scope="col">Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Hammond</td><td>1</td><td>United States</td><td>70000</td>
        </tr>
        <tr>
            <td>Mudassar Khan</td><td>2</td><td>India</td><td>40000</td>
        </tr>
        <tr>
            <td>Suzanne Mathews</td><td>3</td><td>France</td><td>30000</td>
        </tr>
        <tr>
            <td>Robert Schidner</td><td>4</td><td>Russia</td><td>50000</td>
        </tr>
    </tbody>
</table>

So let's try to render the same code with the DataGrid. It should be similar to this in your aspx page:

<asp:DataGrid runat="server" ID="dataGrid1" ShowHeader="true" AutoGenerateColumns="false" UseAccessibleHeader="true">
    <Columns>
        <asp:BoundColumn DataField="Name" HeaderText="Customer Name" />
        <asp:BoundColumn DataField="Id" HeaderText="Customer Id" />
        <asp:BoundColumn DataField="Country" HeaderText="Country" />
        <asp:BoundColumn DataField="Salary" HeaderText="Salary" />
    </Columns>
</asp:DataGrid>

A DataGrid must have asp:BoundColumns instead of asp:BoundFields (in the GridView). Also, be sure that ShowHeader="true", other else the DataGrid won't generate your header. UseAccessibleHeader="true" is important as well, because without it, your header cells will be generated as tr instead of th.

The principal difficulty in implementing the header attributes (e.g. data-class= "expand") is accessing your header. But it is feasible. In your code behind, in the Page_Load event, add the following code (after the DataGrid's DataBind):

' That's how you can access to your header
Dim dataGridHeader As DataGridItem = dataGrid1.Controls(0).Controls(0)

' I fyou need to access to your footer, do the following:
' MyGrid.Controls(0).Controls(MyGrid.Controls(0).Con trols.Count - 1)

dataGridHeader.Cells(0).Attributes("data-class") = "expand"

'Attribute to hide column in Phone.
dataGridHeader.Cells(2).Attributes("data-hide") = "phone"
dataGridHeader.Cells(3).Attributes("data-hide") = "phone"

' Make the header row part of a `thead` instead of `tbody` (by default)
dataGridHeader.TableSection = TableRowSection.TableHeader

If you followed all the instructions, you should get the same HTML Table as the one specified earlier. Keep in mind that no matter what you're trying to do with the FooTable plugin, it's all as possible with the DataGrid as it is with the GridView, since both generate an HTML Table, the element aimed by the plugin.