Responsive tables with jQuery mobile and ASP.NET Gridview

Question

Here is a way to create jQuery Mobile's responsive tables with an ASP.NET gridview.

ASP.NET (Reflow Example)

Protected Sub gv_DataBound(ByVal sender As Object, ByVal e As EventArgs) Handles gv.DataBound
    gv.HeaderRow.TableSection = TableRowSection.TableHeader
    gv.Attributes.Add("data-role", "table")
    gv.Attributes.Add("data-mode", "reflow")

    Dim headerCells = gv.HeaderRow.Cells
    headerCells(3).Attributes.Add("data-priority", "2")
    headerCells(4).Attributes.Add("data-priority", "2")
End Sub

QUESTION

When my gridview returns no results I receive error : Object reference not set to an instance of an object.

I presume this is because the gridview has nothing to bind to however the gridview still renders as a table.

Can anyone conceive why this may be occuring and how it can be fixed?

THE FIX

To fix this be sure to add ShowHeaderWhenEmpty="True" to your gridview to ensure the thead tag is still rendered when empty.

It might be because there is no HeaderRow created since there is no data. Try checking to see if there is a HeaderRow before accessing its Cells — Bryan, Oct 04 '13 at 13:30
Almost all cases of `NullReferenceException` are the same. Please see "[What is a NullReferenceException in .NET?](http://stackoverflow.com/questions/4660142/what-is-a-nullreferenceexception-in-net)" for some hints. — John Saunders, Oct 13 '13 at 02:56

Abhitalks · Accepted Answer · 2013-10-04T13:46:37.200

You will have to work at two levels here:

(1) Use EmptyDataTemplate or EmptyDataText to ensure the empty GridView renders with an html markup which is totally in your control. However, you may still need to avoid the databind. See below.

Identify how you are databinding the GridView:

If you are doing it manually thru code with data coming from your data access layer then you can conditionally bind it. e.g. if your data source is a list, then first check if that list contains data or not:

If myList.Any then
    MyGrid.DataSource = myList 
    MyGrid.DataBind()
Else
    'take evasive measures here
End If

This way you will avoid a call to your GridView's DataBind handler and save you from "object reference" errors.

(2) Alternatively, you may want to look at the ShowHeaderWhenEmpty property set to true on the GridView. This way, a table will still get created and your databind code will not produce "object reference" errors. You need an EmptyDataTemplate for ShowHeaderWhenEmpty to work.

Option (2) for the win. I love the easy fixes. I wasn;t even aware of the ShowHeaderWhenEmpty property. Many thanks @abhitalks =) — DreamTeK, Oct 04 '13 at 13:47

score 0 · Answer 2 · answered Oct 04 '13 at 13:45

You have to check for Empty GridView IF for Empty GridView no need to execute your code in DataBound Event like this.

Protected Sub gv_DataBound(ByVal sender As Object, ByVal e As EventArgs) Handles gv.DataBound
    If gv.Rows.Count > 0 Then
        gv.HeaderRow.TableSection = TableRowSection.TableHeader
        gv.Attributes.Add("data-role", "table")
        gv.Attributes.Add("data-mode", "reflow")

        Dim headerCells = gv.HeaderRow.Cells
        headerCells(3).Attributes.Add("data-priority", "2")
        headerCells(4).Attributes.Add("data-priority", "2")
    End If
End Sub

Responsive tables with jQuery mobile and ASP.NET Gridview

2 Answers2