arrow key to go only to editable columns in gridview Jquery
Hi Friends,
I am using VS 2005, ASP.NET,C#.NET.
I have a web application which uses jquery for moving arrow keys within gridview.
Now the arrow key is going to each and every cell.
I want to move the arrow keys only to go to editable(not readonly) cells in gridview
<script src="JQuery/jquery-1.4.1.js" type="text/javascript"></script>
<script src="JQuery/jquery.keynavigation.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
//For navigating using left and right arrow of the keyboard
var gridview = $("#grdView");
$.keynavigation(gridview);
});
</script>
jQuery.keynavigation = function(table) {
var rowColorStyle = "BACKGROUND-COLOR: white; COLOR: #003399";
var rowHighlightColor = "#aaa";
table.find("input[type='text'],input[type='checkbox'], select").keydown(
function(event) {
//For nvaigating using right key
// if ((event.keyCode == 39) || (event.keyCode == 9 && event.shiftKey == false)) {
if ((event.keyCode == 39) ) {//preejo 20 feb
var inputs = $(this).parents("table").eq(0).find("input[type='text'],input[type='checkbox'], select");
var idx = inputs.index(this);
if (idx == inputs.length - 1) {
inputs[0].select()
} else {
$(this).parents("table").eq(0).find("tr").not(':first').each(function() {
// $(this).attr("style", rowColorStyle);
});
// inputs[idx + 1].parentNode.parentNode.style.backgroundColor = rowHighlightColor;//preejo 20 feb
inputs[idx + 1].focus();
inputs[idx].value = inputs[idx].value;
if (inputs[idx + 1].type != "select-one") {
inputs[idx + 1].select();
}
}
event.preventDefault();
}
//For nvaigating using left key
// if ((event.keyCode == 37) || (event.keyCode == 9 && event.shiftKey == true)) {
if ((event.keyCode == 37) ) {//preejo 20 feb
var inputs = $(this).parents("table").eq(0).find("input[type='text'],input[type='checkbox'], select");
var idx = inputs.index(this);
if (idx > 0) {
$(this).parents("table").eq(0).find("tr").not(':first').each(function() {
// $(this).attr("style", rowColorStyle);
});
// inputs[idx - 1].parentNode.parentNode.style.backgroundColor = rowHighlightColor;//preejo 20 feb
inputs[idx - 1].focus();
inputs[idx].value = inputs[idx].value;
if (inputs[idx - 1].type != "select-one")
{ inputs[idx - 1].select(); }
}
event.preventDefault();
}
});
//For navigating using up and down arrow of the keyboard
table.find("input[type='text'],input[type='checkbox']").keydown(
function(event) {
// alert('down');
if ((event.keyCode == 40)) {
if ($(this).parents("tr").next() != null) {
var nextTr = $(this).parents("tr").next();
var inputs = $(this).parents("tr").eq(0).find("input[type='text'],input[type='checkbox']");
var idx = inputs.index(this);
nextTrinputs = nextTr.find("input[type='text'], input[type='checkbox']");
if (nextTrinputs[idx] != null) {
$(this).parents("table").eq(0).find("tr").not(':first').each(function() {
// $(this).attr("style", rowColorStyle);
});
// nextTrinputs[idx].parentNode.parentNode.style.backgroundColor = rowHighlightColor;//preejo 20 feb
nextTrinputs[idx].focus();
nextTrinputs[idx].value = nextTrinputs[idx].value;
if (nextTrinputs[idx].type != "select-one")
{ nextTrinputs[idx].select(); }
}
}
else {
$(this).focus();
if ($(this).type != "select-one")
{ $(this).select(); }
}
event.preventDefault();
}
if ((event.keyCode == 38)) {
// alert('up');
if ($(this).parents("tr").prev() != null) {
var nextTr = $(this).parents("tr").prev();
var inputs = $(this).parents("tr").eq(0).find("input[type='text'],input[type='checkbox']");
var idx = inputs.index(this);
nextTrinputs = nextTr.find("input[type='text'],input[type='checkbox']");
if (nextTrinputs[idx] != null) {
$(this).parents("table").eq(0).find("tr").not(':first').each(function() {
// $(this).attr("style", rowColorStyle);
});
// nextTrinputs[idx].parentNode.parentNode.style.backgroundColor = rowHighlightColor;//preejo 20 feb
nextTrinputs[idx].focus();
nextTrinputs[idx].value = nextTrinputs[idx].value;
if (nextTrinputs[idx].type != "select-one")
{ nextTrinputs[idx].select(); }
}
return false;
}
else {
$(this).focus();
if ($(this).type != "select-one")
{ $(this).select(); }
}
event.preventDefault();
}
});
//Navigate to the next same column in the next row when the enter key is clicked.
table.find("input[type='text'], input[type='checkbox'], select").keypress(
function(event) {
//When enter key clicked
if (event.keyCode == 13) {
if ($(this).parents("tr").next() != null) {
var nextTr = $(this).parents("tr").next();
var inputs = $(this).parents("tr").eq(0).find("input[type='text'], input[type='checkbox'], select");
var idx = inputs.index(this);
nextTrinputs = nextTr.find("input[type='text'], input[type='checkbox'], select");
if (nextTrinputs[idx] != null) {
$(this).parents("table").eq(0).find("tr").not(':first').each(function() {
// $(this).attr("style", rowColorStyle);
});
// nextTrinputs[idx].parentNode.parentNode.style.backgroundColor = rowHighlightColor;
nextTrinputs[idx].focus();
// nextTrinputs[idx].value = inputs[idx].value;
if (nextTrinputs[idx].type != "select-one")
{ nextTrinputs[idx].select(); }
}
return false;
}
else {
$(this).focus();
if ($(this).type != "select-one")
{ $(this).select(); }
}
event.preventDefault();
}
});
}