Set ASP.Net GridView's Columns to alternate color by Jquery.

Posted by Real

Sometime we are getting requirement for styling the  Grid View as per Business requirement, let say we need to make all columns in the Grid View to alternate colors as shown in below shown picture:

GridColomn_withDifferentClor

In this case we will use JQuery to achieve this functionality. Lets start.

* Default.aspx Page:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Set Alternate style using jQuery</title>
    <style type="text/css">
    body
    {
        font-family: Arial;
        font-size : 10pt;
    }
    </style>
    <script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" language="javascript">
    $(document).ready(function() {
        $("#<%=gdRows.ClientID%> td").filter(":odd").css("background-color", "PaleGoldenrod");
        $("#<%=gdRows.ClientID%> td").filter(":even").css("background-color", "Tan");
    });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="gdRows" runat="server" Font-Names="Arial" Font-Size="Small" 
            Width="36%">
            <HeaderStyle HorizontalAlign="Left" />
        </asp:GridView>
    </div>
    </form>
</body>
</html>




* Default.aspx.cs Page:



using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
            BindGrid();
    }

    private void BindGrid()
    {
        DataTable dt = new DataTable();
        DataColumn dc;
        dc = new DataColumn();
        dc.ColumnName = "ID";
        dc.DataType = System.Type.GetType("System.Int32");
        dt.Columns.Add(dc);

        dc = new DataColumn();
        dc.ColumnName = "ProductName";
        dt.Columns.Add(dc);

        dc = new DataColumn();
        dc.ColumnName = "Quantity";
        dc.DataType = System.Type.GetType("System.Int32");
        dt.Columns.Add(dc);

        dc = new DataColumn();
        dc.ColumnName = "Price";
        dc.DataType = System.Type.GetType("System.Int32");
        dt.Columns.Add(dc);


        DataRow dr;
        dr = dt.NewRow();
        dr["ID"] = 1;
        dr["ProductName"] = "Mouse";
        dr["Quantity"] = 10;
        dr["Price"] = 100;
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["ID"] = 2;
        dr["ProductName"] = "Speaker";
        dr["Quantity"] = 15;
        dr["Price"] = 990;
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["ID"] = 3;
        dr["ProductName"] = "Hard Drive";
        dr["Quantity"] = 35;
        dr["Price"] = 3990;
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["ID"] = 4;
        dr["ProductName"] = "RAM";
        dr["Quantity"] = 22;
        dr["Price"] = 399;
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["ID"] = 5;
        dr["ProductName"] = "Wireless Keyboard";
        dr["Quantity"] = 10;
        dr["Price"] = 3500;
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["ID"] = 6;
        dr["ProductName"] = "Wi-Fi Router";
        dr["Quantity"] = 1;
        dr["Price"] = 3990;
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["ID"] = 7;
        dr["ProductName"] = "LCD";
        dr["Quantity"] = 62;
        dr["Price"] = 3000;
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["ID"] = 8;
        dr["ProductName"] = "Intel Processor";
        dr["Quantity"] = 5;
        dr["Price"] = 7000;
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["ID"] = 9;
        dr["ProductName"] = "Monitor";
        dr["Quantity"] = 25;
        dr["Price"] = 1990;
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["ID"] = 10;
        dr["ProductName"] = "Keyboard";
        dr["Quantity"] = 20;
        dr["Price"] = 350;
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["ID"] = 11;
        dr["ProductName"] = "headphones";
        dr["Quantity"] = 12;
        dr["Price"] = 500;
        dt.Rows.Add(dr);

        gdRows.DataSource = dt;
        gdRows.DataBind();

    }
}



That's it now we are ready to show alternate Grid Columns color..

Comments

Post a Comment

Thanking you for the comment.

Technology