.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Forum >> ASP.Net >> Post New QuestionBookmark and Share Subscribe to Forum

Cursor moving through textboxes and dropdownlists

Posted By: saimadhukar     Posted Date: September 24, 2010    Points:2   Category :ASP.Net
i had gridview with footer having 11 columns of these 1 to 3 columns are textboxes ,4,5columns are Comboboxes ,
remaining are Textboxes i had implemented cursor moving through left right arrow keys ,
but i had a problem the cursor is moving through first threecolumns and stopping there its moving to 4,5 columns
only if we click tab and its moving through comboboxes and stopping there we have to again click tab to make it move from comboboxes to textboxes ,
how to write code sothat cursor move through comboboxes and textboxes by pressing arrow keys?
i am giving code in javascript and also in C# below please verify it and reply soon thanks in advance



code for cursor moving using arrowkeys(page.aspx.cs)

protected void gvnewstudent_DataBound(object sender, EventArgs e)
{


TextBox tbLeft;
TextBox tbRight;

DropDownList tbLeft2;
DropDownList tbRight2;



GridViewRow r = gvnewstudent.FooterRow; //used for getting arrow cursor moving in Footer




if (r.RowType == DataControlRowType.Footer)//used for getting cursor moving in Footer
{




for (int i = 1; i <= 3; i++)
{

TextBox tbMarks = (TextBox)r.Cells[i].Controls[1];


if (i == 1)
{
tbLeft = tbMarks;
}

else
{
tbLeft = (TextBox)r.Cells[i - 1].Controls[1];
}

if (i == 3)
{

tbRight = tbMarks;


}
else
{
tbRight = (TextBox)r.Cells[i + 1].Controls[1];
}

tbMarks.Attributes.Add("onKeydown", "arrowkeychange('" + tbMarks.ClientID + "','" + tbLeft.ClientID + "','" + tbRight.ClientID + "' );");
tbMarks.Attributes.Add("onFocus", "Focus('" + tbMarks.ClientID + "');");



}

for (int i = 4; i <= 5; i++)
{
DropDownList tbMarksDropDown = (DropDownList)r.Cells[i].Controls[1];
if (i == 4)
{
tbLeft2 = tbMarksDropDown;
}
else
{
tbLeft2 = (DropDownList)r.Cells[i - 1].Controls[1];

}
if (i == 5)
{

tbRight2 = tbMarksDropDown;

}
else
{
tbRight2 = (DropDownList)r.Cells[i + 1].Controls[1];
}

tbMarksDropDown.Attributes.Add("onKeydown", "arrowkeychange('" + tbMarksDropDown.ClientID + "','" + tbLeft2.ClientID + "','" + tbRight2.ClientID + "');");
tbMarksDropDown.Attributes.Add("onFocus", "Focus('" + tbMarksDropDown.ClientID + "');");
}


for (int i = 6; i < 11; i++)
{

TextBox tbMarks = (TextBox)r.Cells[i].Controls[1];



if (i == 6)
{
tbLeft = tbMarks;
}

else
{
tbLeft = (TextBox)r.Cells[i - 1].Controls[1];
}

if (i == 10)
{
tbRight = tbMarks;

}
else
{
tbRight = (TextBox)r.Cells[i + 1].Controls[1];

}

tbMarks.Attributes.Add("onKeydown", "arrowkeychange('" + tbMarks.ClientID + "','" + tbLeft.ClientID + "','" + tbRight.ClientID + "');");
tbMarks.Attributes.Add("onFocus", "Focus('" + tbMarks.ClientID + "');");

}



}


}

Javascript for cursor moving usingarrow keys using (page.aspx)

<script language="javascript" type="text/javascript">
var vControls = new Array();
var vControlStatus = new Array();
var error = 0;
var j = 0;
function LoadControlintoArray(e, tag, maxmarks) {

vControls[vControls.length] = tag;
if (document.getElementsByName(tag).item(0).value.length <= 0)
document.getElementsByName(tag).item(0).value = 'A';

if (parseInt(document.getElementsByName(tag).item(0).value) > parseInt(maxmarks)) {
document.getElementsByName(tag).item(0).style.backgroundColor = 'RED';
vControlStatus[tag] = "false";

}
else {
document.getElementsByName(tag).item(0).style.backgroundColor = 'WHITE';
vControlStatus[tag] = "true";
}

ValidateGridColor();

}

function ValidateGridColor() {
var i = 0;
var btnEnable = true;
for (i = 0; i <= vControls.length - 1; i++) {
if (vControlStatus[vControls[i]].valueOf() == 'false') {
btnEnable = false;
break;
}

}

document.getElementById('<%=btnsave_bottom.ClientID %>').disabled = !btnEnable;
}

function arrowkeychange(txtCurrent, txtLeft, txtRight , txtLeft2 , txtRight2) {

var key = event.keyCode;

//Left Key
if (key == 37) {
document.getElementById(txtLeft || txtLeft2).focus();
return false;
}



//Right Arrow Key
if (key == 39 || key == 13) {


document.getElementById(txtRight || txtRight2).focus();
return false;


}

}

function Focus(txtCurrent) {
var txt = document.getElementById(txtCurrent).value;

//var range = txt.createTextRange();

//range.select();
}
function onUpdating() {
// updateProgressDiv = document.getElementById('updateProgressDiv');

var updateProgressDiv = $get('updateProgressDiv');
updateProgressDiv.style.display = ';
var gridView = $get('<%= this.gvnewstudent.ClientID %>');
var gridViewBounds = Sys.UI.DomElement.getBounds(gridView);
var updateProgressDivBounds = Sys.UI.DomElement.getBounds(updateProgressDiv);
var x = gridViewBounds.x + Math.round(gridViewBounds.width / 2) - Math.round(updateProgressDivBounds.width / 2);
var y = gridViewBounds.y + Math.round(gridViewBounds.height / 2) - Math.round(updateProgressDivBounds.height / 2);
Sys.UI.DomElement.setLocation(updateProgressDiv, 420, 520);
}
function onUpdated() {
var updateProgressDiv = $get('updateProgressDiv');
updateProgressDiv.style.display = 'none';
}

</script>

<script language="javascript" type="text/javascript">
function onUpdating() {
// updateProgressDiv = document.getElementById('updateProgressDiv');

var updateProgressDiv = $get('updateProgressDiv');
updateProgressDiv.style.display = ';
var gridView = $get('<%= this.gvnewstudent.ClientID %>');
var gridViewBounds = Sys.UI.DomElement.getBounds(gridView);
var updateProgressDivBounds = Sys.UI.DomElement.getBounds(updateProgressDiv);
var x = gridViewBounds.x + Math.round(gridViewBounds.width / 2) - Math.round(updateProgressDivBounds.width / 2);
var y = gridViewBounds.y + Math.round(gridViewBounds.height / 2) - Math.round(updateProgressDivBounds.height / 2);
Sys.UI.DomElement.setLocation(updateProgressDiv, 420, 520);
}
function onUpdated() {
var updateProgressDiv = $get('updateProgressDiv');
updateProgressDiv.style.display = 'none';
}
</script>


Responses
Author: Suthish Nair             
Posted Date: September 27, 2010     Points: 5   


Controls TabIndex property will help you..

suthish nair
Author: saimadhukar             
Posted Date: September 28, 2010     Points: 5   

thanks for giving response but without using tabindex property the cursor is moving through all the controls when we press the tab ,i wanted to do the same with arrow key but its not working thats the problem

Author: Suthish Nair             
Posted Date: September 28, 2010     Points: 5   


Thanks to the post at: http://forums.asp.net/p/1231805/2225020.aspx#2225020

also http://forums.asp.net/p/1231805/2225146.aspx

This will work by changing the arrow keystrokes into tabs. The script can be refined to make the up and left arrows act like a backward tab and the right and down arrows act like a tab.

<form id="Form1" method="post" runat="server">
<input type="text" id="TextBox1" onkeydown="handleKeyDownEvent(event);">
<input type="text" id="TextBox2" onkeydown="handleKeyDownEvent(event);">
<input type="text" id="TextBox3" onkeydown="handleKeyDownEvent(event);">
</form>

<script type="text/JavaScript">
<!--
function handleKeyDownEvent(eventRef)
{
var charCode = (window.event) ? eventRef.keyCode : eventRef.which;

//alert(charCode);

// Arrow keys (37:left, 38:up, 39:right, 40:down)...
if ( (charCode >= 37) && (charCode <= 40) )
{
if ( window.event )
window.event.keyCode = 9;
else
event.which = 9;

return true;
}

return true;
}
// -->
</script>


suthish nair


Post Reply

You must Sign In To post reply
 
 
Find more Forum Questions on C#, ASP.Net, Vb.Net, SQL Server and more Here
Quick Links For Forum Categories:
ASP.NetWindows Application  .NET Framework  C#  VB.Net  ADO.Net  
Sql Server  SharePoint  OOPs  SilverlightIISJQuery
JavaScript/VBScriptBiztalkWPFPatten/PracticesWCFOthers
www.DotNetSpark.comUnAnsweredAll

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend