Using jQuery UI Themes with ASP.Net Controls

Question

I am considering the feasibility of using jQuery UI themes to my ASP.NET website.

I found following issues. How do we correct them?

Internet Explorer (IE 8) --> The gridline is not visible at the bottom (when there is no multiple pages)
Mozilla --> Gridline is not available for header
Chrome --> Working fine

Is it compatible with asp.net controls? Can you please direct me to some examples that shows correct use of these jQuery classes with asp.net controls (without side effects)?

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"></script>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.6/jquery-ui.js"></script>

<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/themes/sunny/jquery-ui.css"
    rel="stylesheet" type="text/css" />

</head>
<body>
<form id="form1" runat="server">
<div>
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
        AllowPaging="True"  PageSize="4">
        <Columns>
            <asp:BoundField DataField="ProductName" HeaderText="ProductName" ReadOnly="true"
                SortExpression="ProductName" />
            <asp:BoundField DataField="QuantityPerUnit" HeaderText="Qty" ReadOnly="true" SortExpression="QuantityPerUnit" />
            <asp:BoundField DataField="CategoryName" HeaderText="Category" ReadOnly="true" SortExpression="CategoryName" />
        </Columns>
    </asp:GridView>
</div>
<br />
</form>
</body>
</html>

--Code Behind

using System;
using System.Web.UI.WebControls;
using System.Data;

public partial class MyGridTest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[3] { new DataColumn("ProductName"), new DataColumn("QuantityPerUnit"), new DataColumn("CategoryName") });
    dt.Rows.Add("Shirt", 200);
    dt.Rows.Add("Football", 30);
    dt.Rows.Add("Bat", 22.5);
    //dt.Rows.Add("Football", 30);
    //dt.Rows.Add("Bat", 22.5);
    //dt.Rows.Add("Football", 30);
    //dt.Rows.Add("Bat", 22.5);
    GridView1.DataSource = dt;
    GridView1.DataBind();
}

protected override void OnPreRender(EventArgs e)
{
    base.OnPreRender(e);
    GridView1.CssClass = "ui-widget-content";

    if (GridView1.Rows.Count > 0)
    {
        //To render header in accessible format
        GridView1.UseAccessibleHeader = true;

        //Add the <thead> element
        GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
        GridView1.HeaderRow.CssClass = "ui-widget-header";

        //Add the <tfoot> element
        GridView1.FooterRow.TableSection = TableRowSection.TableFooter;


        if (GridView1.TopPagerRow != null)
        {
            GridView1.TopPagerRow.TableSection = TableRowSection.TableHeader;
        }
        if (GridView1.BottomPagerRow != null)
        {
            GridView1.BottomPagerRow.TableSection = TableRowSection.TableFooter;
        }
        }
    }
}

Anybody able to reproduce this issue? – LCJ Feb 08 '12 at 04:10 — LCJ, Feb 08 '12 at 04:10
What version of .Net are you using? – pete Feb 10 '12 at 16:06 — pete, Feb 10 '12 at 16:06

score 2 · Answer 1 · answered Feb 10 '12 at 15:29

2

Just out of interest. What happens on when you add this meta tag.

<meta http-equiv="x-ua-compatible" content="IE=8" />

answered Feb 10 '12 at 15:29

smitchelluk

162
2
13

Or better, `content="IE=edge"`; see [here](http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge). – Hossein Jul 20 '13 at 07:04

Using jQuery UI Themes with ASP.Net Controls

1 Answers1

Linked