CODEWITHSUNDEEP
jqueryasp.netgridviewtextboxfocus
HackMaster
HackMaster

Reputation: 109

Focus method not working on my gridview but does not color the textbox

I have an gridview where my Headerrow is enabled and under my headerow i have textboxes that users enter value into and click insert to insert into the database.

The User Wanted: 1) the focus method be at the first textbox of the gridview 2) depending on the focus method change the color of the text box to light gray

**was successful in creating a jquery that would allow me to change the color of the text box **

<head runat="server">
    <title></title>
    <link href="carmel.css" rel="stylesheet" type="text/css" />
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript">
    $(document).ready(function() {
        $('INPUT[type="text"]').focus(function() {
            $(this).addClass("focus");
        });
        $('INPUT[type="text"]').blur(function() {
            $(this).removeClass("focus");
        });
    });
</script>
<style type="text/css">
.focus {
border: 2px solid black;
background-color: #D6D6D6;
}
</style>

</head>

and to set the focus on to the first textbox in the gridview i am doing this

 protected void Page_Load(object sender, EventArgs e)
        {
            TextBox txtproductline = (TextBox)GridView1.HeaderRow.FindControl("TextBox6");
            txtproductline.Focus();

        }

the focus works but it is not coloring the textbox to light gray, when i tab the next textbox gets colored to gray am i doing something wrong here??

i also tried

 protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.Header)
            {

              e.Row.FindControl("TextBox6").Focus();


            }

the above code too sets the focus where i want it to be but the jquery is not working

When the user first loads the pages enter image description here

when the user hits tab on the keyboard enter image description here

it works perfectly when i run the application from Visual Studio but when hosted on the webserver its acting funny Any suggestions/fix would greatly be appreciated, have a good rest of your day, Happy Coding

Upvotes: 0

Views: 797

Answers (1)

mslliviu
mslliviu

Reputation: 1138

Your Jquery code defines what happens when a control get or loses focus AFTER the page is already loaded (draw) and your textbox already has focus. You probably can add in Page_Load or where you set focus on the first line, something like txtproductline.CssClass="focus"

Upvotes: 1

Related Questions