Solved

How highlight gridview row when enter textbox?

Posted on 2011-03-15
9
601 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

User art_snob (http://www.experts-exchange.com/M_6114203.html) encountered strange behavior of Android Web browser on his Mobile Web site. It took a while to find the true cause. It happens so, that the Android Web browser (at least up to OS ver. 2.…
Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
In this video, viewers will be given step by step instructions on adjusting mouse, pointer and cursor visibility in Microsoft Windows 10. The video seeks to educate those who are struggling with the new Windows 10 Graphical User Interface. Change Cu…
If you’ve ever visited a web page and noticed a cool font that you really liked the look of, but couldn’t figure out which font it was so that you could use it for your own work, then this video is for you! In this Micro Tutorial, you'll learn yo…

724 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