Solved

How highlight gridview row when enter textbox?

Posted on 2011-03-15
9
587 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
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 
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

Does Powershell have you tied up in knots?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

Question has a verified solution.

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

A quick way to get a menu to work on our website, is using the Menu control and assign it to a web.sitemap using SiteMapDataSource. Example of web.sitemap file: (CODE) Sample code to add to the page menu: (CODE) Running the application, we wi…
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.…
Nobody understands Phishing better than an anti-spam company. That’s why we are providing Phishing Awareness Training to our customers. According to a report by Verizon, only 3% of targeted users report malicious emails to management. With compan…
With Secure Portal Encryption, the recipient is sent a link to their email address directing them to the email laundry delivery page. From there, the recipient will be required to enter a user name and password to enter the page. Once the recipient …

773 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