Grid cell edit blocked when reading external data

When I set data for the grid via setcelltext function with data coming from an other table, the cell edit function is blocked:

obj.setCellText(function(i, j){return oTable.rows.item(j).cells.item(i).innerText});

The data is shown correctly in the table, however it is not possible to edit the cell "setCellEditable(true)"

if i use the same function from the editdata sample it works OK ??
obj.setCellText(function(i, j){return j + "." + i});

Can anybody help me with this ?

andre@bse-consultancy.com

January 1,

I guess there is something else in your code which breaks editing - it seems very unlikely that it is related to cell text source function. Maybe you could post an example which shows how to reproduce this?

Alex (ActiveWidgets)

January 2,

Hi Alex, enclosed the code I used for testing:

<html>
<head>
<title>ActiveWidgets Examples</title>
<script src="../../runtime/lib/aw.js"></script>
<link href="../../runtime/styles/system/aw.css" rel="stylesheet"></link>
</head>
<body>

<table id="test">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>

<script>

var obj = new AW.UI.Grid;

var oTable = document.getElementById('test');
var RowsLength = oTable.rows.length;
var CellsLength = oTable.rows.item(1).cells.length;

obj.setCellText(function(i, j){return oTable.rows.item(j).cells.item(i).innerText});
//obj.setCellText(function(i, j){return j + "." + i});

obj.setHeaderText("header");

obj.setColumnCount(CellsLength);
obj.setRowCount(RowsLength);

obj.setCellEditable(true);

document.write(obj);

document.write("<br>");

var label = new AW.UI.Label;
document.write(label);

// control activated/deactivated (receives/looses focus)

obj.onControlActivated = function(){
label.setControlText("Control activated");
}

obj.onControlDeactivated = function(){
label.setControlText("Control deactivated");
}

// editing starts/ends (F2, Enter, just start typing)

obj.onCellEditStarted = function(text, col, row){
label.setControlText("Edit started - text: " + text + ", col: " + col + ", row: " + row);
}

obj.onCellEditEnded = function(text, col, row){
label.setControlText("Edit ended - text: " + text + ", col: " + col + ", row: " + row);
}

// changing cell text

obj.onCellTextChanged = function(text, col, row){
label.setControlText("Cell text changed - text: " + text + ", col: " + col + ", row: " + row);
}

// validating (Enter)

obj.onCellValidating = function(text, col, row){
var value = Number(text);
if (!(value > 100) || !(value < 1000)) {
label.setControlText("Invalid value - " + text + ", should be between 100 and 1000");
return true;
}
}

obj.onCellValidated = function(text, col, row){
label.setControlText("Cell validated - text: " + text + ", col: " + col + ", row: " + row);
}

</script>

</body>
</html>

Andre

January 2,

Change

obj.setCellText(function(i, j){return oTable.rows.item(j).cells.item(i).innerText});

to:

obj.setCellText(function(i, j){return oTable.rows.item(j).cells.item(i).textContent});

Paulo Cesar (PC from Brazil)

January 2,

Hi Paulo, textContent does not give the HTML table cell content back, it gives "undefined" as reply in the grid.
innerText gives the cell content correctly, but then the cell edit function seems blocked.

Andre

January 3,

for me textContent works and your way gives undefined. (running in firefox)
You can't modify the the data like you trying to do.
To do that (in both browser, firefox and ie), change the functions:

obj.setCellText(function(i, j){return (AW.browser == "ie") ? oTable.rows.item(j).cells.item(i).innerText : oTable.rows.item(j).cells.item(i).textContent});

obj.onCellEditEnded = function(text, col, row){
    label.setControlText("Edit ended - text: " + text + ", col: " + col + ", row: " + row);
    if(AW.browser == "ie")
        oTable.rows.item(row).cells.item(col).innerText = text;
    else
        oTable.rows.item(row).cells.item(col).textContent = text;
}

Paulo Cesar (PC from Brazil)

January 3,

i just noticed on IE u can just modify the cell 0,0 (works for every cell on firefox), maybe its a bug, ill try to figure it out.

Paulo Cesar (PC from Brazil)

January 3,

Hi Paulo, I can conform this behaviour, cell 0,0 works OK with my testcode, others are blocked. (I Use IE)

Andre

January 3,

I would use a table to array conversion for that.

var oTable = document.getElementById('test');
var RowsLength = oTable.rows.length;
var CellsLength = oTable.rows.item(1).cells.length;

var mysource = new Array(oTable.rows.length);
for (k=0;k<RowsLength;k++){
mysource[k]= new Array(oTable.rows.item(1).cells.length);
for (m=0;m<CellsLength;m++){
mysource[k][m]=oTable.rows.item(k).cells.item(m).innerText;
}
m=0;
}

obj.setCellText( mysource );

HTH

Carlos

January 3,

Yeah i would do that too, but the behaviour listed here still an bug.
The exception hapens in

this[getProperty] = function(p, a, b, c){

defined in system/control.js, for some reason the object doenst have the property _cellModel.
The Interesting thing: If you edit ONLY and ONLY cell 0,0 will always work, if you edit cell 0,0 and try edit other cell, the cell 0,0 will not work anymore.

Only Alex can discover what happening.

Paulo Cesar (PC from Brazil)

January 3,

Another interesting thing:

If you use only KEYBOARD to edit, all cell works, so maybe is with the event "dbclick", getting wrong obj (not the grid).

Paulo Cesar (PC from Brazil)

January 3,

OK, thanks for the help. I have implemented the workaround of carlos (thanks Carlos) and that helps me further on the job.

Would be nice if Alex is going to fix this bug.

Andre

January 3,

Andre,

it seems that the IE table rows collection item() method breaks when an argument is a string and not a number. Normally the AW indices are strings and this raises exception in editing code. You can fix your original function this way -

obj.setCellText(function(i, j){return oTable.rows.item(Number(j)).cells.item(Number(i)).innerText});

Alex (ActiveWidgets)

January 3,

Hi Alex, this helps a little, some cells allows editing others dont. My working table is bigger then the test version I submitted.

If I convert the table first to JS array then it work OK, as suggested on the forum.

Andre

January 3,

This topic is archived.

Grid cell edit blocked when reading external data

See also:

Search

New Data Grid

Version 2