Highlight ASP.Net DetailsView Row on TextBox focus using jQuery

Hi comidos,

Check this example. Now please take its reference and correct your code.

Database

I have made use of the following table Customers with the schema as follows.

I have already inserted few records in the table.

You can download the database table SQL by clicking the download link below.

Download SQL file

HTML

<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="false" AllowPaging="true"
    OnPageIndexChanging="OnPageIndexChanging">
    <Fields>
        <asp:BoundField DataField="CustomerId" HeaderText="Id" />
        <asp:TemplateField HeaderText="Name">
            <ItemTemplate>
                <asp:TextBox runat="server" ID="txtName" Text='<%# Eval("Name") %>' />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Country">
            <ItemTemplate>
                <asp:TextBox runat="server" ID="txtCountry" Text='<%# Eval("Country") %>' />
            </ItemTemplate>
        </asp:TemplateField>
    </Fields>
</asp:DetailsView>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('#DetailsView1 input[type=text]').focusin(function () {
            $(this).closest('tr').attr('style', 'background-color : aqua');
        }).focusout(function () {
            $(this).closest('tr').attr('style', 'background-color : white');
        });
    });
</script>

Namespaces

C#

using System.Configuration;
using System.Data;
using System.Data.SqlClient;

VB.Net

Imports System.Configuration
Imports System.Data
Imports System.Data.SqlClient

Code

C#

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

private void BindDetailsView()
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT CustomerId, Name, Country FROM Customers"))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                using (DataTable dt = new DataTable())
                {
                    sda.Fill(dt);
                    DetailsView1.DataSource = dt;
                    DetailsView1.DataBind();
                }
            }
        }
    }
}

protected void OnPageIndexChanging(object sender, DetailsViewPageEventArgs e)
{
    DetailsView1.PageIndex = e.NewPageIndex;
    this.BindDetailsView();
}

VB.Net

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

Private Sub BindDetailsView()
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As New SqlConnection(constr)
        Using cmd As New SqlCommand("SELECT CustomerId, Name, Country FROM Customers")
            Using sda As New SqlDataAdapter()
                cmd.Connection = con
                sda.SelectCommand = cmd
                Using dt As New DataTable()
                    sda.Fill(dt)
                    DetailsView1.DataSource = dt
                    DetailsView1.DataBind()
                End Using
            End Using
        End Using
    End Using
End Sub
Protected Sub OnPageIndexChanging(sender As Object, e As DetailsViewPageEventArgs)
    DetailsView1.PageIndex = e.NewPageIndex
    Me.BindDetailsView()
End Sub

Screenshot