Short Summary:
event.cellColumn Id returns the label property instead of the id property.
The property that is actually useful is dataPath .
The API and documentation are wrong.
Long explanation:
It seems that the API for table/column is not correct. Specifically, the cellColumnId property of a TableCellEvent.
It returns a different property. But both the originally promised property, and the one actually given, are not useful anyways.
I am referencing the Table Column API documentation , along with the TableCellEvent .
I setup a very basic table for testing:
$w.onReady( function () {
$w( "#mytable" ).rows = [];
$w( "#mytable" ).columns = [
{ 'id' : 'idCol0' , 'dataPath' : 'title' , 'label' : '' , 'type' : 'string' , 'width' : 100 },
{ 'id' : 'idA' , 'dataPath' : 'dataA' , 'label' : 'A' , 'type' : 'string' , 'width' : 100 },
{ 'id' : 'idB' , 'dataPath' : 'dataB' , 'label' : 'B' , 'type' : 'string' , 'width' : 100 },
{ 'id' : 'idC' , 'dataPath' : 'dataC' , 'label' : 'C' , 'type' : 'string' , 'width' : 100 },
]
$w( "#mytable" ).rows = [
{ 'title' : '1' , 'dataA' : 'A1' , 'dataB' : 'B1' , 'dataC' : 'C1' },
{ 'title' : '2' , 'dataA' : 'A2' , 'dataB' : 'B2' , 'dataC' : 'C2' },
{ 'title' : '3' , 'dataA' : 'A3' , 'dataB' : 'B3' , 'dataC' : 'C3' },
]
console.log( 'Initialized Table:' );
console.log( $w( "#mytable" ).rows );
}
After loading the page, everything is as expected:
Console
Initialized Table:
title dataA dataB dataC
0 1 A1 B1 C1
1 2 A2 B2 C2
2 3 A3 B3 C3
Now I want to add some code so that when I click on one of those cells, it changes the value to ‘X’.
export function mytable_cellSelect(event) {
let ColId = event.cellColumnId;
let RowIndex = event.cellRowIndex;
console.log( 'User clicked table at:' );
console.log( ColId + ', ' + (RowIndex+ 1 ) );
var rows = $w( ‘#mytable’ ).rows;
rows[RowIndex][ColId] = 'X' ;
$w( '#mytable' ).rows = rows;
console.log(rows);
}
I then click on cell B2:
Console:
User clicked table at:
B , 2
title dataA dataB dataC B
0 1 A1 B1 C1
1 2 A2 B2 C2 X
2 3 A3 B3 C3
Here we have a few problems.
The cellColumnId property of the event is returning ‘B’, which is actually the label property.
We can’t use the label property to modify the rows, as it’s looking for the dataPath for the array index.
Even if we did have the cellColumnId , there’s no direct way to access the array using that anyways? What’s the point?
The work around? Assign the same value to both dataPath and label .
Such as:
{ ‘id’ : ‘idB’ , ‘dataPath’ : ‘B’ , ‘label’ : ‘B’ , ‘type’ : ‘string’ , ‘width’ : 100 },
Then, ColumnId returns a label that is actually the dataPath . Makes perfect sense.
? ? ?
My question/concern is, will the ColumnId property be fixed in the future? If I use this work around, and then it started returning an actual ColumnId, will my code break?
OR, am I missing something completely?
