responsive gridview asp.net render problem

Question

0.00/5 (No votes)

See more:

Hello I have a gridview control which I need to make it responsive. I use footable jquery and css to following code

ASP.NET

<asp:GridView ID="GridView2" CssClass="footable" runat="server" AutoGenerateColumns="false"
        Style="max-width: 500px">
        <Columns>
            <asp:BoundField DataField="Id" HeaderText="Customer Id" />
            <asp:BoundField DataField="Name" HeaderText="Customer Name" />
            <asp:BoundField DataField="Country" HeaderText="Country" />
            <asp:BoundField DataField="Salary" HeaderText="Salary" />
        </Columns>
    </asp:GridView>

JavaScript

<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 () {
           $('#<%=GridView2.ClientID %>').footable();
       });
   </script>

Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
         If Not Me.IsPostBack Then
            Dim dt As New DataTable()
            dt.Columns.AddRange(New DataColumn(3) {New DataColumn("Id"), New DataColumn("Name"), New DataColumn("Country"), New DataColumn("Salary")})
            dt.Rows.Add(1, "John Hammond", "United States", 70000)
            dt.Rows.Add(2, "Mudassar Khan", "India", 40000)
            dt.Rows.Add(3, "Suzanne Mathews", "France", 30000)
            dt.Rows.Add(4, "Robert Schidner", "Russia", 50000)
            GridView2.DataSource = dt
            GridView2.DataBind()

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

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

            'Adds THEAD and TBODY to GridView.

            GridView2.HeaderRow.TableSection = TableRowSection.TableHeader
           
        End If
        
    End Sub

This example works fine. In my code I have search criteria and a button so to bring data from a db. When the gridview brings the data is missing the thead tag and doesn't taking the correct css classes. How can I force the table that is rendering to take

GridView2.HeaderRow.TableSection = TableRowSection.TableHeader

Posted 20-Jul-15 21:23pm

touinta

Updated 20-Jul-15 23:32pm

v2

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sumit Kharbikar · Answer 1 · 2015-07-24T03:24:00

Solution 1

as gridview is render in html table so that it will not work sometime as we want
so if possible use listview instead of gridview as it render in div

Posted 24-Jul-15 3:24am

Sumit Kharbikar

Richard Deeming · Answer 2 · 2015-07-24T03:39:00

Add a handler for the RowCreated event, and set the table section depending on the row type:

VB.NET

Protected Sub GridView2_RowCreated(ByVal sender As Object, ByVal e As GridViewRowEventArgs) Handles GridView2.RowCreated
    If e.Row.RowType = DataControlRowType.Header Then
        e.Row.TableSection = TableRowSection.TableHeader
        e.Row.Cells(0).Attribute("data-class") = "expand"
        e.Row.Cells(2).Attributes("data-hide") = "phone"
        e.Row.Cells(3).Attributes("data-hide") = "phone"
    
    Else If e.Row.RowType = DataControlRowType.Footer Then
        e.Row.TableSection = TableRowSection.TableFooter
    End If
End Sub