A work-around for multiple column/select Template......
OK, I surrender (just for now and with the select Template ;-O). This is the best between worst solutions I am able to find ( not true , found other, but too slow and complicated).
Consist in pass list values (as array name) through a predefined DIV, this permit different lists for each column, but also conditionally for the same column and [dependant of anything ;-) ]. Note the Template reffers the div by ID, so if needed, change "divname.setId" on both sides (Template and page).
Here is a small sample (Template Included )
Carlos
<html>
<head>
<title>ActiveWidgets Grid :: Examples</title>
<style> body, html {font: menu; background: threedface;} </style>
<!-- ActiveWidgets stylesheet and scripts -->
<link href="runtime/grid.css" rel="stylesheet" type="text/css" ></link>
<script src="runtime/grid.js"></script>
<!-- grid format -->
<style>
// #grid1 .active-column-1 {width: 20px; background-color: threedlightshadow;}
#textagrid { position: relative;}
// margin: -300px -600px -400px 0px; }
</style>
<!-- grid data -->
<script>
// *********************************************
// MULTIPLE-SELECT TEMPLATE
// *********************************************
My.Templates.MultiSelect = Active.Templates.Text.subclass();
My.Templates.MultiSelect.create = function()
{
var obj = this.prototype;
var ddlist = new Active.HTML.DIV;
ddlist.setTag("select");
ddlist.setId("myDDselect");
ddlist.setClass("templates", "input");
//EVENTS
obj.setEvent("ondblclick", switchToEditMode );
ddlist.setEvent("onblur", switchToTextMode);
ddlist.setEvent("onchange", switchToTextMode );
var template;
function switchToEditMode(){
if (template ) { switchToTextMode() }
template = this;
// Options Constructor
var tmparrData = eval(document.getElementById('DivMultiSelect').value) ;
var optionsHTML = new Array();
for(var i=0; i < tmparrData.length; ++i) {
var opt = new Active.System.HTML;
opt.setTag("option");
opt.setContent("text", tmparrData[i]);
optionsHTML.push( opt );
}
ddlist.setContent("options", optionsHTML.join(""));
template.element().style.padding = 0;
template.element().innerHTML = ddlist ;
ddlist.element().selectedIndex = -1 ;
}
function switchToTextMode(){
if (template){
if(ddlist.element().selectedIndex != -1){
var selectedIndex = ddlist.element().selectedIndex;
var value = ddlist.element().options[selectedIndex].text
template.setItemProperty("text", value);
}
template.refresh();
template=null;
}
}
};
My.Templates.MultiSelect.create();
//******************************************
var myData = [
["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"],
["VRTS", "Veritas Software Corp.", "14,444.272", "1,578.658", "5647"],
["SYMC", "Symantec Corporation", "9,932.483", "1,482.029", "4300"]
];
var myColumns = ["Prev","Customer", "Gross", "Tax", "Total"];
var myList = [" "];
var rowsel = "" ;
var colsel="";
// 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", 5);
// 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 == 2){
if(rowsel>4){ myList = ["fffff","gggg", "hhhhhhh"];}
else {myList = ["lllll","oooooo", "mmmmmmmmmm","nnnnnnnn", "qqqqqqqq"];}
divforselects.setAttribute("value", "myList");
divforselects.refresh();
}
if(colsel == 3){
if(rowsel>3){ myList = ["yyyyy","zzzzz", "xxxxx"]; }
else { myList = ["aaaaa","bbbbb", "dkkkkkkk","bbbbb", "dkkkkkkk"]; }
divforselects.setAttribute("value", "myList");
divforselects.refresh();
}
});
// asign Edit Templates
var inputsear2 = new My.Templates.MultiSelect;
obj.setColumnTemplate(inputsear2, 2);
var inputsear1 = new My.Templates.MultiSelect;
obj.setColumnTemplate(inputsear1, 3);
divforselects = new Active.HTML.DIV;
divforselects.setId("DivMultiSelect");
divforselects.setAttribute("type", "text");
divforselects.setAttribute("value", "myList");
divforselects.setAttribute("hidden", "true");
document.write(obj);
document.write(divforselects);
</script>
</body>
</html>
Consist in pass list values (as array name) through a predefined DIV, this permit different lists for each column, but also conditionally for the same column and [dependant of anything ;-) ]. Note the Template reffers the div by ID, so if needed, change "divname.setId" on both sides (Template and page).
Here is a small sample (Template Included )
Carlos
<html>
<head>
<title>ActiveWidgets Grid :: Examples</title>
<style> body, html {font: menu; background: threedface;} </style>
<!-- ActiveWidgets stylesheet and scripts -->
<link href="runtime/grid.css" rel="stylesheet" type="text/css" ></link>
<script src="runtime/grid.js"></script>
<!-- grid format -->
<style>
// #grid1 .active-column-1 {width: 20px; background-color: threedlightshadow;}
#textagrid { position: relative;}
// margin: -300px -600px -400px 0px; }
</style>
<!-- grid data -->
<script>
// *********************************************
// MULTIPLE-SELECT TEMPLATE
// *********************************************
My.Templates.MultiSelect = Active.Templates.Text.subclass();
My.Templates.MultiSelect.create = function()
{
var obj = this.prototype;
var ddlist = new Active.HTML.DIV;
ddlist.setTag("select");
ddlist.setId("myDDselect");
ddlist.setClass("templates", "input");
//EVENTS
obj.setEvent("ondblclick", switchToEditMode );
ddlist.setEvent("onblur", switchToTextMode);
ddlist.setEvent("onchange", switchToTextMode );
var template;
function switchToEditMode(){
if (template ) { switchToTextMode() }
template = this;
// Options Constructor
var tmparrData = eval(document.getElementById('DivMultiSelect').value) ;
var optionsHTML = new Array();
for(var i=0; i < tmparrData.length; ++i) {
var opt = new Active.System.HTML;
opt.setTag("option");
opt.setContent("text", tmparrData[i]);
optionsHTML.push( opt );
}
ddlist.setContent("options", optionsHTML.join(""));
template.element().style.padding = 0;
template.element().innerHTML = ddlist ;
ddlist.element().selectedIndex = -1 ;
}
function switchToTextMode(){
if (template){
if(ddlist.element().selectedIndex != -1){
var selectedIndex = ddlist.element().selectedIndex;
var value = ddlist.element().options[selectedIndex].text
template.setItemProperty("text", value);
}
template.refresh();
template=null;
}
}
};
My.Templates.MultiSelect.create();
//******************************************
var myData = [
["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"],
["VRTS", "Veritas Software Corp.", "14,444.272", "1,578.658", "5647"],
["SYMC", "Symantec Corporation", "9,932.483", "1,482.029", "4300"]
];
var myColumns = ["Prev","Customer", "Gross", "Tax", "Total"];
var myList = [" "];
var rowsel = "" ;
var colsel="";
// 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", 5);
// 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 == 2){
if(rowsel>4){ myList = ["fffff","gggg", "hhhhhhh"];}
else {myList = ["lllll","oooooo", "mmmmmmmmmm","nnnnnnnn", "qqqqqqqq"];}
divforselects.setAttribute("value", "myList");
divforselects.refresh();
}
if(colsel == 3){
if(rowsel>3){ myList = ["yyyyy","zzzzz", "xxxxx"]; }
else { myList = ["aaaaa","bbbbb", "dkkkkkkk","bbbbb", "dkkkkkkk"]; }
divforselects.setAttribute("value", "myList");
divforselects.refresh();
}
});
// asign Edit Templates
var inputsear2 = new My.Templates.MultiSelect;
obj.setColumnTemplate(inputsear2, 2);
var inputsear1 = new My.Templates.MultiSelect;
obj.setColumnTemplate(inputsear1, 3);
divforselects = new Active.HTML.DIV;
divforselects.setId("DivMultiSelect");
divforselects.setAttribute("type", "text");
divforselects.setAttribute("value", "myList");
divforselects.setAttribute("hidden", "true");
document.write(obj);
document.write(divforselects);
</script>
</body>
</html>
Carlos
February 8,