Solved

How highlight gridview row when enter textbox?

Posted on 2011-03-15
9
591 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
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
VB.net capture  result of a SQL query in variables 3 20
How to limit User Input 2 27
Looping through datagridview and dataset ? 6 24
asp.net web application 3 26
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…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This video shows how to use Hyena, from SystemTools Software, to bulk import 100 user accounts from an external text file. View in 1080p for best video quality.

808 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