Drop-down Editable Textarea Template....

As a result of mixing Alex and Sudhaker templates, this is my "dropping" approach.
-This line is needed into the BODY
<SPAN id=myselect></SPAN>

-Can be used as Not-Editable just by erasing remarks in:
// editarea.setAttribute("readonly", "true");

-Also icrease the height in:
editarea.setStyle("height", "52");

Please Report any bugs found.
Hope this helps

// *********************************************
// DROP-DOWN TEXTAREA (editable)
// *********************************************
My.Templates.DropEditTA = Active.Templates.Text.subclass();
My.Templates.DropEditTA.create = function()
{
var obj = this.prototype;

var editarea = new Active.HTML.TEXTAREA;
editarea.setId("myDDtxt");
editarea.setClass("templates", "dropdowntextarea");
editarea.setStyle("height", "52");
// editarea.setAttribute("readonly", "true");
editarea.setAttribute("type", "text");
editarea.setContent("text", function(){ return template.getItemProperty("text") });

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 document.all.myDDtxt.value } );

//EVENTS
obj.setEvent("ondblclick", switchToEditMode );
editor.setEvent("onclick", switchToTextMode );
editarea.setEvent("onblur", switchToTextMode );

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

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

document.all.myselect.innerHTML=editarea;

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

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

document.all.myDDtxt.focus();
}

function switchToTextMode(){
var value = document.all.myDDtxt.value;
template.setItemProperty("text", value);
document.all.myselect.innerHTML="";
template.refresh();
template=null;
}

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.DropEditTA.create();

//**************************************
//**************************************
And as usual 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;
}

I forget to disable the -Enter- key for this one, but found a better solution on a JS-FAQ that could be used anywere in the Grid. Replaces Enter with a single sapace, and TAB with four spaces, add more keys if need. So to apply, just insert this code into EVENTS SECTION.
Thanks
Carlos

editarea.setEvent("onkeydown", function(item){
tabspace = " "; //tab 4 spaces
onespace = " "; //single space for Enter or other key
if(event.keyCode==9){
item.selection=document.selection.createRange(); //cursor location
item.selection.text=tabspace; //insert at cursor location
}
if(event.keyCode==13){
item.selection=document.selection.createRange(); //cursor location
item.selection.text=onespace; //insert at cursor location
}
event.returnValue = false;
} );

////Sorry, this is the right one

//***********************************
editarea.setEvent("onkeydown", function(item){
tabspace = " "; //tab space
onespace = " "; //single space for Enter or other key
if(event.keyCode==9){
item.selection=document.selection.createRange(); //cursor location
item.selection.text=tabspace; //insert at cursor location
event.returnValue = false; }
if(event.keyCode==13){
item.selection=document.selection.createRange(); //cursor location
item.selection.text=onespace; //insert at cursor location
event.returnValue = false; }
} );

-Can be used as Not-Editable just by erasing remarks in:
// editarea.setAttribute("readonly", "true");
And also for Not-Editable remove the lines:
var value = document.all.myDDtxt.value;
template.setItemProperty("text", value);

Hi Carlos,

Can we use the select Template so that based on the selection of one of the list boxes in the grid the values gets populated in the other select box/template?

Hi Bnadesan,
I'm hands on the selects now, I'll come back next week with a work-around solution ( not very elegant) . (nee to test some different choices and make a clean sample). but, good news! what you ask for is possible-.
Carlos

i'm new to javascript and this grid is very intresting.. but i've some problems with templates. Can you help me? i 'd like to see a guide to use the template "DropEditTA" in the file that you give as sample "\activewidgets-grid-1.0.0-free\ActiveWidgets\examples\grid\basic.html"
thanks

Hi Roberto,
Take a look at Alex Template, could be easier to understand.
http://www.activewidgets.com/messages/1394-31.htm
Just put the large code at the top of any page into SCRIPT area.
OR: add it to the file grid.js / OR: add it to your own "myfilename.js"
(last one needs a reference to this file at the top of main page [same as grid.js] )
Then add the CSS style to the file grid.css /OR: create your own "myfilename.css" with a new css reference, as any page do with grid.css.
Then define myData & put last green code box, and that's it.
I remember i post a complete page :
http://www.activewidgets.com/messages/2603-3.htm
Also I recomend to download Sudhaker samples (full of comments) at,
http://thej2ee.com/ndemo/
Carlos

Hi Carlos,

Awaiting for your Tips on Dependent Select box Control template.

Here is the simplest solution, It's not a Template (still working on it - but not really sure if could be done [quite sophisticate]), but this simulation inside a page can do the job.
Enjoy!
Carlos



<html>
<head>
<title>ActiveWidgets Grid :: Examples</title>
<style> body, html {margin:0px; padding: 0px; overflow: hidden;} </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>
.active-controls-grid {height: 100%; font: menu;}

.active-column-0 {width: 80px;}
.active-column-1 {width: 200px;}
.active-column-2 {text-align: right;}
.active-column-3 {text-align: right;}
.active-column-4 {text-align: right;}

.active-grid-column {border-right: 1px solid threedlightshadow;}
.active-grid-row {border-bottom: 1px solid threedlightshadow;}
</style>

<!-- grid data -->
<script>

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"],
["INFY", "Infosys Technologies Ltd.", "9,763.851", "830.748", "15400"],
["INTU", "Intuit Inc.", "9,702.477", "1,650.743", "6700"]
];

var myColumns = [
"Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"
];

var States = [["0001", "Ohio"], ["0002", "Florida"], ["0003", "California"]];

var Cities = [
["0001", "Dayton"], ["0002", "Miami"],
["0002", "Orlando"], ["0003", "L.A."],
["0003", "San Fco."], ["0003", "Palo Alto"]
];

</script>
</head>
<body>
<script>

var dataText = [[]];
var valsel="";
var colsel="";
var rowsel="";
var iszoom=0;
var updateyes=0;
var Xtemplate ;
var el="";
var pos = "";
var Otemplate = "";
var passfind=[];

// create ActiveWidgets Grid javascript object
var obj = new Active.Controls.Grid;
obj.setId("objmain");
// set number of rows/columns
obj.setRowProperty("count", 10);
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("20px");

obj.setAction('click', function(src){
valsel = src.getItemProperty("text");
rowsel = src.getRowProperty("index");
colsel = src.getColumnProperty("index");
iscolforsel=0;
if( colsel == 0) { iscolforsel=1; colzero(); };
if( colsel == 1) { iscolforsel=1; colone(); };
} );

//******* FUNCTIONS ********
function colzero(){passfind=["none"]; passdata=["passfind", "States", "Cities"]}
function colone(){passfind=[myData[rowsel][0]]; passdata=["passfind", "States", "Cities"]}


//***** SIMULATED TEMPLATE ******
//********************************
var template = "";
//***********************************
var ddlist = new Active.HTML.DIV;
ddlist.setTag("select");
ddlist.setId("myDDselect");
ddlist.setClass("templates", "input");
// ddlist.setStyle("height", "72");
//**********************************************

function switchToEditMode(){
if (template ) { switchToTextMode() }
if(iscolforsel==1){
template = obj.getRowTemplate(rowsel).getItemTemplate(colsel) ;

// Options Constructor
var tmparrOne = eval(passdata[0]);
var tmparrTwo = eval(passdata[1]);
var tmparrThree = eval(passdata[2]);
var tmparrData =[];

if (tmparrOne[0]=="none"){
for(var x=0; x<tmparrTwo.length; x++) {tmparrData.push(tmparrTwo[x][1])}
}
else{
var valueToSearch = tmparrOne[0] ;
var keytosearch = "";

for(var x=0; x<tmparrTwo.length; x++) {
if(tmparrTwo[x][1]==valueToSearch){
keytosearch=tmparrTwo[x][0];
} }

for(var i=0; i<tmparrThree.length; i++){
if(keytosearch==tmparrThree[i][0]){tmparrData.push(tmparrThree[i][1])}
}
}

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 ;
ddlist.element().focus();
} }

//EVENTS
obj.setEvent("ondblclick", switchToEditMode );
obj.setEvent("onblur", switchToTextMode);
ddlist.setEvent("onblur", switchToTextMode);
ddlist.setEvent("onchange", switchToTextMode );

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;
} }
//***** END OF SIMULATED TEMPLATE ******
//***************************************
// write grid html to the page
document.write(obj);

</script>

</body>
</html>

Hi,

Needed Drop-down Editable Textarea Template for grid v2. Anyone can help to convert the v1 example to v2?

Thanks!

Any help?

Ics, please check a first approach in:
/javascript.forum.15537.0/version-2-0-custom-drop.html
HTH

Hi Carlos,

It works! thks