<html>
<head>
<title>Example about key event</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="control/runtime/styles/xp/grid.css" rel="stylesheet" type="text/css" >
<script src="control/runtime/lib/grid.js"></script>
<script src="control/patches/paging1.js"></script>
<style type="text/css">
<!--
.active-controls-grid {height:80%; width:80%; font:Arial, Helvetica, sans-serif;}
.active-column-0 {width:40pt;
.active-column-1 {width: 115pt;}
.active-column-2 {width: 60pt;}
.active-column-3 {width: 100pt;}
.active-column-4 {width: 100pt; }
.active-grid-column {border-right: 1px solid black;}
.active-grid-row {border-bottom: 1px solid black;}
.active-templates-header{font-weight:bold; color:green; text-align:center;}
-->
</style>
</head>
<body>
<script>
var myTitle=["Colum1", "Colum1", "Colum1", "Colum1", "Colum1"];
var myData=[
["01", "Nguyá»â¡n VÃÆn A", "Nam", "01-01-1977","Viá»â¡t Nam"],["02", "Nguyá»â¡n VÃÆn An", "Nam", "01-01-1977","Viá»â¡t Nam"],
["03", "Nguyá»â¡n VÃÆn Anh", "Nam", "01-01-1977","Viá»â¡t Nam"],["04", "Nguyá»â¡n VÃÆn Ba", "Nam", "01-01-1977","Viá»â¡t Nam"],
["05", "Nguyá»â¡n VÃÆn Ban", "Nam", "01-01-1977","Viá»â¡t Nam"],["06", "Nguyá»â¡n VÃÆn Be", "Nam", "01-01-1977","Viá»â¡t Nam"],
["07", "Nguyá»â¡n VÃÆn Bê", "Nam", "01-01-1977","Viá»â¡t Nam"],["08", "Nguyá»â¡n VÃÆn Bế", "Nam", "01-01-1977","Viá»â¡t Nam"],
["09", "Nguyá»â¡n VÃÆn Bá»?", "Nam", "01-01-1977","Viá»â¡t Nam"],["10", "Nguyá»â¡n VÃÆn Bá»Æ", "Nam", "01-01-1977","Viá»â¡t Nam"],
["11", "Nguyá»â¡n VÃÆn Bo", "Nam", "01-01-1977","Viá»â¡t Nam"],["12", "Nguyá»â¡n VÃÆn Bô", "Nam", "01-01-1977","Viá»â¡t Nam"],
["13", "Nguyá»â¡n VÃÆn Biợ", "Nam", "01-01-1977","Viá»â¡t Nam"],["14", "Nguyá»â¡n VÃÆn Biết", "Nam", "01-01-1977","Viá»â¡t Nam"],
["15", "Nguyá»â¡n VÃÆn Bình", "Nam", "01-01-1977","Viá»â¡t Nam"],["16", "Nguyá»â¡n VÃÆn Bðng", "Nam", "01-01-1977","Viá»â¡t Nam"],
["17", "Nguyá»â¡n VÃÆn Bẹ", "Nam", "01-01-1977","Viá»â¡t Nam"],["18", "Nguyá»â¡n VÃÆn BÃÂ", "Nam", "01-01-1977","Viá»â¡t Nam"],
["19", "Nguyá»â¡n VÃÆn Bông", "Nam", "01-01-1977","Viá»â¡t Nam"],["20", "Nguyá»â¡n Thá»⹠Thu ", "Nữ", "01-01-1977","Viá»â¡t Nam"],
["21", "Nguyá»â¡n VÃÆn Thð", "Nam", "01-01-1977","Viá»â¡t Nam"],["22", "Nguyá»â¡n VÃÆn Thuý", "Nam", "01-01-1977","Viá»â¡t Nam"],
["23", "Nguyá»â¡n VÃÆn Thðáng", "Nam", "01-01-1977","Viá»â¡t Nam"],["24", "Nguyá»â¡n VÃÆn Thðởng", "Nam", "01-01-1977","Viá»â¡t Nam"],
["25", "Nguyá»â¡n VÃÆn ThuáºÂn", "Nam", "01-01-1977","Viá»â¡t Nam"],["26", "Nguyá»â¡n VÃÆn Thi", "Nam", "01-01-1977","Viá»â¡t Nam"],
["27", "Nguyá»â¡n VÃÆn Thá»â¹nh", "Nam", "01-01-1977","Viá»â¡t Nam"],["28", "Nguyá»â¡n VÃÆn Thân", "Nam", "01-01-1977","Viá»â¡t Nam"],
["29", "Nguyá»â¡n VÃÆn Thang", "Nam", "01-01-1977","Viá»â¡t Nam"],["30", "Nguyá»â¡n VÃÆn TháºÂn", "Nam", "01-01-1977","Viá»â¡t Nam"],
["31", "Nguyá»â¡n VÃÆn Thành", "Nam", "01-01-1977","Viá»â¡t Nam"],["32", "Nguyá»â¡n VÃÆn Thanh", "Nam", "01-01-1977","Viá»â¡t Nam"],
["33", "Nguyá»â¡n VÃÆn ThÃÆng", "Nam", "01-01-1977","Viá»â¡t Nam"],["34", "Nguyá»â¡n VÃÆn Thắng", "Nam", "01-01-1977","Viá»â¡t Nam"],
["35", "Nguyá»â¡n VÃÆn Thá", "Nam", "01-01-1977","Viá»â¡t Nam"],["36", "Nguyá»â¡n VÃÆn Thợ", "Nam", "01-01-1977","Viá»â¡t Nam"],
["37", "Nguyá»â¡n VÃÆn Thuá»·", "Nam", "01-01-1977","Viá»â¡t Nam"],["38", "Nguyá»â¡n VÃÆn Thinh", "Nam", "01-01-1977","Viá»â¡t Nam"],
["39", "Nguyá»â¡n VÃÆn Thuá»â¢c", "Nam", "01-01-1977","Viá»â¡t Nam"],["40", "Nguyá»â¡n VÃÆn ", "Nam", "01-01-1977","Viá»â¡t Nam"],
["41", "Trần Thá»⹠Thu ", "Nữ", "01-01-1977","Viá»â¡t Nam"],["42", "Trần VÃÆn Thð", "Nam", "01-01-1977","Viá»â¡t Nam"],
["43", "Trần VÃÆn Thuý", "Nam", "01-01-1977","Viá»â¡t Nam"],["44", "Trần VÃÆn Thðáng", "Nam", "01-01-1977","Viá»â¡t Nam"],
["45", "Trần VÃÆn Thðởng", "Nam", "01-01-1977","Viá»â¡t Nam"],["46", "Trần VÃÆn ThuáºÂn", "Nam", "01-01-1977","Viá»â¡t Nam"],
["47", "Trần VÃÆn Thi", "Nam", "01-01-1977","Viá»â¡t Nam"],["48", "Trần VÃÆn Thá»â¹nh", "Nam", "01-01-1977","Viá»â¡t Nam"],
["49", "Trần VÃÆn Thân", "Nam", "01-01-1977","Viá»â¡t Nam"],["50", "Trần VÃÆn Thang", "Nam", "01-01-1977","Viá»â¡t Nam"],
["51", "Trần VÃÆn TháºÂn", "Nam", "01-01-1977","Viá»â¡t Nam"],["52", "Trần VÃÆn Thành", "Nam", "01-01-1977","Viá»â¡t Nam"],
["53", "Trần VÃÆn Thanh", "Nam", "01-01-1977","Viá»â¡t Nam"],["54", "Trần VÃÆn ThÃÆng", "Nam", "01-01-1977","Viá»â¡t Nam"],
["55", "Trần VÃÆn Thắng", "Nam", "01-01-1977","Viá»â¡t Nam"],["56", "Trần VÃÆn Thá", "Nam", "01-01-1977","Viá»â¡t Nam"],
["57", "Trần VÃÆn Thợ", "Nam", "01-01-1977","Viá»â¡t Nam"],["58", "Trần VÃÆn Thuá»·", "Nam", "01-01-1977","Viá»â¡t Nam"],
["59", "Trần VÃÆn Thinh", "Nam", "01-01-1977","Viá»â¡t Nam"],["60", "Trần VÃÆn Thuá»â¢c", "Nam", "01-01-1977","Viá»â¡t Nam"],
];
var obj = new Active.Controls.Grid;
var row = new Active.Templates.Row; //add double click event
row.setEvent("ondblclick", function(){this.action("myAction")});
obj.setTemplate("row", row);
obj.setModel("row", new Active.Rows.Page);
obj.setColumnHeaderHeight(25);
obj.setProperty("row/count", myData.length-1);
obj.setProperty("column/count", 5);
obj.setProperty("data/text", function(i, j){return myData[i][j]});
obj.setProperty("column/texts", myTitle);
obj.setProperty("row/pageSize", 25);
/* Proccess key event */
var index=0;
var start_row=0; //start row on current page
var end_row=0; //end row on current page
var total_page=0; //total pages
var current_page = 0; //current page selected
var defaultEventHandler = obj.getEvent("onkeydown"); //get event handle
/* function set key event by us define*/
obj.setEvent("onkeydown", function(e){
var pagesize = this.getProperty("row/pageSize"); //total row on page
var rowcount = myData.length-1; //total rows (length) in myData array
start_row = (current_page*pagesize); //caculation posision start row
//if current_page different total_pages-1
if(current_page != total_page-1)
end_row = start_row+pagesize;//dong ket thuc
else{
if(rowcount%pagesize > 0)
end_row = start_row+(rowcount%pagesize);
else
end_row = start_row+pagesize;
}
end_row--;
if(event.keyCode==13){ // enter key
// need to move to the next right cell
}
else if(event.keyCode==37){ // left key
// move the selection to the left 1 cell
}
else if(event.keyCode==39){ // right key
// move the selection to the right 1 cell
}
else if(event.keyCode==38){ // UP key
// move the selection up 1 cell
if(current_page >0){
if((index > start_row)&&(index <= end_row))
index = index-1;
else
index = start_row;
}
else{
if((index > start_row)&&(index <= end_row))
index = index-1;
else
index = 0;
}
this.setSelectionIndex(index); //set selection index
}
else if(event.keyCode==40){ // DOWN key
// move the selection down 1 cell
if(current_page > 0){
if((index >= start_row)&&(index < end_row))
index = index+1;
else
index = end_row;
}
else{
if((index >= start_row)&&(index < end_row))
index = index+1;
else
index = end_row;
}
this.setSelectionIndex(index);
}
else{
index = 0;
defaultEventHandler.call(this, event);
event.returnValue = false;
}
//display test result
window.status="Row index: "+index+" in limit ["+start_row+" to "+end_row+"] of "+parseInt(myData.length-1)+" row(s), current page: "+current_page+"(+1), value of col[1]: "+myData[index][1];
} );
//click event selection
obj.setAction("click", function(src){
index = parseInt(src.getProperty("item/index")); //to determine current row was selected
});
//selection changed event row
obj.setAction("selectionChanged", function(){
window.status="Row index: "+index+" in limit ["+start_row+" to "+end_row+"] of "+parseInt(myData.length-1)+" row(s), current page: "+current_page+"(+1), value of col[1]: "+myData[index][1];
});
//double click event
obj.setAction("myAction", myFunction);
function myFunction (src){
alert("double click me!");
}
//write report grid
document.write("<div align=\"center\">"+obj+"</div>");
</script>
<!-- bottom page control buttons -->
<div align="center">
<button onclick='goToPage(-Infinity)'><<</button>
<button onclick='goToPage(-1)'><</button>
<span id='pageLabel'></span>
<button onclick='goToPage(1)'>></button>
<button onclick='goToPage(Infinity)'>>></button>
</div>
<p>
<!-- button click handler -->
<script>
function goToPage(delta){
var count = parseInt(obj.getProperty("row/pageCount"));
var number = parseInt(obj.getProperty("row/pageNumber"));
number += delta;
if (number < 0) {number = 0}
if (number > count-1) {number = count-1}
document.getElementById('pageLabel').innerHTML = "Trang " + (number + 1) + " trên " + count + " ";
obj.setProperty("row/pageNumber", number);
/*my code here*/
current_page = number;
total_page = count;
index = current_page*parseInt(obj.getProperty("row/pageSize"));//to determine current row is selected when it was inited page
obj.setSelectionIndex(index);
/*my code here*/
obj.refresh();
}
goToPage(0);
</script>
</body>
</html>
This topic is archived.