Compare GridView TextBox value in Edit mode using JavaScript in ASP.Net

Hi Sumeet,

Please refer below sample.

HTML

<div>
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" AutoGenerateEditButton="true"
        OnRowCancelingEdit="OnRowCancelingEdit" OnRowEditing="OnRowEditing">
        <Columns>
            <asp:BoundField DataField="id" HeaderText="id" />
            <asp:BoundField DataField="Name" HeaderText="Name" />
            <asp:BoundField DataField="AccountNo" HeaderText="Account No" />
            <asp:BoundField DataField="Premium" HeaderText="Premium Monthly" ReadOnly="true" />
            <asp:TemplateField HeaderText="Premium Paid">
                <ItemTemplate>
                    <asp:Label Text='<%# Eval("PremiumPaid") %>' runat="server" />
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox ID="txtPremiumPaid" runat="server" Text='<%# Eval("PremiumPaid") %>'
                        onblur="Calculation(this)"></asp:TextBox>
                </EditItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</div>
<script type="text/javascript">
    function Calculation(e) {
        var row = e.parentNode.parentNode;
        var premiumMonthly = row.cells[4].innerHTML;
        var premiumPaid = e.value;
        if (premiumMonthly != premiumPaid) {
            row.cells[5].bgColor = "Red";
        }
        else {
            row.cells[5].bgColor = "";
        }
    }  
</script>

Namespaces

C#

using System.Data;

VB.Net

Imports System.Data

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        this.BindGrid();
    }
}
private void BindGrid()
{
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[] { new DataColumn("id", typeof(int)), 
        new DataColumn("Name",typeof(string)),
        new DataColumn("AccountNo",typeof(string)) , 
        new DataColumn("Premium",typeof(string)),
        new DataColumn("PremiumPaid",typeof(string))});
    dt.Rows.Add(1, "ABC", "bf254543", "100", "200");
    dt.Rows.Add(1, "ABCD", "bf254542", "200", "200");
    GridView1.DataSource = dt;
    GridView1.DataBind();
}

protected void OnRowEditing(object sender, GridViewEditEventArgs e)
{
    GridView1.EditIndex = e.NewEditIndex;
    this.BindGrid();
}

protected void OnRowCancelingEdit(object sender, EventArgs e)
{
    GridView1.EditIndex = -1;
    this.BindGrid();
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Me.BindGrid()
    End If
End Sub

Private Sub BindGrid()
    Dim dt As DataTable = New DataTable()
    dt.Columns.AddRange(New DataColumn() {New DataColumn("id", GetType(Integer)), New DataColumn("Name", GetType(String)), New DataColumn("AccountNo", GetType(String)), New DataColumn("Premium", GetType(String)), New DataColumn("PremiumPaid", GetType(String))})
    dt.Rows.Add(1, "ABC", "bf254543", "100", "200")
    dt.Rows.Add(1, "ABCD", "bf254542", "200", "200")
    GridView1.DataSource = dt
    GridView1.DataBind()
End Sub

Protected Sub OnRowEditing(ByVal sender As Object, ByVal e As GridViewEditEventArgs)
    GridView1.EditIndex = e.NewEditIndex
    Me.BindGrid()
End Sub

Protected Sub OnRowCancelingEdit(ByVal sender As Object, ByVal e As EventArgs)
    GridView1.EditIndex = -1
    Me.BindGrid()
End Sub

 Screenshot