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
– LCJ

2012-02-08 04:10:34 +00:00
Commented Feb 8, 2012 at 4:10 — LCJ
– LCJ, Commented Feb 8, 2012 at 4:10
What version of .Net are you using?

pete
– pete

2012-02-10 16:06:41 +00:00
Commented Feb 10, 2012 at 16:06 — pete
– pete, Commented Feb 10, 2012 at 16:06

smitchelluk · Accepted Answer · 2012-02-10 15:29:11Z

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, 2012 at 15:29

smitchelluk

1721 gold badge3 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hossein Over a year ago

Or better, content="IE=edge"; see here.

Collectives™ on Stack Overflow

Using jQuery UI Themes with ASP.Net Controls

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related