if (!window.My) My=[];
if (!My.Templates) My.Templates=[];
My.Templates.Input = Active.Templates.Text.subclass();
My.Templates.Input.create = function()
{
var obj = this.prototype;
// editor is not part of the template,
// there is only one single instance of editor object.
var editor = new Active.HTML.INPUT;
editor.setClass("templates", "input");
editor.setAttribute("type", "text");
editor.setAttribute("value", function(){
return template.getItemProperty("text");
});
// template variable provides temporary reference
// to the parent template during edit mode.
var template;
function switchToEditMode(){
if (template) {
switchToTextMode()
}
template = this;
template.element().style.padding = 0;
template.element().innerHTML = editor;
editor.element().focus();
}
obj.setEvent("ondblclick", switchToEditMode);
function switchToTextMode(){
var value = editor.element().value;
template.setItemProperty("text", value);
template.refresh();
template = null;
}
editor.setEvent("onblur", switchToTextMode);
};
My.Templates.Input.create();
.active-templates-input {
overflow: hidden;
width: 100%;
height: 100%;
padding: 0px 5px;
margin: -1px 0px;
border: 1px solid #666;
vertical-align: middle;
font: menu;
line-height: 1.4em;
}
.active-templates-input.gecko {
display: block;
margin: 0px;
}
// create ActiveWidgets Grid javascript object
var obj = new Active.Controls.Grid;
// create editable text template
var template = new My.Templates.Input;
// assign new template to all columns
obj.setColumnTemplate(template);
// provide methods for getting and setting data
obj.getDataText = function(i, j){return myData[i][j]};
obj.setDataText = function(value, i, j){myData[i][j] = value};
// set number of rows/columns
obj.setRowProperty("count", 20);
obj.setColumnProperty("count", 5);
// write grid html to the page
document.write(obj);
.active-column-2, .active-column-2 input {text-align: right;}
function switchToTextMode(){
var originalVal = template.getItemProperty("text");
var value = editor.element().value;
template.setItemProperty("text", value);
template.refresh();
if(originalVal != value){
// value changed, call the callback function
var row = template.getRowProperty("index");
var col = template.getColumnProperty("index");
// ?? something here ?? //
}
template = null;
}
// provide methods for getting and setting data
obj.getDataText = function(i, j){return myData[i][j]};
obj.setDataText = function(value, i, j){myData[i][j] = value};
// ****************************************************************
// Currency Cell Template.
// ****************************************************************
My.Templates.Currency = Active.Templates.Text.subclass();
My.Templates.Currency.create = function()
{
var obj = this.prototype;
// editor is not part of the template,
// there is only one single instance of editor object.
var editor = new Active.HTML.INPUT;
editor.setClass("templates", "input");
editor.setAttribute("type", "text");
editor.setAttribute("value", function(){
return template.getItemProperty("text").replace(/\,/g,'');
});
// template variable provides temporary reference
// to the parent template during edit mode.
var template;
function switchToEditMode(){
if (template) {
switchToTextMode()
}
template = this;
template.element().style.padding = 0;
template.element().innerHTML = editor;
editor.element().focus();
}
obj.setEvent("onfocus", switchToEditMode);
function switchToTextMode(){
var originalVal = template.getItemProperty("text");
var value = editor.element().value;
try {
if(isNaN(value)) { alert('Please enter numbers only.');}
var format = new Active.Formats.Number;
format.setTextFormat("#,###.##");
value = format.dataToText(value);
}
catch(error){
// ignore errors
}
if(originalVal != value){
template.setItemProperty("text", value);
}
template.refresh();
template = null;
}
editor.setEvent("onblur", switchToTextMode);
};
My.Templates.Currency.create();
value = value.replace(/[^\d\.]/g,'');
just after the alert will remove any non-numeric char and parse it. Better than showing NaN :-D// disable arrow key nevigation
obj.setEvent("onkeydown", null);
// make input box selectable
obj.getTemplate("top").setEvent("onselectstart", obj.getEvent("onselectstart"));
obj.setEvent("onselectstart", null);
<script>
if (!window.My) My=[];
if (!My.Templates) My.Templates=[];
My.Templates.Input = Active.Templates.Text.subclass();
My.Templates.Input.create = function()
{
var obj = this.prototype;
// editor is not part of the template,
// there is only one single instance of editor object.
var editor = new Active.HTML.INPUT;
editor.setClass("templates", "input");
editor.setAttribute("type", "text");
editor.setAttribute("value", function(){
return template.getItemProperty("text");
});
// template variable provides temporary reference
// to the parent template during edit mode.
var template;
function switchToEditMode(){
if (template) {
switchToTextMode()
}
template = this;
template.element().style.padding = 0;
template.element().innerHTML = editor;
editor.element().focus();
}
obj.setEvent("ondblclick", switchToEditMode);
function switchToTextMode(){
var value = editor.element().value;
var originalVal = template.getItemProperty("text");
if(originalVal != value){
template.setItemProperty("text", value);
}
template.refresh();
template = null;
}
editor.setEvent("onblur", switchToTextMode);
};
My.Templates.Input.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.setRowCount(20);
obj.setColumnCount(5);
// provide cells and headers text
// create editable text template
var templ = new My.Templates.Input;
// assign new template to all columns
obj.setColumnTemplate(templ);
// provide methods for getting and setting data
obj.getDataText = function(i, j){return myData[i][j]};
obj.setDataText = function(value, i, j){myData[i][j] = value};
obj.setColumnText(function(i){return myColumns[i]});
// disable arrow key nevigation
obj.setEvent("onkeydown", null);
// make input box selectable
obj.getTemplate("top").setEvent("onselectstart", obj.getEvent("onselectstart"));
obj.setEvent("onselectstart", null);
// set click action handler
//obj.setAction("click", function(src){window.status = src.getProperty("item/text")});
// write grid html to the page
document.write(obj);
// template
...
template.action("restoreParentFocus");
...
// grid
obj.setAction("restoreParentFocus", function(){
this.element().focus();
});
function switchToTextMode()
{
...
this.action("myAction")
...
}
grid.setAction("myAction", function(src){
var gridRef = this;
var cellRef = src;
}
function switchToEditMode(){
if (template) {
switchToTextMode()
}
template = this;
template.element().style.padding = 0;
template.element().innerHTML = editor;
editor.element().focus();
editor.setEvent("ondblclick", editor.element().focus());
}
obj.setEvent("ondblclick", switchToEditMode);
function switchToTextMode(){
var value = editor.element().value;
template.setItemProperty("text", value);
template.refresh();
template = null;
obj.setEvent("ondblclick", switchToEditMode);
}
// modify model to write data back to the XML
table.setText = function(value, i, j){
var node = this.getNode(i, j);
node.text = value;
}
if (!window.My) My=[];
if (!My.Templates) My.Templates=[];
My.Templates.Input = Active.Templates.Text.subclass();
My.Templates.Input.create = function(){
var obj = this.prototype;
// editor is not part of the template,
// there is only one single instance of editor object.
var editor = new Active.HTML.INPUT;
editor.setClass("templates", "input");
editor.setAttribute("type", "text");
editor.setAttribute("value", function(){
return template.getItemProperty("text");
});
// template variable provides temporary reference
// to the parent template during edit mode.
var template;
function switchToEditMode(){
if (template) {
switchToTextMode()
}
template = this;
template.element().style.padding = 0;
template.element().innerHTML = editor;
editor.element().focus();
}
obj.setEvent("ondblclick", switchToEditMode);
function switchToTextMode(){
var value = editor.element().value;
var originalVal = template.getItemProperty("text");
if(originalVal != value){
template.setItemProperty("text", value);
}
template.refresh();
template = null;
}
editor.setEvent("onblur", switchToTextMode);
};
My.Templates.Input.create();
</script>
</head>
<body>
<form onsubmit="return false;">
<script language="Javascript">
// create ActiveWidgets data model - text-based table
var table = new Active.Text.Table;
// provide data URL - plain text comma-separated file
table.setURL("../data/companies.txt");
// start asyncronous data retrieval
table.request();
// define column labels
var columns = ["Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"];
// create ActiveWidgets Grid javascript object
var obj = new Active.Controls.Grid;
// provide column labels
obj.setColumnProperty("texts", columns);
// provide external model as a grid data source
obj.setDataModel(table);
// provide cells and headers text
// create editable text template
var templ = new My.Templates.Input;
// modify model to write data back to the XML
table.setText = function(value, i, j){
var node = this.getNode(i, j);
node.text = value;
}
// assign new template to all columns
obj.setColumnTemplate(templ);
// disable arrow key nevigation
obj.setEvent("onkeydown", null);
// make input box selectable
obj.getTemplate("top").setEvent("onselectstart", obj.getEvent("onselectstart"));
obj.setEvent("onselectstart", null);
// set click action handler
obj.setAction("click", function(src){window.status = src.getProperty("item/text")});
// write grid html to the page
document.write(obj);
// modify model to write data back to the XML
table.setText = function(value, i, j){
var node = this.getNode(i, j);
node.text = value;
}
switchToTextMode()
template.refresh()
This topic is archived.