How to find a gridview row and how to apply color using jquery.

Posted by Rambabu123 under jQuery on 11/2/2012 | Points: 10 | Views : 1312 | Status : [Member] | Replies : 3
How to find a gridview row and how to apply color using jquery.




Responses

Posted by: Devi0074u on: 3/12/2013 [Member] Starter | Points: 25

Up
0
Down
ASP.NET gridviews are rendered as table.

So using jQuery you can find the tr (row) of the table and apply colors to it.

Suppose you want to apply alternate color then this is how you do it (by using even and odd).
http://jsfiddle.net/uUGFk/

Rambabu123, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Santhi on: 3/12/2013 [Member] Starter | Points: 25

Up
0
Down
Hi

To high light the rows on the grid view:
Design page:
<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
<title></title>
<script src="Scripts/jquery-1.7.1.min.js"></script>
<script src="Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript">

$(document).ready(function () {
$("table tr:has(td)").css({ background: "ffffff" }).hover(
function () { $(this).css({ background: "#C1DAD7" }); },
function () { $(this).css({ background: "#ffffff" }); }
);
});
</script>

</head>
<body>

<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None">
<AlternatingRowStyle BackColor="White" />
<EditRowStyle BackColor="#2461BF" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#EFF3FB" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F5F7FB" />
<SortedAscendingHeaderStyle BackColor="#6D95E1" />
<SortedDescendingCellStyle BackColor="#E9EBEF" />
<SortedDescendingHeaderStyle BackColor="#4870BE" />
</asp:GridView>
</div>
</form>
</body>
</html>
.CS Page:

protected void Page_Load(object sender, EventArgs e)
{ if(!IsPostBack)
BindGrid();
}

public void BindGrid()
{
DataTable dt = new DataTable();
dt.Columns.Add("Name");
dt.Columns.Add("Id");
DataRow dr;
dr = dt.NewRow();
dr[0] = "Hi";
dr[1] = "1001";
dt.Rows.Add(dr);
GridView1.DataSource = dt;
GridView1.DataBind();
}

Thanks & Regards,
Santhi .V

Rambabu123, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Santhi on: 3/12/2013 [Member] Starter | Points: 25

Up
0
Down
Hi

Try that script. it works

Thanks & Regards,
Santhi .V

Rambabu123, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response