List used as popup - onItemClicked not firing

This is the end-result script being generated server side, why does the onItemClicked not fire when i click a new option in the popup list?

EmpContact.itemText6 = ['** Edit List **','Cell [Cellular Phone]','Email [Email]','Emerg [Emergency Contact]','Pager [Alphanumberic Pager]','Ph1 [Primary Phone]','Ph2 [Secondary Phone]'];
            EmpContact.itemValues6 = ['contacttype"^aDd_NeW_oNe_1','Cell','Email','Emerg','Pager','Ph1','Ph2'];
 
          	    EmpContact.list6 = new AW.UI.List; 
    		    EmpContact.list6.setItemText(EmpContact.itemText6); 
    		    EmpContact.list6.setItemValue(EmpContact.itemValues6); 
    		    EmpContact.list6.setItemCount(EmpContact.itemText6.length); 
            EmpContact.list6.onItemClicked = function(event, i){ 
 			alert('hi');
            }
 
            EmpContact.setPopupTemplate(EmpContact.list6, 6);
 
            EmpContact.combo6 = new AW.Templates.Combo;
 
            EmpContact.combo6.setStyle("border", 0); 
            EmpContact.combo6.setStyle("background", "none"); 
            EmpContact.combo6.setStyle("color", "black"); 
            EmpContact.combo6.my_showPopup = EmpContact.combo6.showPopup;
            EmpContact.combo6.showPopup = function() { 
                EmpContact.oldValue = this.getControlProperty("value");
            EmpContact.list6.setCurrentItem(EmpContact.itemText_index6[this.getControlProperty("value")]);
            EmpContact.list6.setSelectedItems([EmpContact.itemText_index6[this.getControlProperty("value")]]);
 
            this.my_showPopup();
            }
 
            EmpContact.setCellTemplate(EmpContact.combo6, 6);
            EmpContact.setCellEditable(false, 6);

Hope this code shows up ok. Also, i finally found an example somewhere that the setStyle lines above help to make the combo look more presentable in the grid - however there is a very small white border all the way around the combo after setting the above styles. Anyone have ideas on that as well?

Thanks

oh - by the way, just in case its relevant, I've also set the grid onCellClicked and onCellSelectedChanged events to call:

this.getRowTemplate(row).getCellTemplate(col).showPopup();

So that clicking on the combo shows the popup...

Ben

You don't need the .onItemClicked part. Build a combo list which automatically populates the cell when clicked on an item in the list that way:

// Build a combo list in all cells of a column
// col: the column where the combo appears
// data: the array of items in the list
function initComboList(col, data) {
  var list = new AW.UI.List;
  list.setItemText(data);
  list.setItemCount(data.length);
  list.setStyle("width", 150);
  var combo = new AW.Templates.Combo;
  grid.setCellTemplate(combo, col);
  grid.setPopupTemplate(list, col);
  grid.setCellValue(function(col, row){ return grid.getCellText(col, row); }, col);
  };

You don't need anything else.

I never found how to get ride of the white border programmatically. The easiest way is to override it in the CSS:

.aw-list-box {
    border: 0px solid #FFFFFF;
 }

Bye,
TMTisFree

or same in js:
list.getContent('box').setStyle('border', 0px solid #FFFFFF');

I appreciate the input - however i need to trap when the user clicks the values of the list so i can do a number of different items. So this is something i need.

Would it work to somehow add some code to the grid - onCellupdate or something... which maybe fires when the list returns a new value to the grid...

Off on another goose chase...

Ben

OK, so this is part of my above code reworked slightly, basically i am trying to override the showPopup and hidePopup methods:

EmpContact.combo6.sys_showPopup = EmpContact.combo6.showPopup;
            EmpContact.combo6.showPopup = function() { 
                EmpContact.oldValue = EmpContact.gridData[EmpContact.getCurrentRow()][6];			EmpContact.list6.setCurrentItem(EmpContact.itemText_index6[EmpContact.oldValue]);
            EmpContact.list6.setSelectedItems([EmpContact.itemText_index6[EmpContact.oldValue]]);
 
            this.sys_showPopup();
            }
            EmpContact.combo6.sys_hidePopup = EmpContact.combo6.hidePopup;
            EmpContact.combo6.hidePopup = function() { 
alert(EmpContact.list6.getCurrentItem());
                EmpContact.oldValue = underfined;
            this.sys_hidePopup();
 
            }

Basically when the popup shows - i want to be able to set the current item based on my grid (seems reasonable) and this part all works nicely.

However, when you click a new item in the list - the hidePopup fires and my alert above always displays the original item that was selected - even though there is some hidden code somewhere that updates the grid cell with what you've selected, i cannot seem to find a way to capture that event and do extra processing that needs to be done.

Any ideas would be appreciated.

Yes, you can use onCellTextChanged event:
(Note I removed the 'custom' popup part of your sample and added celleditable=true and mentioned event)

EmpContact.itemText6 = ['** Edit List **','Cell [Cellular Phone]','Email [Email]','Emerg [Emergency Contact]','Pager [Alphanumberic Pager]','Ph1 [Primary Phone]','Ph2 [Secondary Phone]'];
            EmpContact.itemValues6 = ['contacttype"^aDd_NeW_oNe_1','Cell','Email','Emerg','Pager','Ph1','Ph2'];
 
                  EmpContact.list6 = new AW.UI.List; 
                EmpContact.list6.setItemText(EmpContact.itemText6); 
                EmpContact.list6.setItemValue(EmpContact.itemValues6); 
                EmpContact.list6.setItemCount(EmpContact.itemText6.length); 

   EmpContact.onCellTextChanged = function(text,col,row){ 
 if(col==6){
   alert(text+' - '+col+' - '+row);
 }
}               

 EmpContact.setPopupTemplate(EmpContact.list6, 6);
 
 EmpContact.combo6 = new AW.Templates.Combo;
 
 EmpContact.combo6.setStyle("border", 0); 
 EmpContact.combo6.setStyle("background", "none"); 
 EmpContact.combo6.setStyle("color", "black"); 
 EmpContact.list6.setStyle('background', 'lightyellow');
 EmpContact.list6.setStyle('border', '0px solid lightyellow');

 EmpContact.setCellTemplate(EmpContact.combo6, 6);
 EmpContact.setCellEditable(true, 6);

Check also this post:
http://www.activewidgets.com/javascript.forum.21858.9/dynamic-combo-in-a-grid.html

Thanks for your comment C++ - only challenge with this approach is that i can retrieve the index or code/value that was selected - only the text. As you can see from my code i am providing a list that has values and texts - depending on the value selected, there are a group of actions that may take place.

I know there is a workaround i can program for this - but this seems like basic code that is flawed - if there is an onItemClicked, why isnt it firing?

Also, does 2.5.5 still have the but with the non IE browsers failing to close the popup?

sorry, meant to say, "Can't retrieve the index or code/value..."

and my last sentence should read:

Also, does 2.5.5 still have the bug with the non IE browsers failing to close the popup?

- i'll try to proof-read before posting in the future...

I remember some issue in FF when triyng to show a wider combo popup, but thought it was solved with a timeout. ( appart of the set celleditable to true refered in my last link)
Also remember the issue you mentioned ( but for a UI.Combo not template) and need a different solution using the event onSelectedItemsChanged or onItemSelectedChanged ( not sure) instead of onItemClicked , I'll try to find it if that helps..

Yea - ive tried both of those methods.

They fire when i set the current item in my showpopup code (which makes perfect sense) - but when you change the current item by clicking - neither of them fire.

Both events exist as mentioned here:
http://www.activewidgets.com/javascript.forum.13655.6/checkedlist-onitemclicked-how-do-i.html

But none seems to fire into a template, so I can only suggest 2 tricky ways to try ( sorry cause I never tried exactly what you need):

1- replace single-cell-template with a UI.Combo to gain list-selection-events ( that should need a three mouse-clicks first two to load the combo and third to open popup ) (untested, but might be possible)

2- create a custom template with a button on the right part that clicked fire a (positioned below) div/span that contains a list.

Some other liks to read carefully, still searching for the one mentioned earlier ...
http://www.activewidgets.com/javascript.forum.23758.1/ui-list-setselecteditems-problem.html
http://www.activewidgets.com/javascript.forum.20965.3/onitemselectedchanged-fires-twice-when-changing.html

I just found it !
You can try the solution posted by Randall Severy (at the very end of this post):
http://www.activewidgets.com/javascript.forum.9294.19/dropdown-control-instead-of-combo.html

Thanks C++

Believe me i appreciate you putting the time in. Searching these forums can really eat up your day.

The only relevant section of the code from Randall seems to be this part:

var AW_onCurrentItemChanged = this.onCurrentItemChanged;
this.onCurrentItemChanged = null;
this.setCurrentItem(selected_item);
this.onCurrentItemChanged = AW_onCurrentItemChanged;

Which is simply a way of ensuring the onCurrentItemChanged event does not fire when you first select the right item by code.

However this does not help to get the actual event to fire when you click on a new item in the list.

Ive begun digging into the source code to try and figure out what the heck happens when you click a new value - cause obviously there is some code that returns the new value back to the grid cell.

I really which Alex would chime in and tell me either:
A: yes, its a bug - deal with it
B: no, by design - try this alternative:...

I am in the process of mocking up a sample for what i believe to be the ideal select/combo once i get all this stuff figured out, because from the reading ive done, there are a number of AW users who would like the same thing.

Hi Ben, just a last chance , it is far from a clean/simple and of course official fix , but I was curious on try for my own or future implementations ( cause I would need something similar soon).

Tried with normal & 'rare' events and doesn't close the popup, then tried with setEvent, and the popup close as it should but can't get the index this way, so finally came to my mind 'raiseEvent', and found this post although is nothing related to hidePopup??? ;-):
http://www.activewidgets.com/javascript.forum.12947.7/how-to-properly-set-oncontextmenu.html

--adding a try/catch from here... and ... Volia!!
http://www.activewidgets.com/javascript.forum.13419.2/error-on-obj-raiseevent-editcurrentcell.html
As said , nothing to be proud of, But... Hey it works !

Note : Tested with an alert give a not-updated cellText in IE ( timming issue?)

obj.setCellTemplate(obj.combo6, 6);
obj.setCellEditable(true, 6);

//Next three lines open the popup clickig on the cell and avoid editing the combo
obj.combo6.AW_showPopup = obj.combo6.showPopup;
obj.combo6.showPopup = function() {this.AW_showPopup();}
obj.combo6.setEvent("onclick", function() { this.showPopup(); });

 // html event handler translates to object events
function raiseListItemIdxEvent(event){
 try {
 this.raiseEvent("onCurrentItemChanged");
  }
catch(err){ } 
    }

// assign html event handler to List-Item template
obj.list6.getItemTemplate().setEvent("onclick", raiseListItemIdxEvent);

// assign Template ('special' [popup] in this case) event handler
obj.combo6.getPopupTemplate().onCurrentItemChanged = function(event, index){
//alert(index);
TestInput.setControlText(index);
 }

 var TestInput = new AW.UI.Input;
 document.write(TestInput);

I wonder how this could be done in a proper manner ( I mean , using the combo/popup internal capabilities, so I too appreciate Alex's view/comments on it, just to feel more confortable with a 'trusted' solution ;-( )
Thanks

Ah!, and also found the 'authentic' UI.Combo (Text/Value) selection ( in case you ever need it).
http://www.activewidgets.com/javascript.forum.12308.8/v2-0-combo-control-value.html

I continue to bury my head in this one - lots of details still need to be addressed.

I am trying to prevent editing of the combo (more "select" style").
The line:

obj.combo6.setEvent("onclick", function() { this.showPopup(); });

does not totally solve it, because, if you try it - you can still start typing after the popup is up - and this replaces cell contents.
I've gotten closer by adding

this.getContent("box/text").element().contentEditable = false;

inside the showPopup function - but once you close the popup (click the box of the combo again to do this) and start typing - it replaces the cell contents again.

Tried making a template out of this and its a bear - wish there was some expertise on this somewhere...

Have you tried?
obj.setCellEditable(false, 6);
Not sure why, but seems to do it in above sample and close the popup ( at least in FF and IE , not sure rest browsers), but it might sitll be some interferences with events in the Combo Template ??

NO, sorry , neither close a new popup , so, I give up ..:-(

//I am trying to prevent editing of the combo (more "select" style").//

One way is to do a "return true" in the onCellDoubleClicked event on that specific cell/column. That does not prevent edition with keyboard navigation, though:

grid.onCellDoubleClicked = function(event, col, row) {
// Non editable columns with objets : virtual keyboard, calendar, combolist, checkbox, etc
  if (col==6) return true;                     
  };

//i need to trap when the user clicks the values of the list so i can do a number of different items//

I tried the onItemClicked event with my code: it is perfectly fired.

// Build a combo list in all cells of a column
// col: the column where the combo appears
// data: the array of items in the list
function initComboList(col, data) {
  var list = new AW.UI.List;
  list.setItemText(data);
  list.setItemCount(data.length);
  list.setStyle("width", 150);
  var combo = new AW.Templates.Combo;
  grid.setCellTemplate(combo, col);
  grid.setPopupTemplate(list, col);
  list.onItemClicked = function(event, i){
console.log("i="+i);
    alert('hi');
    };
  grid.setCellValue(function(col, row){ return grid.getCellText(col, row); }, col);
  };

Let me clarify what i mean by preventing editing of the combo:

The user shall click the combo/cell in the grid to launch the popup - they cannot type new values into the cell which are not in the list (this is my desired behavior). They must click/select an item in the list as their only option to select a new value.

I've gotten so far as to click anywhere in the cell (not just the "down-arrow") will launch the popup - while the popup is up, if the user starts typing, no text is entered into the cell (perfect), but if you click the "box" area of the combo again, it closes the popup (as it should, since clicking anywhere outside of the popup closes it) - and even though it appears focus is lost and you shouldnt be able to edit - if you start typing, the cell contents are replaced with your typing.

If this isnt clear i can describe in point form.

The goal is - no possible choices in the cell which arent in the popup list - the user being allowed to type their own in defeats this.

On your second post tmtisfree...

I was suprised to see you had this working, so i took your code and played around with it on a test page. After a couple tries i throught yours was broken too because i wasnt getting any alert - then i commented out the

console.log("i="+i);

line and WHAM!! - it started working.

Needless to say, I wanted to know why this was working for you and not for me.

So on some further digging - if you change your function to be like this:

function initComboList(col, data) { 
  var list = new AW.UI.List; 
  list.setItemText(data); 
  list.setItemCount(data.length); 
  list.setStyle("width", 150);
   list.onItemClicked = function(event, i){ 
console.log("i="+i); 
    alert('hi'); 
    };
  var combo = new AW.Templates.Combo; 
  grid.setCellTemplate(combo, col); 
  grid.setPopupTemplate(list, col); 
 
  grid.setCellValue(function(col, row){ return grid.getCellText(col, row); }, col); 
  };

It wont work either. The position of the definition of the onItemClicked function makes all the difference. For some reason it has to be AFTER the line.

grid.setPopupTemplate(list, col);

Well - thats a bunch of time i spent on that i'll never get back...lol

back to the cell edit issue...

sorry, comment out the console.log line in the above modified function to see what i mean about it not working when onItemClicked is in that position.