TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
Answers
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
Forums
Monthly Leaders
Forum guidelines
preejo
NA
35
0
arrow key to go only to editable columns in gridview Jquery
Mar 1 2014 2:00 AM
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();
}
});
}
Reply
Answers (
0
)
Exception handling and error loggin in javascript(jquery)
find the tab index of the next cell and give focus to it