Solved

How highlight gridview row when enter textbox?

Posted on 2011-03-15
9
581 Views
Last Modified: 2012-06-27
I have a gridview with 1 data entry textbox and a few additional "read-only" columns. Whenever I put the cursor in the textbox I want to highlight the gridview row. On "exit" of the textbox I want to unhighlight it. How can I do this? Here's how the field is setup currently. As you can see I figured out how to link the txtUnitPrice_TextChanged code behind to the textbox so far...

<asp:TemplateField HeaderText="Unit Price" ItemStyle-Width="100px">
                <ItemTemplate>
                    $<asp:TextBox CausesValidation="true" CssClass="bf_textbox" ID="txtUnitPrice" AutoPostBack="true" runat="server" OnTextChanged="txtUnitPrice_TextChanged" Width="82px"></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
0
Comment
Question by:RobertNZana
  • 5
  • 4
9 Comments
 
LVL 9

Expert Comment

by:Roman Gherman
ID: 35139381
Hi,
you can use jquery to do that

$<asp:TextBox CausesValidation="true" CssClass="bf_textbox" ID="txtUnitPrice" AutoPostBack="true" runat="server" OnTextChanged="txtUnitPrice_TextChanged" Width="82px" onfocus="$(this).parent('tr').toggleClass('HIGHLIGHTCLASS');" onblur='$(this).parent('tr').toggleClass('HIGHLIGHTCLASS');' ></asp:TextBox>

You can find me on:http://extremedev.blogspot.com
0
 
LVL 9

Author Comment

by:RobertNZana
ID: 35140381
I get this...

Parser Error Message: Type 'AjaxControlToolkit.ValidatorCalloutExtender' does not have a public property named 'onfocus'.
0
 
LVL 9

Author Comment

by:RobertNZana
ID: 35140441
Never mind. Wrong control. LOL

I put it in so it's like this, but it doesn't work. Do I need additional css, js, etc... files?

 <asp:TextBox CausesValidation="true" CssClass="bf_textbox" ID="txtUnitPrice" AutoPostBack="true"
                        runat="server" OnTextChanged="txtUnitPrice_TextChanged" Width="82px" onfocus="$(this).parent('tr').toggleClass('HIGHLIGHTCLASS');" onblur='$(this).parent('tr').toggleClass('HIGHLIGHTCLASS');'></asp:TextBox>
                   
0
 
LVL 9

Expert Comment

by:Roman Gherman
ID: 35141128
Hi, you need to create a HIGHLIGHTCLASS css class that will change the color of the row.

For example:

<style type="text/css">
.HIGHLIGHTCLASS
{
background-color:Red;
}
</style>

You can find me on:http://extremedev.blogspot.com
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 9

Expert Comment

by:Roman Gherman
ID: 35141170
here is the complete code:
<!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>

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

    <style type="text/css">
        .HIGHLIGHTCLASS
        {
            background-color: Red;
        }
    </style>
</head>
<body>
    <table width='500px'>
        <tr>
            <td>
                <input type="text" value='t' onfocus="$(this).parents('tr').toggleClass('HIGHLIGHTCLASS');"
                    onblur="$(this).parents('tr').toggleClass('HIGHLIGHTCLASS');" />
            </td>
        </tr>
        <tr>
            <td>
                test
            </td>
        </tr>
    </table>
</body>
</html>

Open in new window


Note: you will have to make some changes:
1) add the class
2) onblur="..." instead of onblur='...'
3) change parent to parents

You can find me on:http://extremedev.blogspot.com
0
 
LVL 9

Author Comment

by:RobertNZana
ID: 35141253
Thanks. The example you provided works but mine doesn't.

Remember the textbox is in a ItemTemplate within a gridview. See my initial code example. Right now this doesn't seem to work in my case.
0
 
LVL 9

Expert Comment

by:Roman Gherman
ID: 35141381
hhmmm, strange.

It is possible that you are doing something wrong.
0
 
LVL 9

Author Comment

by:RobertNZana
ID: 35141388
That's always possible but I double checked. Can you use a gridview in your example? You can just bind a simple datatable to it.
0
 
LVL 9

Accepted Solution

by:
Roman Gherman earned 500 total points
ID: 35141573
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="MyBlogArticles.temp.WebForm1" %>

<!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">
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <style type="text/css">
        .HIGHLIGHTCLASS
        {
            background-color: Red;
        }
        .bf_textbox
        {
            background-color:Yellow;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server">
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:TextBox CssClass="bf_textbox" ID="txtUnitPrice" AutoPostBack="true"
                        runat="server" Width="82px" 
                        onfocus="$(this).parents('tr').toggleClass('HIGHLIGHTCLASS');" 
                        onblur="$(this).parents('tr').toggleClass('HIGHLIGHTCLASS');"></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
        </asp:GridView>
    </div>
    </form>
</body>
</html>

Open in new window


You can find me on:http://extremedev.blogspot.com
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
Creating an analog clock UserControl seems fairly straight forward.  It is, after all, essentially just a circle with several lines in it!  Two common approaches for rendering an analog clock typically involve either manually calculating points with…
This video discusses moving either the default database or any database to a new volume.
Access reports are powerful and flexible. Learn how to create a query and then a grouped report using the wizard. Modify the report design after the wizard is done to make it look better. There will be another video to explain how to put the final p…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now