:: Forum >> Version 1 >>

On arrow-up arrow-down

does the datagrid activewidget can get the value on arrow-up, arrow-down and send to another frame?
louie
Thursday, April 28, 2005
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)
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?
Joe
Friday, December 16, 2005



This topic is archived.

colors move column datagrid control datagrid java key manager source datagrid net redirect datagrid control download report php excel padding code datagrid source linux child control grid html cristal report php alignment resizing application web control source code application you underline grid control simple report java generate call validate download lib runtime crystal report connect dynamic undefined jsp application download bgcolor grid code control read samples code datagrid java script active href datagrid ajax java netscape passing code report php download javascript runtime vb php report script all java control net datagrid application code web navigation xsl jsp double click calender control web while application web datagrid import datagrid event click down php report html editable paste application struts web gpl php download application search control datagrid editable java application connect alignment radio php report crystal help php print report into datagrid ajax javascript doesn ajax sample application csv net code datagrid left con datagrid checkbox java report script jsp application asp code templates case sample java application script java datagrid jsp hover php datagrid ajax datagrid row move mouse dropdown datagrid sample code variable component download datagrid php report generate active
Back to support forum

Forum search