On arrow-up arrow-down

does the datagrid activewidget can get the value on arrow-up, arrow-down and send to another frame?
louie
April 28,
I have below example, you can research and develop for your application:
<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)'>&lt;&lt;</button>
        <button onclick='goToPage(-1)'>&lt;</button>
        <span id='pageLabel'></span>
        <button onclick='goToPage(1)'>&gt;</button>
        <button  onclick='goToPage(Infinity)'>&gt;&gt;</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>
ChÃÂºc bÃ¡ÂºÂ¡n thÃÂ nh cÃÂ´ng!
Ns.Thinh (VietNam)
December 16,
This code is for v1.0 not v2.0. The patches directory does not present in v2.0. It does not seem to be implemented. Any ideas of how should it work in v2.0?
Joe
December 16,
This topic is archived.
On arrow-up arrow-down

See also:

Search

New Data Grid

Version 2
