.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 >> JavaScript/VBScript >> Post New QuestionBookmark and Share Subscribe to Forum

cursor moving through textboxes and dropdowns

Posted By: saimadhukar     Posted Date: September 24, 2010    Points:2   Category :JavaScript/VBScript
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: Deco             
Posted Date: September 26, 2010     Points: 5   

You can simply set the Tab for all the controls

from 1 to n..

whenever you press the tab it will go from 1st control to the last one

Regards,
Deco
Author: saimadhukar             
Posted Date: September 28, 2010     Points: 5   

thanks for response, but
without setting the tab for all controls its working and the cursor is moving to next field when we press the tab ,i wanted to do the same with arrow keys but its not working thats the problem.



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