:: Forum >>

On arrow-up arrow-down

does the datagrid activewidget can get the value on arrow-up, arrow-down and send to another frame?
Thursday, April 28, 2005
I have below example, you can research and develop for your application:
<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;}
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.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
            if(rowcount%pagesize > 0)
                end_row = start_row+(rowcount%pagesize);
             end_row = start_row+pagesize;
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;
                    index = start_row;
                if((index > start_row)&&(index <= end_row))
                    index = index-1;
                    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;
                    index = end_row;
                if((index >= start_row)&&(index < end_row))
                    index = index+1;
                    index = end_row;
            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>");
    <!-- 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>
    <!-- button click handler -->
    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
        /*my code here*/

Chúc bạn thành công!
Ns.Thinh (VietNam)
Friday, December 16, 2005
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?
Friday, December 16, 2005

This topic is archived.

Back to support forum

Forum search