Navigate through the rows with keyboard arrow keys
Navigate through the rows with keyboard arrow keys
dyapasrikanth
Posts: 20Questions: 0Answers: 0
i am displaying the datatable in a modal window. My intention is when user select a row then the first td value of a selected row should be captured or placed in a html text box. The data of table is coming from the server depending upon user search.
So when the modal window opened the initial cursor position should be placed at search box and after entering the search term when we click on enter it should navigate to first row and depends upon keyboard arrow keys the control should move up and down in the table rows and when we press enter key the first td value of selected row should be captured and the modal window has to be closed.
It means every thing that what we are doing in the modal window should work with keyboard keys instead of mouse clicks.
Is it possible. It is very urgent requirement.
pls help me.
So when the modal window opened the initial cursor position should be placed at search box and after entering the search term when we click on enter it should navigate to first row and depends upon keyboard arrow keys the control should move up and down in the table rows and when we press enter key the first td value of selected row should be captured and the modal window has to be closed.
It means every thing that what we are doing in the modal window should work with keyboard keys instead of mouse clicks.
Is it possible. It is very urgent requirement.
pls help me.
This discussion has been closed.
Replies
[code]
var oTable;
$("#customerdata tbody").click(function(event) {
$(oTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
$('#cust_id').val($(event.target.parentNode).find('td:first').text());
});
oTable = $("#customerdata").dataTable({
"bJQueryUI": true,
"bLengthChange": false,
"bPaginate": false,
"sPaginationType": "full_numbers",
"iDisplayLength ":0
});
$("#editmodal").dialog({
autoOpen:false,
modal:true,
width:600,height:400
});
[/code]
and my html is
[code]
Col1
Col2
dsdsa
2321213232
ddfuy238729
DWEW2
[/code]