Forums

Hi all, (sorry for my poor english)

I have a datatable and i use inline cell editing. My problem is : I want to test the row number of the selected cell before execute ShowCellEditor.

I try to use ShowCellEditor but i don't now how it's work. I don't know how to get the row and after display the the CellEditor.

Here my code :

YAHOO.example1.TabView = function() {

var myColumnDefs = [
{key:"LIBELLE",label:""},
{key:"DATECREA",label:"", editor: new YAHOO.widget.TextboxCellEditor()}
];

var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.recap);
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
myDataSource.responseSchema = {
resultsList: "messages",
fields: ["I0CLEUNIK","LIBELLE","DATECREA"]
};

var myDataTable = new YAHOO.widget.DataTable("dt1container", myColumnDefs, myDataSource, {});

myDataTable.doBeforeShowCellEditor = function (oArgs) {
//here i want to test if row of cell is >10
//and if it's ok : Show the celleditor
return true;
}

myDataTable.subscribe("rowMouseoverEvent", myDataTable.onEventHighlightRow);
myDataTable.subscribe("rowMouseoutEvent", myDataTable.onEventUnhighlightRow);
myDataTable.subscribe("cellClickEvent", myDataTable.doBeforeShowCellEditor);

var myTabView = new YAHOO.widget.TabView("tvcontainer");
myTabView.getTab(1).addListener("click", function() {myDataTable.onShow()});

return {
oDS: myDataSource,
oDT: myDataTable,
oTV: myTabView
};
}();

Thanks in advance for your help

First of all, you should not call doBeforeShowCellEditor on a cellClick, As the example shows:

http://developer.yahoo.com/yui/datatable/#cellediting

you should call onEventShowCellEditor, which will eventually call doBeforeShowCellEditor on its own, you don't need to do it.

You do have to override the existing doBeforeShowCellEditor as you are doing. The argument it receives is an instance of the corresponding cell editor for the cell, which is either an instance of this class:

http://developer.yahoo.com/yui/docs/YAH ... ditor.html

or any of its subclasses. So, it would be better if you call its argument something like oCellEditor instead of oArgs.

You can use oCellEditor.getRecord() to find out the record that is about to be edited.

Then you can call DataTable's getRecordIndex using that record as an argument, which will give you the row number. Something like this should do:

myDataTable.doBeforeShowCellEditor = function (oCellEditor) {
return this.getRecordIndex(oCellEditor.getRecord()) > 10;
}

That is if you are not using pagination. If you are and want to check for the table row of the current page, oCellEditor offers getTdEl which returns the TD element about to be edited. Then you can use the DOM to go one level up to the TR and use the DOM again to find the rowIndex of that TR.

Thanks for your help and advise. All it's work with this code :

YAHOO.example.TabView = function() {

var formatterDispatcher = function (elCell, oRecord, oColumn,oData) {
var meta = oRecord.getData('meta_' + oColumn.key);
oColumn.editorOptions = meta.editorOptions;
switch (meta) {
case 'Number':
YAHOO.widget.DataTable.formatNumber.call(this,elCell, oRecord, oColumn,oData);
break;
case 'Date':
YAHOO.widget.DataTable.formatText.call(this,elCell, oRecord, oColumn,oData);
break;
case 'Text':
YAHOO.widget.DataTable.formatText.call(this,elCell, oRecord, oColumn,oData);
break;
case 'Prio':
elCell.innerHTML = oData;
break;
case 'Code':
elCell.innerHTML = oData;
break;
}
};

var editors = {
Code: new YAHOO.widget.TextboxCellEditor(),
Text: new YAHOO.widget.TextboxCellEditor(),
Number:new YAHOO.widget.TextboxCellEditor({validator:function (val) {
val = parseFloat(val);
if (YAHOO.lang.isNumber(val)) {return val;}
}}),
Date:new YAHOO.widget.DateCellEditor(),
Prio: new YAHOO.widget.DropdownCellEditor({dropdownOptions:YAHOO.example.Data.lstPrio}),
};

var myColumnDefs = [
{key:"Rows",label:"",className:"th"},
{key:"Champ",label:"",formatter:formatterDispatcher,editor:new YAHOO.widget.BaseCellEditor()}
];

var ds = new YAHOO.util.DataSource(YAHOO.example.Data.details);

ds.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
ds.responseSchema = {
fields: ['Rows','Champ','meta_Champ','id']
};

var dt = new YAHOO.widget.DataTable("tableContainer", myColumnDefs,ds);

dt.doBeforeShowCellEditor = function(oEditor) {
var record = oEditor.getRecord();
if ((record.getData('id')==2) || (record.getData('id')==3) || (record.getData('id')==6) || (record.getData('id')==7)) {
return false;
}else{
return true;
}
};

dt.subscribe("rowMouseoverEvent", dt.onEventHighlightRow);
dt.subscribe("rowMouseoutEvent", dt.onEventUnhighlightRow);
dt.subscribe("cellClickEvent", function (oArgs) {
var target = oArgs.target,
record = this.getRecord(target),
column = this.getColumn(target),
type = record.getData('meta_' + column.key);
column.editor = editors[type];
this.showCellEditor(target);
});
}();
});

Last question : Can you tell me how to work with the edited cell. I don't find a function like doAfterShowCellEditor ?

I do this to detect editorSaveEvent but it's not working. I think the problem is because i do "new YAHOO.widget.xxxxCellEditor" to generate a different editor by cell. Can you help me please ?


YAHOO.example.TabView = function() {

var formatterDispatcher = function (elCell, oRecord, oColumn,oData) {
var meta = oRecord.getData('meta_' + oColumn.key);
oColumn.editorOptions = meta.editorOptions;
switch (meta) {
case 'Number':
YAHOO.widget.DataTable.formatNumber.call(this,elCell, oRecord, oColumn,oData);
break;
case 'Date':
YAHOO.widget.DataTable.formatText.call(this,elCell, oRecord, oColumn,oData);
break;
case 'Text':
YAHOO.widget.DataTable.formatText.call(this,elCell, oRecord, oColumn,oData);
break;
}
};

var editors = {
Text: new YAHOO.widget.TextboxCellEditor(),
Number:new YAHOO.widget.TextboxCellEditor({validator:function (val) {
val = parseFloat(val);
if (YAHOO.lang.isNumber(val)) {return val;}
}}),
Date:new YAHOO.widget.DateCellEditor()
};

var myColumnDefs = [
{key:"Rows",label:"",className:"th"},
{key:"Champ",label:"",formatter:formatterDispatcher,editor:new YAHOO.widget.BaseCellEditor()}
];

var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.infos);

myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
myDataSource.responseSchema = {
fields: ['Rows','Champ','meta_Champ','id']
};

var myDataTable = new YAHOO.widget.DataTable("complex", myColumnDefs, myDataSource);

var onCellEdit = function(oArgs) {
alert ('OK');
}
myDataTable.subscribe("rowClickEvent",myDataTable.onEventSelectRow);
myDataTable.subscribe("cellClickEvent", function (oArgs) {
var target = oArgs.target,
record = this.getRecord(target),
column = this.getColumn(target),
type = record.getData('meta_' + column.key);
column.editor = editors[type];
this.showCellEditor(target);
});
myDataTable.subscribe("editorBlurEvent", myDataTable.onEventSaveCellEditor);
myDataTable.subscribe("editorSaveEvent", onCellEdit);

return {
oDS: myDataSource,
oDT: myDataTable
};
}();
});

I only want to execute a javascript function (with XHR) to send values to a PHP script for saving in BDD