[no subject]

What did I do wrong in this code? I tried to modify a sample and now I am getting errors on the page.

Thanks for your help
vernon

<html>
<head>
<title>Andres Obrero activeWidget :: Examples Modified 10-12-2005 10:08 am</title>
<style> body, html {margin:0px; padding: 0px; overflow: hidden;} </style>


<link href="dyntable/styles/classic/grid.css" rel="stylesheet" type="text/css" ></link>
<script src="dyntable/lib/grid.js"></script>
<script src='eventlib.js'></script>
<script src='dragdroprows.js'></script>
<script src='autoresize.js'></script>
<script src='edit.js'></script>
<script src='multiselect.js'></script>



<style>
.active-controls-grid {height: 100%; font: menu;}

.active-column-0 {width: 18px;}
.active-column-1 {width: 24px;}
.active-column-2 {width: 150px; background-color: threedlightshadow; text-align: right;}
.active-column-3 {width: 100px;}
.active-column-4 {width: 100px;}
.active-column-5 {width: 20px;}
.active-column-6 {width: 20px;}
.active-column-7 {width: 20px;}
.active-column-8 {width: 48px;}

.active-grid-column {border-right: 1px solid threedshadow;}
.active-grid-row {border-bottom: 1px solid threedlightshadow;}
</style>
<style>
.active-edit-mode {
overflow: auto;
padding: 0px;
vertical-align: top;
}

input{font-size:8pt;}
.holly{ background-color:menu; border-bottom:solid 1px blue; margin-bottom:2px; }
</style>


<script>
var myData = [
["1" , "3-2" , "Microsoft Corporation", "Samyn, J", "Peter, T", "1:35.01"],
["1A", "3-2" , "Oracle Corporation", "Samyn, J", "Peter, T", "1:35.01"],
["2" , "3/1" , "SAP AG (ADR)", "Samyn, J", "Peter, T", "1:35.01"],
["3" , "1-2" , "Computer Associates Inter", "Samyn, J", "Peter, T", "1:35.01"],
["4" , "13/1", "Electronic Arts Inc.", "Samyn, J", "Peter, T", "1:35.01"],
["5" , "10/1", "Softbank Corp. (ADR)", "Samyn, J", "Peter, T", "1:35.01"],
["6" , "3-2" , "Veritas Software Corp.", "Samyn, J", "Peter, T", "1:35.01"],
["7" , "3-2" , "Symantec Corporation", "Samyn, J", "Peter, T", "1:35.01"],
["8" , "3-2" , "Infosys Technologies Ltd.", "Samyn, J", "Peter, T", "1:35.01"],
["9" , "3-2" , "Intuit Inc.", "Samyn, J", "Peter, T", "1:35.01"],
["10", "3-2" , "Adobe Systems Incorporate", "Samyn, J", "Peter, T", "1:35.01"],
["11", "3-2" , "PeopleSoft, Inc.", "Samyn, J", "Peter, T", "1:35.01"],
["12", "3-2" , "Siebel Systems, Inc.", "Samyn, J", "Peter, T", "1:35.01"],
["13", "3-2" , "BEA Systems, Inc.", "Samyn, J", "Peter, T", "1:35.01"],
["14", "3-2" , "Synopsys, Inc.", "Samyn, J", "Peter, T", "1:35.01"],
["15", "3-2" , "Check Point Software Tech", "Samyn, J", "Peter, T", "1:35.01"],
["16", "3-2" , "Mercury Interactive Corp.", "Samyn, J", "Peter, T", "1:35.01"],
["17", "3-2" , "Amdocs Limited", "Samyn, J", "Peter, T", "1:35.01"],
["18", "3-2" , "Citrix Systems, Inc.", "Samyn, J", "Peter, T", "1:35.01"],
["19", "3-2" , "Konami Corporation (ADR)", "Samyn, J", "Peter, T", "1:35.01"]
];

var myColumns = [
"PN", "M/L", "Horse Name", "Jockey", "Trainer", "Wt", "Med", "Equipt", "Projected Best Time This Race"
];
</script>
</head>
<body>
<div>
<div style='float:right; width:60%; font-family:verdana; font-size:8pt;'>
<ul>

<li>to expand a row singleclick on a row (after clicking expandMode)</li>

</div>
<div style='width:50%;'>
<button onclick='document.getElementById("data").value=document.getElementById("cluster").innerHTML '>show innerHTML</button>
<button onclick='doEd()'>Edit Mode</button>
<button onclick='doEx()'>Expand Mode</button>
<button onclick='startMulti(); multiCheck();}'>select with checkbox</button>
<button onclick='toggleAll()'>toggle ck</button>
<button onclick='if(checkArr.length==0){startMulti(); multiCheck();}else{alert(checkArr)}'>show ck</button>

<textarea style='width:50%; height:100px;' id='data'></textarea>
</div>
</div>
<script>

// create ActiveWidgets Grid javascript object
var obj = new Active.Controls.Grid;

// set number of rows/columns
obj.setRowProperty("count", myData.length);
obj.setColumnProperty("count", 5);

// provide cells and headers text
obj.setDataProperty("text", function(i, j){return myData[i][j]});
obj.setColumnProperty("text", function(i){return myColumns[i]});

// set headers width/height
obj.setRowHeaderWidth("28px");
obj.setColumnHeaderHeight("20px");

// allow multiple selection
obj.setSelectionProperty("multiple", true);

// define action handler
var message = function(){
window.status = "Grid selection:" +
" latest=" + this.getSelectionProperty("index") +
" full list=" + this.getSelectionProperty("values") +
" (press Ctrl- to select multiple rows)."
}

// assign action handler to grid
obj.setAction("selectionChanged", message);

//****************************
// editable
//****************************
function editFunction (src) {
// what do we need for edit?
//id, row, dataArray
var cell = (window.event) ? window.event.srcElement : event.target;
var hpos =cell.id.split(":");
var cell = (hpos.length==3) ? hpos[hpos.length-1] : 0 ;
//gridasGridObj.setProperty("selection/index", -1); // hacky
//src.refresh();
prepareEdit(this.getId() , src.getProperty("item/index"), cell, myData );
}

//****************************

var row = new Active.Templates.Row;
row.setEvent("ondblclick", function(){this.action("editAction")});
obj.setTemplate("row", row);
obj.setAction("editAction", editFunction);

//****************************
// expandable
//****************************
var expandColumn = 1; // the column to copy in the expanded part
var expandHeight = "70px"; // the height of the expanded part (also: auto)
function expandFunction (src) {
var id = this.getId()
var row = src.getProperty("item/index")
expandRow(this.getId() , src.element().id, src.getProperty("item/index"), expandColumn, expandHeight, myData);
}
//****************************
function expandRow(id, rowid, row, column, height, data){
var expa = document.getElementById(rowid);
if(expa.getAttribute("openRow")=="1"){ // shrink
expa.setAttribute("openRow","0");
expa.style.height = "";
expa.removeChild(document.getElementById("exp_"+row));
}else{ // expand
expa.setAttribute("openRow","1");
expa.style.height = "auto";
var pX = document.createElement("DIV");
pX.id = "exp_"+row;
pX.innerHTML = data[row][column]+"<br>3 Races used data<br>
Race 1 3Sep 10Pha 1 1/8 fst :48.2 1:10.3 1:49.2 3y PaDerby G2 ... 1 4 1/2 1:34.03<br><br>
Race 2 3Sep 10Pha 1 1/8 fst :48.2 1:10.3 1:49.2 3y PaDerby G2 ... 1 4 1/2 1:34.03<br>
Race 3 3Sep 10Pha 1 1/8 fst :48.2 1:10.3 1:49.2 3y PaDerby G2 ... 1 4 1/2 1:34.03<br><br>
Last 3 workouts<br>
21Aug'05 Dmr 5f ft 1:00 h 5/5"; // the data
// either assigning a pX.className = "" or the hard way:
pX.style.border = "solid 1px #DDDDDD";
pX.style.overflow = "auto";
pX.style.width = "400px";
pX.style.height = height;
pX.style.marginLeft = "43px"; // Lineup data under horse name
expa.appendChild(pX);
}
document.getElementById(id+".left.item:"+row).style.height = expa.offsetHeight;
}
//****************************
/*
var row = new Active.Templates.Row;
row.setEvent("onclick", function(){this.action("expandAction")});
obj.setTemplate("row", row);
obj.setAction("expandAction", expandFunction);
*/
//****************************

//****************************

// write grid html to the page
document.write("<div id='cluster'>");
document.write(obj);
document.write("</div>");

var gridasGridObj = obj; // <<<<<<<

function giveMe(e, obj){
alert("hoschi");
}
</script>
<style>
/*
#draggingPart{
position:absolute;
-moz-opacity:0.5; filter:alpha(opacity=50);
*/
}
</style>
<script>
function externalCopyMove(dest, copymove, selRows){
var action = (copymove) ? "Copy" : "Move";
alert(action + " rows[" +selRows + "] to row:" + dest);
var sum = "destination: "+ action +" to: " + dest + "\n";
for(var i=0; i<selRows.length; i++){
for(var j=0; j<myData[i].length-1; j++){
sum += "\"" + myData[i][j] + "\","
}
sum += "\"" + myData[i][myData[i].length-1] + "\"" + "\n";
}
document.getElementById("data").value = sum;

}

function doEx(){
var row = new Active.Templates.Row;
row.setEvent("onclick", function(){this.action("expandAction")});
obj.setTemplate("row", row);
obj.setAction("expandAction", expandFunction);
}
function doEd(){
var row = new Active.Templates.Row;
row.setEvent("ondblclick", function(){this.action("editAction")});
obj.setTemplate("row", row);
obj.setAction("editAction", editFunction);
obj.refresh();
initAllx();
}
</script>
</body>
</html>

vernon

October 13,

What are the errors?
What browser are you trying this in?
Have you tried to take the demo and run it to see if you get errors?
If the demo runs clean, make changes in tiny increments and then you will see where the problem is and you will then be able to know what is wrong.

Jim Hunter

October 13,

I am using IE and simply making changes to your examples to try and learn the product. From what I have seen it is very IMPRESSIVE.

I will follow your suggestion and make incremental changes. My interest for the moment will be concentrating on the 'Expanded area' and I will post any suggs I find. Unfortunately, I am a programmer from the 'old' school - use to coding at the machine level - (now retired). So I am trying to learn these higher level languages for User interfaces.
Thanks for your response.
Vernon

vernon

October 14,

This topic is archived.

[no subject]

See also:

Search

New Data Grid

Version 2