Using the grid in "reverse" mode to show a row

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>


<link href="../../runtime/styles/classic/grid.css" rel="stylesheet" type="text/css" ></link>
<script src="../../runtime/lib/grid.js"></script>


<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>

<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>

Carlos

August 31,

Looks quite cool!

Alex (ActiveWidgets)

September 3,

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.

Ethan

February 3,

This topic is archived.

Using the grid in "reverse" mode to show a row

See also:

Search

New Data Grid

Version 2