Hi Stephen,
Not sure if this could be a solution for your needs, but I was able to make a fast Radio Emulator (select-template "list mode").
The "penalty" is, you need to create an array-list with the numbers in left position and a space before it.
Hoping give some help
Carlos
THE CSS ***************
.active-templates-dropdowntextarea {
width: 100%;
height: 100%;
padding: 0px 5px;
margin: 0px 0px;
border: 0px solid #666;
vertical-align: top;
font: menu;
line-height: 1.4em;
BORDER-TOP: black 2px solid;BORDER-BOTTOM: black 2px solid;
BORDER-RIGHT: black 2px solid;BORDER-LEFT: black 2px solid;
OVERFLOW: auto;POSITION: absolute
}
.active-templates-dropdowntextarea.gecko {
display: block;
margin: 0px;
}
//*******************************
//*******************************
<html>
<head>
<title>ActiveWidgets Grid :: Examples</title>
<style> body, html {font: menu; background: threedface;} </style>
<!-- ActiveWidgets stylesheet and scripts -->
<link href="../../runtime/styles/xp/grid.css" rel="stylesheet" type="text/css" ></link>
<script src="../../runtime/lib/grid.js"></script>
<!-- grid format -->
<style>
// #grid1 .active-column-1 {width: 20px; background-color: threedlightshadow;}
#textagrid { position: relative;}
// margin: -300px -600px -400px 0px; }
</style>
<DIV id=DivMultiSelect type="hidden"></DIV>
<script>
if (!window.My) My=[];
if (!My.Templates) My.Templates=[];
// *********************************************
// DROP-DOWN RADIO NUM-SEL-LIST TEMPLATE
// *********************************************
My.Templates.DropRadio = Active.Templates.Text.subclass();
My.Templates.DropRadio.create = function()
{
var obj = this.prototype;
var ddlist = new Active.HTML.DIV;
ddlist.setTag("select");
ddlist.setId("myDDselect");
ddlist.setClass("templates", "dropdowntextarea");
ddlist.setStyle("height", "72");
ddlist.setAttribute("size", "3");
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") } );
//**********************************************
//FUNCTIONS
// templatet variable provides temporary reference
// to the parent template during edit mode.
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(""));
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+50); //auto-width (remove +50 to fit col width)
template.element().style.padding = 0;
template.element().innerHTML = editor;
var ddSpan = document.getElementById('myselect');
if(!ddSpan) {
ddSpan = document.createElement('span');
ddSpan.id = 'myselect';
document.body.appendChild(ddSpan);
}
document.getElementById('myselect').innerHTML = ddlist ;
// document.all.myselect.innerHTML = ddlist ;
ddlist.element().focus();
}
//EVENTS
obj.setEvent("ondblclick", switchToEditMode );
ddlist.setEvent("onblur", switchToTextMode);
ddlist.setEvent("onclick", switchToTextMode );
//**********************************************
function switchToTextMode(){
if( template ){
var selectedIndex = ddlist.element().selectedIndex;
if(selectedIndex != -1) {
var spacebeforenumber = ddlist.element().options[selectedIndex].text.indexOf(" " ,0);
var value = ddlist.element().options[selectedIndex].text.substring(0,spacebeforenumber)
template.setItemProperty("text", value);
}
template.refresh();
template=null;
}
document.all.myselect.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;
};
};
My.Templates.DropRadio.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.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");
myList = ["0 .- aaaa", "1 .- aaaa","2 .- bbbbb", "3 .- dddd","4 .- eeee",
"5 .- ffff", "6 .- gggg", "7 .- hhhh", "8 .- iiii", "9 .- jjjj", "99 .- zzzz"];
document.getElementById('DivMultiSelect').value = "myList";
});
// asign Edit Templates
var inputsear2 = new My.Templates.DropRadio;
obj.setColumnTemplate(inputsear2, 2);
var inputsear1 = new My.Templates.DropRadio;
obj.setColumnTemplate(inputsear1, 3);
document.write(obj);
</script>
</body>
</html>