Textbox template (edit on double click)
The released grid version (1.0) is read-only. I am planning to add data editing in version 2.0 (end of 2004). However here is quick and dirty example how one can implement data editing in the current grid widget.
Additional CSS rules:
And example of the main code:
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();Additional CSS rules:
.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;
}And example of the main code:
// 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);Alex (ActiveWidgets)
June 17,