onCellTextChanged for combo not firing
How do I get a combo to programmatically go into drop-down list mode, as if I had mouseclicked the down-arrow button to the right of the cell value?
I know that you can raise the editCurrentCell event and then call showpopup(), however, the onCellTextChanged event does not fire when I begin typing new text in the combo cell.
Here is how I have implemented my combo:
var user = new AW.Templates.Combo;
var usersugg = new AW.UI.List;
obj.setCellTemplate(user, 3);
obj.setPopupTemplate(usersugg, 3);
And here is how I am checking for the onCellTextChanged event(the combo is in the fourth column from the left in my grid):
obj.onCellTextChanged = function(text, col, row){
switch(col){
case "3":
window.alert("the onCellTextChanged event fired.");
break;
}
}
The onCellTextChanged code fires properly if I enter the cell by mouseclicking the combo-button and then start typing, however, if I enter the cell by clicking the text portion of the combo cell and then start typing, nothing happens as far as the onCellTextChanged event.
I tried the code I found elsewhere in this forum that automatically puts cells into editing mode when onCellSelectedChanged is fired, but that also acts as if I had clicked the text portion of the combo cell, rather than the combo-button portion of the cell, and the onCellSelectedChange does not fire.
AndrewZoo
December 6,
Oops. That last sentence should have read:
I tried the code I found elsewhere in this forum that automatically puts cells into editing mode when onCellSelectedChanged is fired, but that also acts as if I had clicked the text portion of the combo cell, rather than the combo-button portion of the cell, and the onCellTextChanged does not fire.
AndrewZoo
December 6,
Ok, I just noticed something new related to my problem. I added the following code to my onCellEditStarting event:
if (col == 3){obj.getCellTemplate(parseInt(col), parseInt(row)).showPopup();}
If I first click one of the down-arrow buttons in one of the combo cells and edit the text, the onCellTextChanged fires. After this, using the keyboard to move up or down to other cells in that same column, or using the mouse to click on the text of any of the combo cells in that same column will edit with an onCellTextChanged event that fires properly. As long as I initiate a combo-button click and stay within the same column, the onCellTextChanged event works just fine.
Here's the strange thing. As soon as I move off of that column, either with the keyboard or the mouse, when I move back into any combo cell in that column without first clicking on one of the combo down-arrow buttons, the onCellTextChanged event ceases to work.
I am including my code for the auto-edit functionality. I'm not sure if it has something to do with the quirkiness of the combo functionality or not:
obj.onCellSelectedChanged = function(selected, col, row){
if (selected){
this.setTimeout(function(){this.raiseEvent("editCurrentCell", {}, col, row);});
}
}
AndrewZoo
December 6,
Ok, I think I may have figured out what the problem is. Take a look at the following example:
var myCells = [
["1.0", "1.1","1.2", "1.3", "1.4"],
["2.0", "2.1","2.2", "2.3", "2.4"],
["3.0", "3.1","3.2", "3.3", "3.4"],
["4.0", "4.1","4.2", "4.3", "4.4"]
];
var myHeaders = ["Col 0", "Col 1", "Col 2", "Col 3", "Col 4"];
var obj = new AW.UI.Grid;
obj.setCellText(myCells);
obj.setHeaderText(myHeaders);
obj.setColumnCount(5);
obj.setRowCount(4);
document.write(obj);
obj.onCellSelectedChanged = function(selected, col, row){
window.status = "Current Column=" + col + " Current Row=" + row;
}
-------------------------
If you start at the cell in the first row, first column, the status bar will show that you are in column 0, row 0. If you move one cell to the right, the column index does not increment! Move to the right again and the column does increment, but is now off by 1. Move back to the initial cell by hitting the left arrow key on the keyboard twice, and that cell is now shown as being column 1, row 0. Is this a bug or is there something that I am doing wrong here?
I'm guessing that I can manually track the current column and row in a hidden INPUT field on the page for now, but I would think that this is something that really needs to be fixed if it is a bug.
Incidentally, I am using IE 6.0.2800.1106 SP1. And FireFox 2.0.0.11 - Both browsers exhibit the same strange column indexing behavior.
AndrewZoo
December 6,
I found the solution to my problem. I rewrote the following code:
obj.onCellTextChanged = function(text, col, row){
switch(col){
case "3":
window.alert("the onCellTextChanged event fired.");
break;
}
}
The new version that works:
obj.onCellTextChanged = function(text, col, row){
switch(parseInt(col)){
case 3:
window.alert("the onCellTextChanged event fired.");
break;
}
}
You would think that the Javascript code would either work all of the time, or none of the time using a string literal in the switch case. Forcing it to use a numeric value for the switch statment seemed to do the trick.
I still don't know why the column (and row) index doesn't work properly with the onCellSelectedChanged event, though.
AndrewZoo
December 6,
The behavior of onCellSelectedChanged is correct but you are interpreting it in the wrong way. This event fires when the 'selected' state of a cell changes. When you navigate from one cell to another this event fires two times. First, for the new selected cell (selected=true) and then for the cell which looses selection (selected=false). In your code you see only the result of the last call which gives wrong impression.
If you want to track the selection you should instead use the onSelectedRowsChanged(array) and onSelectedColumnsChanged(array) or onCurrentRowChanged(index), onCurrentColumnChanged(index).
Alex (ActiveWidgets)
December 6,