How to Format Cell and Apply Style in GridView using JQuery

Introduction

In this snippet, I will show how to format a cell and apply style in gridview using JQuery. Sometimes we may need to apply the format for a particular cell based on the cell value; it can be done in server code within DataRowBound in asp.net.
But the server side codes it expensive and may be lead to reduce the speed of the page. I would like to share with you, how we can implement same features using jquery with less code and faster.

Implmentation

Create a web application with one Gridview and make sure the gridview as like below,

Html Code

<form id="form1" runat="server">
        <div>
            <asp:GridView ID="gvpub" runat="server" AutoGenerateColumns="False">
                <Columns>
                    <asp:BoundField DataField="Name" HeaderText="Name" />
                    <asp:BoundField DataField="Address1" HeaderText="Address1" />
                    <asp:BoundField DataField="Address2" HeaderText="Country" />
                    <asp:BoundField DataField="Company" HeaderText="Company" />
                    <asp:BoundField DataField="Worth" HeaderText="Worth" DataFormatString="{0:C}" />
                </Columns>
                <HeaderStyle Font-Bold="true" Font-Size="Medium" BackColor="LightGray" />
            </asp:GridView>
        </div>
    </form>

And write server side to code to bind data to gridview.

C# Code

using System;
using System.Data;
using System.Configuration;
using System.Collections;
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;
using System.Collections.Generic;

public partial class CellStyledemo : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            List<Publisher> collectionOfPub = new List<Publisher>();
            collectionOfPub.Add(new Publisher("Wrox", "No-02,John Ave 2", "US", "WROX",1200));
            collectionOfPub.Add(new Publisher("Apress", "No-03,Cels Ave 6", "US", "APRESS",3000));
            collectionOfPub.Add(new Publisher("Sams", "No-89,Test Ave 32", "US", "SAMS",5000));
            collectionOfPub.Add(new Publisher("Orelly", "No-23/08,John Ave 23", "US", "ORELLY",4500));
            collectionOfPub.Add(new Publisher("Packtpub", "No-56,John Ave 5", "INDIA", "PACKTPUB",1300));
            this.gvpub.DataSource = collectionOfPub;
            this.gvpub.DataBind();
        }
    }
}

Now write code to apply the css and formatting to cell when it meet the condition is worth amount is great than $3000.

<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
    </script>

    <script language="javascript">
    $(document).ready(function(){ 
    $("#gvpub td").filter(function () {    
    if($(this).get(0).cellIndex ==4)
    {    
            var worth=$(this).text();          
            var amount = Number(worth.replace(/[^0-9\.]+/g,""));            
            return amount >3000; 
            }                   
        }).addClass("cellformat");
    });
    </script>

In above code just read each cell and check if cell is 4th column, then read the values and convert to number and check is it great than $3000, then apply the css. the CSS will be like below,

<style type="text/css">
        .cellformat
        {
            font-size:11px;
            font-weight:bold;  
            color:green;                  
        }
    </style>

Note: I have not go through the code each line, because I have published few articles with JQuery and GridView earlier, you can read to understand basic steps.

1. Validate at least one Checkbox is checked in GridView using JQuery
2. Check Or Uncheck Checkboxes within GridView in ASP.NET using JQuery

 Now run and see the output will be like below,

That's all. hopes help and thank you for reading, if you have any comments please post it.