A Dream for other Grids

Austin give me new paths to complete my Drop-down Grid, so thanks again Austin.
Differs a lot from his, but also not same functionality.
It is a Multi Master-Detail (sel. by a list) EDITABLE drop-down Grid.
Not finished, canÂ´t find a way to hide all by events (can do it by clicking the cell (in yellow), and curious, in Mozilla hides all on the second click inside the grid ,funny ghost there. (so if want to try.....)
I refuse comments for this one (joke)
(sorry for posting long scripts)
Thanks
Carlos

First the CSS
//******************************
.active-templates-ddgrid {
width: 100%;
height: 100%;
padding: 0px 0px;
margin: -1px 0px;
border: 1px solid #666;
vertical-align: top;
font: menu;
line-height: 1.4em;
POSITION: absolute
}

.active-templates-ddgrid.gecko {
display: block;
margin: 0px;
}
//*******************************

<html>
<head>
<title>ActiveWidgets Grid :: Examples</title>
<style> body, html {font: menu; background: threedface;} </style>


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


<style>
#objmain {height: 200px; border: 2px inset; background: threedface}
</style>

<DIV id=SpanParam1 type="hidden"></DIV>

<script>

// ****************************************************************
// Input Cell Template.
// ****************************************************************
My.Templates.Input = Active.Templates.Text.subclass();

My.Templates.Input.create = function()
{
var obj = this.prototype;

// editor is not part of the template,
// there is only one single instance of editor object.
var editor = new Active.HTML.INPUT;
editor.setClass("templates", "input");
editor.setAttribute("type", "text");
editor.setAttribute("value", function(){
return template.getItemProperty("text");
});

// template variable provides temporary reference
// to the parent template during edit mode.
var template;

function switchToEditMode(){ if (template) { switchToTextMode() }
template = this;
template.element().style.padding = 0;
template.element().innerHTML = editor;
editor.element().focus();
editor.setEvent("ondblclick", switchToTextMode);
}

obj.setEvent("ondblclick", switchToEditMode);

function switchToTextMode(){
var value = editor.element().value;
template.setItemProperty("text", value);
template.refresh();
template = null;
}

editor.setEvent("onblur", switchToTextMode);
};

My.Templates.Input.create();

// *********************************************
// DROP-DOWN LIST+GRID TEMPLATE
// *********************************************
My.Templates.DropListplusGrid = Active.Templates.Text.subclass();
My.Templates.DropListplusGrid.create = function() {
var obj = this.prototype;

var ddlist = new Active.HTML.DIV;
ddlist.setTag("select");
ddlist.setId("myDDselect");
ddlist.setClass("templates", "ddgrid");
ddlist.setStyle("height", "72");
ddlist.setAttribute("size", "4");

var editor = new Active.HTML.INPUT;
editor.setClass("templates", "input");
editor.setStyle("background-color", "lightyellow");
editor.setAttribute("type", "text");
editor.setAttribute("readonly", "true");
editor.setAttribute("value", function(){ return template.getItemProperty("text") } );

//************************************
//********* GRID *********************

var objddgrid = new Active.Controls.Grid;
objddgrid.setId("myDDGrid");
objddgrid.setClass("templates", "ddgrid");
objddgrid.setStyle("display", "none");
objddgrid.setStyle("height", "152");
objddgrid.setStyle("Width", "462");

objddgrid.setColumnHeaderHeight('16px');
objddgrid.setRowHeaderWidth('20px');

var stylesheetX = document.styleSheets[document.styleSheets.length-1];
stylesheetX.addRule('#myDDGrid', 'FONT: MENU');
stylesheetX.addRule('#myDDGrid', 'WIDTH: 200px');
stylesheetX.addRule('#myDDGrid', 'HEIGHT: 100px');
stylesheetX.addRule('#myDDGrid', 'background: snow');
stylesheetX.addRule('#myDDGrid .active-grid-row', "height: 17px");
stylesheetX.addRule("#myDDGrid .active-scroll-left .active-list-item", "height:17px");
//*************** end grid ******************

//FUNCTIONS
// templatet variable provides temporary reference
// to the parent template during edit mode.
var template;
var tmpparam ="";

function switchToEditMode(){
if (template) { switchToTextMode(); }
template = this;

// Options Constructor
tmpparam = eval(document.getElementById('SpanParam1').value) ;
var tmparrData = eval(tmpparam[0][0]);

var optionsHTML = new Array();
for(var i=0; i < eval(tmpparam[0][0]).length; ++i) {
var opt = new Active.System.HTML;
opt.setTag("option");
opt.setContent("text", tmparrData[i]);
optionsHTML.push( opt );
}

ddlist.setContent("options", optionsHTML.join(""));

var el = template.element();
var pos = getAbsolutePos(el);
ddlist.setStyle("left", pos.x);
ddlist.setStyle("top", pos.y + el.offsetHeight);
ddlist.setStyle("width", el.offsetWidth);

template.element().style.padding = 0;
template.element().innerHTML = editor;

var ddSpan1 = document.getElementById('ddarea1');
if(!ddSpan1) {
ddSpan1 = document.createElement('span');
ddSpan1.id = 'ddarea1';
document.body.appendChild(ddSpan1);

ddSpan2 = document.createElement('span');
ddSpan2.id = 'ddarea2';
document.body.appendChild(ddSpan2);

}
objddgrid.setStyle("left", pos.x + el.offsetWidth);
objddgrid.setStyle("top", pos.y + el.offsetHeight );

document.getElementById('ddarea1').innerHTML = ddlist ;
document.getElementById('ddarea2').innerHTML = objddgrid ;
ddlist.element().focus();
}

//EVENTS
obj.setEvent("ondblclick", switchToEditMode );
editor.setEvent("onclick", switchToTextMode );
ddlist.setEvent("onclick", showgridspan );
objddgrid.setEvent("onblur", switchToTextMode );
//**********************************************

function switchToTextMode(){
if( template ){
objddgrid.setStyle("display", "none");
template.refresh();
template=null;
}
document.getElementById('ddarea1').innerHTML ="";
document.getElementById('ddarea2').innerHTML = "";
}

function getAbsolutePos(el) {
var SL = 0, ST = 0;
var is_div = /^div$/i.test(el.tagName);
if (is_div && el.scrollLeft)
SL = el.scrollLeft;
if (is_div && el.scrollTop)
ST = el.scrollTop;
var r = { x: el.offsetLeft - SL, y: el.offsetTop - ST };
if (el.offsetParent) {
var tmp = getAbsolutePos(el.offsetParent);
r.x += tmp.x;
r.y += tmp.y;
}
return r;
};

function showgridspan(){
var valsel="";
var rowsel="";
var tmparrFilter = new Array;
var selectedIndex = ddlist.element().selectedIndex;

if(selectedIndex == 0){
objddgrid.setRowCount(eval(tmpparam[1][0]).length);
objddgrid.setColumnCount(eval(tmpparam[1][1]).length);
objddgrid.getDataText = function(i, j){return eval(tmpparam[1][0])[i][j]}
objddgrid.setDataText = function(value, i, j){eval(tmpparam[1][0])[i][j]=value}
objddgrid.setColumnProperty("text", function(i){return eval(tmpparam[1][1])[i]});
}

if(selectedIndex > 0){
if(selectedIndex == 1){
var keytosearch= eval(tmpparam[2][3]);
var coltosearch= eval(tmpparam[2][2]);
var arraytosearch = tmpparam[2][0];
var colgroup = tmpparam[2][1];
}
if(selectedIndex == 2){
var keytosearch= eval(tmpparam[3][3]);
var coltosearch= eval(tmpparam[3][2]);
var arraytosearch = tmpparam[3][0];
var colgroup = tmpparam[3][1];
}
//alert(arraytosearch);
for(var i=0; i<eval(arraytosearch).length; i++){
if(eval(arraytosearch)[i][coltosearch]==keytosearch){tmparrFilter.push(eval(arraytosearch)[i])}
}

objddgrid.setRowCount(tmparrFilter.length);
objddgrid.setColumnCount(eval(arraytosearch)[0].length);
objddgrid.getDataText = function(i, j){return tmparrFilter[i][j]}
objddgrid.setDataText = function(value, i, j){tmparrFilter[i][j]=value}
objddgrid.setColumnProperty("text", function(i){return eval(colgroup)[i]});
//objddgrid.refresh();
}

for(var i=1; i < 6; ++i) { eval("var inputsear" + i + "= new My.Templates.Input"); }
for(var i=1; i < 6; ++i){ eval("objddgrid.setColumnTemplate(inputsear" + i + "," + i + ")"); }

objddgrid.setAction('click', function(src){
valsel = src.getItemProperty("text");
rowsel = src.getRowProperty("index");
});

objddgrid.refresh();
objddgrid.setStyle("display", "block");
}

};

My.Templates.DropListplusGrid.create();
//******************************************

var myData = [
["DETAIL", "001", "MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"],
["DETAIL", "002", "ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"],
["DETAIL", "003", "SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"],
["DETAIL", "004", "CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"],
["DETAIL", "005", "ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"],
["DETAIL", "006", "SFTBF", "Softbank Corp. (ADR)", "14,485.840", ".000", "6865"],
["DETAIL", "007", "VRTS", "Veritas Software Corp.", "14,444.272", "1,578.658", "5647"],
["DETAIL", "008", "SYMC", "Symantec Corporation", "9,932.483", "1,482.029", "4300"]
];

var myColumns = ["Prev","Customer", "Gross", "Tax", "Total"];
var data2 = [
["006", "CHKP", "Check Point Software Tech1", "4,396.853", "424.769", "1203"],
["004", "MERQ", "Mercury Interactive Corp.1", "4,325.488", "444.063", "1822"],
["004", "MERQ", "Mercury Interactive Corp.1", "4,325.488", "444.063", "1822"],
["005", "DOX", "Amdocs Limited1", "4,288.017", "1,427.088", "9400"],
["001", "DOX", "Amdocs Limited2", "4,288.017", "1,427.088", "9400"],
["001", "DOX", "Amdocs Limited2", "4,288.017", "1,427.088", "9400"],
["003", "CTXS", "Citrix Systems1, Inc.", "3,946.485", "554.222", "1670"],
["002", "IDALO", "Idawo Systems.", "3,946.485", "554.222", "1670"],
["002", "KNM", "Konami Corporation (ADR)1", "3,710.784", ".000", "4313"],
["004", "DOX", "Amdocs Limited", "4,288.017", "1,427.088", "9400"]
];
//***********************************************************

var columns2 = [
"Id", "Ticker(2)", "Company Name(2)", "Market Cap.(2)", "$ Sales(2)", "Employees(2)"
];
var data3 = [
[ "AAAA", "001", "Check Point Software Tech1", "4,396.853", "424.769", "1203"],
["BBBBB", "002", "Mercury Interactive Corp.1", "4,325.488", "444.063", "1822"],
["CC", "002", "Mercury Interactive Corp.1", "4,325.488", "444.063", "1822"],
["DDD", "003", "Amdocs Limited1", "4,288.017", "1,427.088", "9400"],
["E", "003", "Amdocs Limited2", "4,288.017", "1,427.088", "9400"],
["FFF", "003", "Amdocs Limited2", "4,288.017", "1,427.088", "9400"],
["GGG", "004", "Citrix Systems1, Inc.", "3,946.485", "554.222", "1670"],
["HHH", "005", "Idawo Systems.", "3,946.485", "554.222", "1670"],
["IIII", "006", "Konami Corporation (ADR)1", "3,710.784", ".000", "4313"],
["JJJJ", "006", "Amdocs Limited", "4,288.017", "1,427.088", "9400"]
];
//***********************************************************

var columns3 = [
"Id", "Ticker(3)", "Company Name(3)", "Market Cap.(3)", "$ Sales(3)", "Employees(3)"
];

var myList = [
["myList1", "", "", ""],
["data2", "columns2", "myParam3", "myParam4"],
["data2", "columns2", "myParam7", "myParam8"],
["data3", "columns3", "myParam11", "myParam12"]
];

var rowsel = "" ;
var colsel="";
var myParam1 = [[""]];
var myParam2 = [[""]];
var myParam3 = [""];
var myParam4 = [""];
var myParam7 = [""];
var myParam8 = [""];
var myParam11 = [""];
var myParam12 = [""];

// create ActiveWidgets Grid javascript object
var obj = new Active.Controls.Grid;
obj.setId("objmain");
// set number of rows/columns
obj.setRowProperty("count", 8);
obj.setColumnProperty("count", 7);

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

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

obj.setAction('click', function(src){
rowsel = src.getRowProperty("index");
colsel = src.getColumnProperty("index");
if(colsel == 0 || colsel == 4){
myList1 = ["+INFO","BILLS", "INVOICES"];
myParam3 = ["0"];
myParam4 = myData[rowsel][1];
myParam7 = ["0"];
myParam8 = myData[rowsel][1];
myParam11 = ["1"];
myParam12 = myData[rowsel][1];

document.getElementById('SpanParam1').value = "myList";

}
//SpanParam1.refresh();
});

// asign Edit Templates
var inputsear2 = new My.Templates.DropListplusGrid;
obj.setColumnTemplate(inputsear2, 0);
var inputsear3 = new My.Templates.Input;
obj.setColumnTemplate(inputsear3, 1);
var inputsear4 = new My.Templates.Input;
obj.setColumnTemplate(inputsear4, 2);
var inputsear5 = new My.Templates.Input;
obj.setColumnTemplate(inputsear5, 3);
var inputsear6 = new My.Templates.DropListplusGrid;
obj.setColumnTemplate(inputsear6, 4);

document.write(obj);

</script>
</body>
</html>

Forum search