All the instances of the Select box/Control has the Same Content
Listed below is the snippet of the Select template sample code. If I apply the select Template to two columns ( say apply the obj.setColumnTemplate(dropBox3,0) & obj.setColumnTemplate(dropBox4,1)). The Select object shows the same number of items for both the columns (i.e column 0 and column 1). Can any of you let me know what the problem here might be ...
<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>
if (!window.Prima) Prima=[];
if (!Prima.Templates) Prima.Templates=[];
Prima.Templates.StatusSelect = Active.Templates.Text.subclass();
Prima.Templates.StatusSelect.prototype._options = new Array();
Prima.Templates.StatusSelect.create = function()
{
var obj = this.prototype;
//------------------------------------------------------------
//Add the text value pair to the select dropdown list
//------------------------------------------------------------
obj.addOption = function( text, value )
{
this._options.push( new Array( value ? value : text, text) );
}
obj.clearOptions = function()
{
this._options = new Array();
}
obj.getOptions = function()
{
return this._options;
}
// editor is not part of the template,
// there is only one single instance of editor object.
var editor = new Active.HTML.DIV;
editor.setTag("select");
editor.setClass("templates", "input");
editor.setAttribute("type", "text");
editor.setEvent("onblur", function(event) { this.switchToTextMode( event ); } );
editor.setContent( "options", function()
{
var text = template.getItemProperty("text");
var inputOptions = obj._options;
var optionsHTML = new Array();
for( i=0; i< inputOptions.length; i++ )
{
var oTag = new Active.System.HTML();
var val = inputOptions[i][0];
var txt = inputOptions[i][1];
oTag.setTag("option");
oTag.setAttribute( "value", val );
oTag.setContent("text",inputOptions[i][1]);
if ( text==txt )
{
oTag.setAttribute( "selected","true" );
}
optionsHTML.push( oTag );
}
return optionsHTML.join("");
});
// template variable provides temporary reference
// to the parent template during edit mode.
var template;
function switchToEditMode()
{
template = this;
template.element().style.padding = 0;
template.element().innerHTML = editor;
editor.element().focus();
}
obj.setEvent("ondblclick", switchToEditMode);
function switchToTextMode()
{
var originalText = template.getItemProperty("text");
var value = editor.element().value;
var selectedIndex = editor.element().selectedIndex;
var text = editor.element().options[selectedIndex].text;
// we want to compare the text in the grid
// grid display only the text
if(originalText != text)
{
template.setItemProperty("text", text);
template.setItemProperty("value", value);
if(obj.onChangeEvent)
{
obj.onChangeEvent();
}
}
template.refresh();
template = null;
}
obj.onChangeEvent = function()
{
// alert("User must override this function to recieve the events");
}
editor.setEvent("onblur", switchToTextMode);
};
Prima.Templates.StatusSelect.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"],
["INFY", "Infosys Technologies Ltd.", "9,763.851", "830.748", "15400"],
["INTU", "Intuit Inc.", "9,702.477", "1,650.743", "6700"],
["ADBE", "Adobe Systems Incorporate", "9,533.050", "1,230.817", "3341"],
["PSFT", "PeopleSoft, Inc.", "8,246.467", "1,941.167", "8180"],
["SEBL", "Siebel Systems, Inc.", "5,434.649", "1,417.952", "5909"],
["BEAS", "BEA Systems, Inc.", "5,111.813", "965.694", "3063"],
["SNPS", "Synopsys, Inc.", "4,482.535", "1,169.786", "4254"],
["CHKP", "Check Point Software Tech", "4,396.853", "424.769", "1203"],
["MERQ", "Mercury Interactive Corp.", "4,325.488", "444.063", "1822"],
["DOX", "Amdocs Limited", "4,288.017", "1,427.088", "9400"],
["CTXS", "Citrix Systems, Inc.", "3,946.485", "554.222", "1670"],
["KNM", "Konami Corporation (ADR)", "3,710.784", ".000", "4313"]
];
var myColumns = [
"Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"
];
</script>
</head>
<body>
<script>
// create ActiveWidgets Grid javascript object
var obj = new Active.Controls.Grid;
// set number of rows/columns
obj.setRowProperty("count", 20);
obj.setColumnProperty("count", 5);
// provide cells and headers text
obj.setDataProperty("text", function(i, j){return myData[i][j]});
obj.setColumnProperty("text", function(i){return myColumns[i]});
// set headers width/height
obj.setRowHeaderWidth("28px");
obj.setColumnHeaderHeight("20px");
var dropBox3 = new Prima.Templates.StatusSelect;
dropBox3.addOption( "MSFT",1 );
dropBox3.addOption( "ORCL",2 );
dropBox3.addOption( "SYMC",3 );
obj.setColumnTemplate(dropBox3,0);
var dropBox4 = new Prima.Templates.StatusSelect;
dropBox4.addOption( "Microsoft Corporation",1 );
dropBox4.addOption( "Oracle Corporation",2 );
dropBox4.addOption( "Symantec Corporation",3 );
obj.setColumnTemplate(dropBox4,1);
// set click action handler
obj.setAction("click", function(src){window.status = src.getItemProperty("text")});
// write grid html to the page
document.write(obj);
</script>
</body>
</html>
<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>
if (!window.Prima) Prima=[];
if (!Prima.Templates) Prima.Templates=[];
Prima.Templates.StatusSelect = Active.Templates.Text.subclass();
Prima.Templates.StatusSelect.prototype._options = new Array();
Prima.Templates.StatusSelect.create = function()
{
var obj = this.prototype;
//------------------------------------------------------------
//Add the text value pair to the select dropdown list
//------------------------------------------------------------
obj.addOption = function( text, value )
{
this._options.push( new Array( value ? value : text, text) );
}
obj.clearOptions = function()
{
this._options = new Array();
}
obj.getOptions = function()
{
return this._options;
}
// editor is not part of the template,
// there is only one single instance of editor object.
var editor = new Active.HTML.DIV;
editor.setTag("select");
editor.setClass("templates", "input");
editor.setAttribute("type", "text");
editor.setEvent("onblur", function(event) { this.switchToTextMode( event ); } );
editor.setContent( "options", function()
{
var text = template.getItemProperty("text");
var inputOptions = obj._options;
var optionsHTML = new Array();
for( i=0; i< inputOptions.length; i++ )
{
var oTag = new Active.System.HTML();
var val = inputOptions[i][0];
var txt = inputOptions[i][1];
oTag.setTag("option");
oTag.setAttribute( "value", val );
oTag.setContent("text",inputOptions[i][1]);
if ( text==txt )
{
oTag.setAttribute( "selected","true" );
}
optionsHTML.push( oTag );
}
return optionsHTML.join("");
});
// template variable provides temporary reference
// to the parent template during edit mode.
var template;
function switchToEditMode()
{
template = this;
template.element().style.padding = 0;
template.element().innerHTML = editor;
editor.element().focus();
}
obj.setEvent("ondblclick", switchToEditMode);
function switchToTextMode()
{
var originalText = template.getItemProperty("text");
var value = editor.element().value;
var selectedIndex = editor.element().selectedIndex;
var text = editor.element().options[selectedIndex].text;
// we want to compare the text in the grid
// grid display only the text
if(originalText != text)
{
template.setItemProperty("text", text);
template.setItemProperty("value", value);
if(obj.onChangeEvent)
{
obj.onChangeEvent();
}
}
template.refresh();
template = null;
}
obj.onChangeEvent = function()
{
// alert("User must override this function to recieve the events");
}
editor.setEvent("onblur", switchToTextMode);
};
Prima.Templates.StatusSelect.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"],
["INFY", "Infosys Technologies Ltd.", "9,763.851", "830.748", "15400"],
["INTU", "Intuit Inc.", "9,702.477", "1,650.743", "6700"],
["ADBE", "Adobe Systems Incorporate", "9,533.050", "1,230.817", "3341"],
["PSFT", "PeopleSoft, Inc.", "8,246.467", "1,941.167", "8180"],
["SEBL", "Siebel Systems, Inc.", "5,434.649", "1,417.952", "5909"],
["BEAS", "BEA Systems, Inc.", "5,111.813", "965.694", "3063"],
["SNPS", "Synopsys, Inc.", "4,482.535", "1,169.786", "4254"],
["CHKP", "Check Point Software Tech", "4,396.853", "424.769", "1203"],
["MERQ", "Mercury Interactive Corp.", "4,325.488", "444.063", "1822"],
["DOX", "Amdocs Limited", "4,288.017", "1,427.088", "9400"],
["CTXS", "Citrix Systems, Inc.", "3,946.485", "554.222", "1670"],
["KNM", "Konami Corporation (ADR)", "3,710.784", ".000", "4313"]
];
var myColumns = [
"Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"
];
</script>
</head>
<body>
<script>
// create ActiveWidgets Grid javascript object
var obj = new Active.Controls.Grid;
// set number of rows/columns
obj.setRowProperty("count", 20);
obj.setColumnProperty("count", 5);
// provide cells and headers text
obj.setDataProperty("text", function(i, j){return myData[i][j]});
obj.setColumnProperty("text", function(i){return myColumns[i]});
// set headers width/height
obj.setRowHeaderWidth("28px");
obj.setColumnHeaderHeight("20px");
var dropBox3 = new Prima.Templates.StatusSelect;
dropBox3.addOption( "MSFT",1 );
dropBox3.addOption( "ORCL",2 );
dropBox3.addOption( "SYMC",3 );
obj.setColumnTemplate(dropBox3,0);
var dropBox4 = new Prima.Templates.StatusSelect;
dropBox4.addOption( "Microsoft Corporation",1 );
dropBox4.addOption( "Oracle Corporation",2 );
dropBox4.addOption( "Symantec Corporation",3 );
obj.setColumnTemplate(dropBox4,1);
// set click action handler
obj.setAction("click", function(src){window.status = src.getItemProperty("text")});
// write grid html to the page
document.write(obj);
</script>
</body>
</html>
Binu Nadesan
November 16,