ActiveWidgets • 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 ?

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?

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>

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});

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.

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;

}

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.

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

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

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.

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).

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,

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});

Hi Alex, this helps a little, some cells allows editing others don�t. 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.

Grid cell edit blocked when reading external data

Post a reply:

Forum search