Highlight row in DetailsView when focus on control

Question

User2048528931 posted

Hello,

i have an DetailsView with highlighted background-color in the controls when focus. It is a very huge form and i want to show the user in which row he is when entering the control.

Is there a possibility to highlight the whole row of a DetailsView when User enters a control. An Event when row is entered, where i can change Background-Color of row or something like that?

Please help.

Answer 1

User-2054057000 posted

I think you want to show the row in highlighted color when user is working on some control of Details View in asp.net web forms. I recreated it with jQuery focus and blur events:

Check this video which shows how it will work:

The Details View:

<asp:DetailsView ID="detailsView" runat="server" AutoGenerateRows="False">
    <Fields>
        <asp:TemplateField HeaderText="Name">
            <ItemTemplate>
                <asp:TextBox ID="Label1" runat="server"
                    Text='<%# Eval("Name") %>'></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Branch" HeaderText="Branch" />
        <asp:BoundField DataField="Officer" HeaderText="Officer" />
        <asp:TemplateField HeaderText="Grade">
            <ItemTemplate>
                <asp:TextBox ID="Label2" runat="server"
                    Text='<%# Eval("Grade") %>'></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
    </Fields>
</asp:DetailsView>

The binding of Details View with data in .aspx.cs page:

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

public void Bind()
{
    DataSet ds = new DataSet();

    DataTable dt = new DataTable();
    dt.Columns.Add("Name");
    dt.Columns.Add("Branch");
    dt.Columns.Add("Officer");
    dt.Columns.Add("Grade");

    dt.Rows.Add(new object[] { "James Bond, LLC", 120, "Garrison Neely", "B" });

    ds.Tables.Add(dt);

    detailsView.DataSource = ds.Tables[0].DefaultView;
    detailsView.DataBind();
}

Now you add the following jQuery focus and blur events in your .aspx page where you have the Details View:

<script src="https://code.jquery.com/jquery-3.3.1.slim.js"></script>
<script>
    $(document).ready(function () {
        $("input[type='text']").focus(function () {
            $(this).parents("tr").css("background", "red");
        });
        $("input[type='text']").blur(function () {
            $(this).parents("tr").css("background", "none");
        });
    });
</script>

Here to change the background I have used jQuery CSS method and to to find the parent 'tr' I have used jQuery Parents method. 

Thanks & Regards

Answer 2

User2048528931 posted

That's great, thanks a lot !!!!