3.0 beta 2

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;
}


Carlos
January 26,

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;
} );
January 26,

////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; }
} );
January 26,

-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);
January 26,
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?
bnadesan
January 31,
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
February 2,
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

roberto bg
February 2,
Hi Roberto,
Take a look at Alex Template, could be easier to understand.
/datagrid.1394/
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 :
/datagrid.2603/
Also I recomend to download Sudhaker samples (full of comments) at,
http://thej2ee.com/ndemo/
Carlos

February 2,
Hi Carlos,

Awaiting for your Tips on Dependent Select box Control template.
Bnadesan
February 5,
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>
February 5,
Hi,

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

Thanks!

lcs
August 3,
Any help?
lcs
August 5,
Ics, please check a first approach in:
/javascript.forum.15537.0/version-2-0-custom-drop.html
HTH
Carlos
August 5,
Hi Carlos,

It works! thks

lcs
August 7,

This topic is archived.

See also:


Back to support forum

Search

Version 2

Looking for AW 2.6 ?
The old site is here.