Skip to main content

etable - accessing internal methods

4 replies [Last post]
karolbe
Offline
Joined: 2008-10-13
Points: 0

Hello

Is there a way to access "internal" etable widget methods? Normally when I do:

var table = jmaki.getWidget("dialog:dialog-body:invoiceDetails");

All I can access are properties like: rows and subs, and I see that in etable's component.js there are many useful methods like:

getSelectedData(), getRow() etc.

How to call them? I am asking because I need access to all rows in etable and the "rows" array is not refreshed when I remove some rows from etable using the removeRow event.

Thanks!

Reply viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
gmurray71
Offline
Joined: 2003-07-31
Points: 0

HI Karolbe,

There are two ways to get at the data:

1) Create or modify the component.js with more public methods

The public function in component.js are the one that start with :

this.functionName = function() {
return 'foo';
}

You can access the methods by getting reference to the component and calling the functions manually.

To get a handle on the widget you need to add provide a id to the widget whien you define it.

Example:

In you JSP

And in your JavaScript / glue.js

var _val = jmaki.getWidget("mywidget").functionName(); // returns 'foo'

2) Subscribe to the onCellEdit event and monitor the changes there:

Example in your glue.js

jmaki.subscribe("/dojo/etable/onCellEdit", function(_val) {
alert("got " + _val);
});

The _val is : {widgetId : wargs.uuid, topic : topic, type : 'onCellEdit', column:column, row: row, value: value}

I would suggest you use the latest Dojo Dijit 1.2 grid widget instead of the etable but the methods for access are the same.

Let me know if you need more details.

-Greg

yummychen
Offline
Joined: 2008-04-07
Points: 0

Dear Greg :

I have add a method to get the data of the etable.
After i edit the value of some cells, i use the method to got the data of
this etable.
But i got the original data that was not be edited.
Do you know why ??
Thanks.

The following were the code :
this.getValue = function() {
var _d = table.store.getData();
var _r = {};
_r.rows = _d;
_r.columns = [];
// just get the column label and title out of the columns
for (var i=0; i < columns.length;i++) {
_r.columns.push({ label : columns[i].label, id : columns[i].id});
}
return _r;
}

gmurray71
Offline
Joined: 2003-07-31
Points: 0

Hi YummyChen,

Looking at the etable code I see the problem is the data store dojo uses is not in sync to what is visually presented.

You have two solutions :

1) Display what is visible with the help of the data store:

this.getValue = function() {
var _rows = [];
var _cols = [];
for (var i =0; i < columns.length; i++) {
_cols.push({ id : columns[i].id, label : columns[i].label});
}

for (var i=0; i < table.store.getData().length; i++ ) {

var trow = table.store.getDataByIndex(i);
var r = table.getRow(trow);
var _nrow = { id : trow.id};
for (var j = 0; j < columns.length; j++) {
_nrow[columns[j].id] = r.childNodes[j].childNodes[0].innerHTML;
}
_rows.push(_nrow);
}
return { columns : _cols, rows : _rows };
}

2) Fix the onCellUpdate in the widget:

this.onCellUpdate = function(column,row,value){
var obj = table.store.getDataByKey(row);
table.store.update(obj, column, value, true);
jmaki.publish(topic + "/onCellEdit", {widgetId : wargs.uuid, topic : topic, type : 'onCellEdit', column:column, row: row, value: value});
}

and the updateCell function (line 756)

to be:

updateCell: function(e){
var form = (typeof window.event == 'undefined') ? e.target : window.event.srcElement;
if (form.nodeName.toLowerCase().indexOf("form") == -1) {
form = form.parentNode;
}
var value = form.firstChild.value;
var cell = form.parentNode;
form.style.display = "none";
var d = cell.firstChild;
d.innerHTML = value;
d.style.display = "";
// get the row key and column and call onAddRow
var id = cell.id.split("_cell_")[1];
var sp = id.split("_");
var _col = sp[0];
var _row;
if (sp.length > 1) {
// pop the first
sp.shift();
// put it back together again
_row = sp.join("_");

} else {
_row = sp[1];
}
this.onCellUpdate(_col, _row, value);
// add event back
djd43.event.connect(cell, "ondblclick", this, "makeCellEditable");
return false;
},

You will also need to makre sure the updateRow function also matches up the with the data store.

I suggest using the first option given it's pretty simple and will suite your needs.

-Greg

yummychen
Offline
Joined: 2008-04-07
Points: 0

Hi Greg :

It's working fine.
Thanks.