VKPS
5 Nov 2006, 6:58 AM
Having a bit of a problem getting editable grids working. I got a normal grid working ok, but when I try this on my local machine I get an error:
<html>
<head>
<title>test</title>
<script type="text/javascript" src="yui/build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="yui/build/dom/dom.js"></script>
<script type="text/javascript" src="yui/build/event/event.js"></script>
<script type="text/javascript" src="yui/build/dragdrop/dragdrop.js"></script>
<script type="text/javascript" src="yui/build/animation/animation.js"></script>
<script type="text/javascript" src="yui-ext.js"></script>
<link rel="stylesheet" type="text/css" href="grid.css"/>
</head>
<body>
<script>
EditorExample = function(){
var dataModel;
var grid;
var colModel;
var formatMoney = function(value){
value -= 0;
value = (Math.round(value*100))/100;
value = (value == Math.floor(value)) ? value + '.00' : ( (value*10 == Math.floor(value*10)) ? value + '0' : value);
return "$" + value;
};
var formatBoolean = function(value){
return value ? 'Yes' : 'No';
};
var formatDate = function(value){
return value.dateFormat('M d, Y');
};
var parseDate = function(value){
return new Date(Date.parse(value));
};
return {
init : function(){
var yg = YAHOO.ext.grid;
var cols = [{
header: "Common Name",
width: 160,
editor: new yg.TextEditor({allowBlank: false})
},{
header: "Light",
width: 130,
editor: new yg.SelectEditor('light')
},{
header: "Price",
width: 70,
renderer: formatMoney,
editor: new yg.NumberEditor({allowBlank: false, allowNegative: false, maxValue: 10})
},{
header: "Available",
width: 95,
renderer: formatDate,
editor: new yg.DateEditor({format: 'm/d/y', minValue: '01/01/06', disabledDays: [0, 6],
disabledDaysText: 'Plants are not available on the weekends',
disabledDates : ['^07', '04/15', '12/02/06'],
disabledDatesText : 'The plants are pollinating on %0, choose a different date.'})
},{
header: "Indoor?",
width: 55,
renderer: formatBoolean,
editor: new yg.CheckboxEditor()
}];
colModel = new YAHOO.ext.grid.DefaultColumnModel(cols);
colModel.defaultSortable = true;
var schema = {
tagName: 'plant',
id: 'use-index',
fields: ['common', 'light', 'price', 'availability', 'indoor']
};
dataModel = new YAHOO.ext.grid.XMLDataModel(schema);
dataModel.addPreprocessor(2, parseFloat);
dataModel.addPreprocessor(3, parseDate);
dataModel.addPreprocessor(4, Boolean);
dataModel.setDefaultSort(colModel, 0, "DESC");
grid = new YAHOO.ext.grid.EditorGrid('editor-grid', dataModel, colModel);
// to use double click to edit:
//grid.getSelectionModel().clicksToActivateCell = 2;
grid.render();
dataModel.load('plants.xml');
},
// filtering support, regex, function or text match
filter : function(e){
var mfilter = function(value){
return (value == 'Shade');
}
dataModel.filter({0: /^B.*/i, 1: mfilter});
},
// hide columns
hide : function(e){
colModel.setHidden(1, true);
}
};
}();
YAHOO.util.Event.on(window, 'load', EditorExample.init, EditorExample, true);
//YAHOO.util.Event.on(document, 'keypress', EditorExample.hide, EditorExample, true);
</script>
<div>
</div>
</body>
</html>
The error I get from the firefox error console is:
Error: this.element.dom has no properties
Source File: file:///C:/test/yui-ext.js
Line: 422
Which corresponds to a line containing this code (which I've split over a few lines so it doesn't do anything weird to the forum layout):
YAHOO.ext.grid.CellEditor=function(element){this.colIndex=null;
this.rowIndex=null;
this.grid=null;this.editing=false;
this.originalValue=null;this.element=getEl(element,true);
this.element.addClass('ygrid-editor');this.element.dom.tabIndex=1;
this.initialized=false;this.callback=null;};
YAHOO.ext.grid.CellEditor.prototype={init:
function(grid,bodyElement,callback){if(this.initialized)return;this.initialized=true;
this.callback=callback;this.grid=grid;
bodyElement.appendChild(this.element.dom);this.initEvents();},initEvents:function(){var stopOnEnter=function(e){if(e.browserEvent.keyCode==e.RETURN){this.stopEditing(true);}}
My guess is that I'm doing the script includes wrong, but I don't know what is missing or wrong.
I'm running this off of local dev, with the following file structure:
c:\test\ -- the root. I extracted all the YUI-ext stuff to here (maintaining folder hierarchy). So yui-ext.js is in here. I also downloaded your plants.xml sample and put it in here, and my index.htm page (shown above) is in here
c:\test\yui -- the YUI libraries
Does anyone know what that error means and how I can fix it?
Thanks for any help.
(Updated to add the actual includes that the forum software removed).
<html>
<head>
<title>test</title>
<script type="text/javascript" src="yui/build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="yui/build/dom/dom.js"></script>
<script type="text/javascript" src="yui/build/event/event.js"></script>
<script type="text/javascript" src="yui/build/dragdrop/dragdrop.js"></script>
<script type="text/javascript" src="yui/build/animation/animation.js"></script>
<script type="text/javascript" src="yui-ext.js"></script>
<link rel="stylesheet" type="text/css" href="grid.css"/>
</head>
<body>
<script>
EditorExample = function(){
var dataModel;
var grid;
var colModel;
var formatMoney = function(value){
value -= 0;
value = (Math.round(value*100))/100;
value = (value == Math.floor(value)) ? value + '.00' : ( (value*10 == Math.floor(value*10)) ? value + '0' : value);
return "$" + value;
};
var formatBoolean = function(value){
return value ? 'Yes' : 'No';
};
var formatDate = function(value){
return value.dateFormat('M d, Y');
};
var parseDate = function(value){
return new Date(Date.parse(value));
};
return {
init : function(){
var yg = YAHOO.ext.grid;
var cols = [{
header: "Common Name",
width: 160,
editor: new yg.TextEditor({allowBlank: false})
},{
header: "Light",
width: 130,
editor: new yg.SelectEditor('light')
},{
header: "Price",
width: 70,
renderer: formatMoney,
editor: new yg.NumberEditor({allowBlank: false, allowNegative: false, maxValue: 10})
},{
header: "Available",
width: 95,
renderer: formatDate,
editor: new yg.DateEditor({format: 'm/d/y', minValue: '01/01/06', disabledDays: [0, 6],
disabledDaysText: 'Plants are not available on the weekends',
disabledDates : ['^07', '04/15', '12/02/06'],
disabledDatesText : 'The plants are pollinating on %0, choose a different date.'})
},{
header: "Indoor?",
width: 55,
renderer: formatBoolean,
editor: new yg.CheckboxEditor()
}];
colModel = new YAHOO.ext.grid.DefaultColumnModel(cols);
colModel.defaultSortable = true;
var schema = {
tagName: 'plant',
id: 'use-index',
fields: ['common', 'light', 'price', 'availability', 'indoor']
};
dataModel = new YAHOO.ext.grid.XMLDataModel(schema);
dataModel.addPreprocessor(2, parseFloat);
dataModel.addPreprocessor(3, parseDate);
dataModel.addPreprocessor(4, Boolean);
dataModel.setDefaultSort(colModel, 0, "DESC");
grid = new YAHOO.ext.grid.EditorGrid('editor-grid', dataModel, colModel);
// to use double click to edit:
//grid.getSelectionModel().clicksToActivateCell = 2;
grid.render();
dataModel.load('plants.xml');
},
// filtering support, regex, function or text match
filter : function(e){
var mfilter = function(value){
return (value == 'Shade');
}
dataModel.filter({0: /^B.*/i, 1: mfilter});
},
// hide columns
hide : function(e){
colModel.setHidden(1, true);
}
};
}();
YAHOO.util.Event.on(window, 'load', EditorExample.init, EditorExample, true);
//YAHOO.util.Event.on(document, 'keypress', EditorExample.hide, EditorExample, true);
</script>
<div>
</div>
</body>
</html>
The error I get from the firefox error console is:
Error: this.element.dom has no properties
Source File: file:///C:/test/yui-ext.js
Line: 422
Which corresponds to a line containing this code (which I've split over a few lines so it doesn't do anything weird to the forum layout):
YAHOO.ext.grid.CellEditor=function(element){this.colIndex=null;
this.rowIndex=null;
this.grid=null;this.editing=false;
this.originalValue=null;this.element=getEl(element,true);
this.element.addClass('ygrid-editor');this.element.dom.tabIndex=1;
this.initialized=false;this.callback=null;};
YAHOO.ext.grid.CellEditor.prototype={init:
function(grid,bodyElement,callback){if(this.initialized)return;this.initialized=true;
this.callback=callback;this.grid=grid;
bodyElement.appendChild(this.element.dom);this.initEvents();},initEvents:function(){var stopOnEnter=function(e){if(e.browserEvent.keyCode==e.RETURN){this.stopEditing(true);}}
My guess is that I'm doing the script includes wrong, but I don't know what is missing or wrong.
I'm running this off of local dev, with the following file structure:
c:\test\ -- the root. I extracted all the YUI-ext stuff to here (maintaining folder hierarchy). So yui-ext.js is in here. I also downloaded your plants.xml sample and put it in here, and my index.htm page (shown above) is in here
c:\test\yui -- the YUI libraries
Does anyone know what that error means and how I can fix it?
Thanks for any help.
(Updated to add the actual includes that the forum software removed).