3.0 beta 2

Radio button Template

Hi All,

How do I implement a radio button template for this grid?
Stephen
February 28,
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>



February 28,
OK, I need a kindergarden lessons
before=yesterday----after=tomorrow
so, the space needed is after te number (then any text ), a single space between num / text is enought.
and also must call it:
var spaceafternumber = ddlist.element().options[selectedIndex].text.indexOf(" " ,0);
var value = ddlist.element().options[selectedIndex].text.substring(0,spaceafternumber ).
But anyway it is a concept matter, it works as I first post it.
Sorry & Thanks
Carlos
March 1,
Thanks a lot Carlos.
Stephen
March 1,
Hi Carlos,

The above mentioned tips is not what I'm actually looking for. Is there any way I can display radio buttons in the first column of all the rows. I can display the radio buttons by putting the html input string within the data array. Do any one of you have some sort of radio button template?

Regards...
Binu Nadesan.
Stephen
March 1,
Hi,

I need radio buttion and onmouseover event in aba grid. pls help me its very urgent.
Seshadri
May 2,

This topic is archived.

See also:


Back to support forum

Search

Version 2

Looking for AW 2.6 ?
The old site is here.