Hi,
Thaks to all people at this forum for free teaching, especially the experts.
Sometimes whe a grid has a large number of columns, it is difficult to see all fields in a row at a time, so this fuction helps me to see an entire record.
Hope this help,
Thanks
Carlos
<html>
<head>
<title>ActiveWidgets Grid :: Examples</title>
<style> body, html {font: menu; background: threedface;} </style>
<!-- ActiveWidgets stylesheet and scripts -->
<link href="../../runtime/styles/classic/grid.css" rel="stylesheet" type="text/css" ></link>
<script src="../../runtime/lib/grid.js"></script>
<!-- grid format -->
<style>
#grid1 {height: 140px; border: 2px inset; background: white}
#grid2 {height: 100px; border: 2px inset; background: white}
#grid3 {height: 250px; border: 2px inset; background: white}
#grid1 {width: 640px; border: 2px inset; background: white}
#grid3 {width: 470px; border: 2px inset; background: white}
#grid1 .active-column-1 {width: 200px; background-color: threedlightshadow;}
#grid2 {width: 700px; border: 2px inset; background: white}
#grid3 .active-column-1 {width: 320px; background: yellow;}
#grid3 .active-column-0 {width: 120px; background: orange;}
.active-column-0 {text-align: right;}
.active-grid-row {border-bottom: 1px solid threedlightshadow;}
.active-grid-column {border-right: 1px solid threedlightshadow;}
</style>
<!-- grid data -->
<script>
var data1 = [
["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"],
["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"],
["SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"],
["CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"],
["ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"],
["SFTBF", "Softbank Corp. (ADR)", "14,485.840", ".000", "6865"]
];
var data2 = [
["CHKP", "Check Point Software Tech", "4,396.853", "424.769", "1203", "22", "65", "81", "31"],
["MERQ", "Mercury Interactive Corp.", "4,325.488", "444.063", "1822", "47", "56", "14", "99"],
["DOX", "Amdocs Limited", "4,288.017", "1,427.088", "9400", "99", "20", "74", "83"],
["CTXS", "Citrix Systems, Inc.", "3,946.485", "554.222", "1670", "61", "54", "9", "67"],
["KNM", "Konami Corporation (ADR)", "3,710.784", ".000", "4313", "39", "15", "72", "33"]
];
var columns1 = [
"Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"
];
var columns2 = [
"Ticker(2)", "Company Name(2)", "Market Cap.(2)", "$ Sales(2)", "Employees(2)", "Field-6", "field-7", "field-8", "field-9"
];
var DataTempx = [" ", " "];
var columtempx = ["FIELD", "DATA"];
var idxofrow = "";
var fieldval = "";
var headertemp = [];
var headlong = "";
var gridselected = "";
</script>
</head>
<body>
<p>
Here is the first grid:
</p>
<script>
var obj1 = new Active.Controls.Grid;
obj1.setId("grid1");
obj1.setRowProperty("count", data1.length);
obj1.setColumnProperty("count", columns1.length);
obj1.setDataProperty("text", function(i, j){return data1[i][j]});
obj1.setColumnProperty("text", function(i){return columns1[i]});
obj1.setAction("click", function(src){
idxofrow = src.getRowProperty("index");
headertemp = columns1;
headlong = columns1.length;
gridselected = "1";
pickrecord();});
document.write(obj1);
</script>
<p>
And another one...
</p>
<script>
var obj2 = new Active.Controls.Grid;
obj2.setId("grid2");
obj2.setRowProperty("count", data2.length);
obj2.setColumnProperty("count", columns2.length);
obj2.setDataProperty("text", function(i, j){return data2[i][j]});
obj2.setColumnProperty("text", function(i){return columns2[i]});
obj2.setAction("click", function(src){
idxofrow = src.getRowProperty("index");
headertemp = columns2;
headlong = columns2.length;
gridselected = "2";
pickrecord();});
document.write(obj2);
//*******************
</script>
<p>
And also the last Selected Row Entire Record .....
</p>
<script>
var objrec = new Active.Controls.Grid;
objrec.setId("grid3");
document.write(objrec);
//**************************
function pickrecord()
{
DataTempx =[];
var res = 0;
for(var x=0; x< headlong; x++)
{
if(gridselected=="1"){fieldval = obj1.getProperty("data/text", [idxofrow], [x])}
if(gridselected=="2"){fieldval = obj2.getProperty("data/text", [idxofrow], [x])}
DataTempx.push([headertemp[x], fieldval]);
res++;
}
objrec.setColumnCount(columtempx.length);
objrec.setRowCount(headlong);
objrec.setDataProperty("text", function(i, j){return DataTempx[i][j]});
objrec.setColumnProperty("text", function(i){return columtempx[i]});
objrec.refresh()
}
</script>
</body>
</html>
This is pretty cool, however, assuming the rows in grid 2 is somehow bound to the rows in grid 1, how would you select a row in grid 1 and display it in grid 3 while appending the columns from grid 2?
Make sense? First grid could hold company info and second grid could hold company financial info.