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 : 2268 | Status : [Member] | Replies : 3

Write New Post |

Search Forums | Answered

Resolved Posts |

Un Answered Posts |

Forums Home

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

Reply | Reply with Attachment

Alert Moderator

Responses

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

0	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

0	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

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

0	Hi Try that script. it works Thanks & Regards, Santhi .V Rambabu123, if this helps please login to Mark As Answer. \| Alert Moderator

Latest Posts