Dropdown Control instead of Combo?
I don't want the user to be able to type in a value for the combo. Instead I want them to select a new value from the dropdown list.
I don't see a separate dropdown control so I'm using the combo. Is there a setting (or event code) for the combo to restrict it in this manner?
Thanks,
Rob
Rob Francis
November 30,
Hey Rob,
Have you figured anything out. I need this functionality too.
LostInSpace
February 5,
Nope ... not yet but I will need it soon. Please post if you figure it out first.
Rob Francis
February 5,
Hi LostInSpace,
Give this a try...
<html>
<head>
<script src="../../runtime/lib/aw.js"></script>
<link href="../../runtime/styles/xp/aw.css" rel="stylesheet"></link>
</head>
<body>
<style>
#myCombo {width: 100px; height: 22px}
</style>
<p style="font:menu">
see page source
</p>
<script>
var obj = new AW.UI.Combo;
obj.setId("myCombo");
obj.setControlText("Some text");
obj.setControlImage("favorites");
obj.setItemText(["Home", "Favorites", "Font size", "Search"]);
obj.setItemImage(["home", "favorites", "fontsize", "search"]);
obj.setItemCount(4);
obj.getContent('box/text').setAttribute('readonly', true);
obj.onControlActivated = function(){ return true; }
document.write(obj);
</script>
</body>
</html>
This is a bit flaky so test it well and use with caution. I bet there is a better way.
The code added is:
obj.getContent('box/text').setAttribute('readonly', true);
obj.onControlActivated = function(){ return true; }
I don't know why it won't work without the onControlActivated but I just happened upon that when trying different things.
BTW, this will also work on your input control in:
http://www.activewidgets.com/javascript.forum.7648.11/disable-input-edit-box.html
Rob Francis
February 5,
Hey Rob:
Add this to your drop-down to allow the list to open when you click anywhere on the control, not just the "v".
obj.onControlClicked = function() {
this.showPopup();
}
LostInSpace
February 8,
Rob, LostInSpace
This is neat in IE, but in FF it seems that clicking a value in the popup has no effect i.e. it doesn't get put in the input box (the popup does close OK though).
Is this what you've found? If so any thoughts on getting it to work in FF?
Thanks
Will
Will
February 13,
Hi Will ... you are right. This does not work in FF.
Rob Francis
February 13,
Here is a solution that will work in IE and FireFox.
NOTE: REQUIRES THE FINAL VERSION OF 2.0 ... THE COMBO WAS INCOMPLETE IN RC1 AND DOES NOT INCLUDE SOME OF THE FEATURES USED HERE
<html>
<head>
<script src="../../runtime/lib/aw.js"></script>
<link href="../../runtime/styles/xp/aw.css" rel="stylesheet"></link>
</head>
<body>
<style>
#myCombo {width: 200px; }
#myCombo-popup {width: 250px; height: 250px;}
#myCombo-popup .aw-mouseover-item {background: #fca}
</style>
<script>
var lastvalue="";
var dropdowntext = ["home", "favorites", "fontsize", "search"];
var obj = new AW.UI.Combo;
obj.setId("myCombo");
obj.setControlText("<< Select One >>");
obj.setControlImage("favorites");
obj.setItemText(dropdowntext);
obj.setItemImage(["home", "favorites", "fontsize", "search"]);
obj.setItemCount(4);
obj.onControlTextChanged = function(text){
if (text!=lastvalue) {
var foundit=false;
for (var x = 0; x <= dropdowntext.length-1; x++) {
if (dropdowntext[x]==text) { foundit=true; break; }
}
if (foundit==false) { obj.setControlText(lastvalue); this.showPopup(); }
};
lastvalue=obj.getControlText();
}
obj.onControlActivated = function(event){ lastvalue=obj.getControlText(); };
document.write(obj);
</script>
</body>
</html>
Rob Francis
February 26,
Don't know whether this is working in FF, it does in IE:
I have the same problem, but just started experimenting with the cellEditable property.
obj.setCellEditable(false,x)
Within IE it seems typing is prohibited in the cell with the combo, but selecting is possible and the value changes.
Don't know whether this should be an accepted behaviour, since editing includes changing and should therefore also not be possible in my oppinion. However for now, this is exactly what i want, so i leave it this way.
Wim Zoet
March 3,
Hi Wim,
Your solution is for a combo inside a grid however my challenge was with a standalone combo. I tried combo.setEditable(false) but that doesn't seem to be valid. Please post if you stumble across something easier for the standalone combo.
Rob Francis
March 3,
I'm having the same issues reported here. The code posted above gets part way there, but definitely doesn't work properly (clicking an option in the list won't always update the textbox portion in FF).
Sir Frustrated
March 22,
Actually, the code on FOAW does not prevent typing text into the combo with IE6 or FF 1.5 and AW v2.
Paul Tiseo
April 6,
Debugging superficially, it would seem that obj.getControlText(); returns an empty string when called in onControlActivated.
Paul Tiseo
April 6,
You can make combo box readonly (which is the same as 'dropdown' control) with -
obj.getContent("box/text").setAttribute("readonly", true);
Unfortunately it also requires a fix for contentEditable attribute -
obj.onControlEditStarted = function(){
this.getContent("box/text").element().contentEditable = false;
}
Complete example -
var obj = new AW.UI.Combo;
obj.setControlText("combo");
obj.setItemText(function(i){return "item " + i});
obj.setItemCount(5);
obj.getContent("box/text").setAttribute("readonly", true);
obj.onControlEditStarted = function(){
this.getContent("box/text").element().contentEditable = false;
}
document.write(obj);
Alex (ActiveWidgets)
April 6,
Please help: ( I am running V2):
var grid= new AW.UI.Grid;
var oComboOptions = ['1', '2', '3'];
var oCombo = new AW.UI.Combo;
oCombo.setItemText(oComboOptions);
oCombo.setItemCount(oComboOptions.length);
//oCombo.getContent("box/text").setAttribute("readonly",true);
//oCombo.onControlEditStarted = function() { this.getContent("box/text").element().contentEditable = false;}
oCombo.onControlActivated = function(){ return true; }
oCombo.onControlClicked = function() {
this.showPopup();
}
oCombo.setControlText('1');
grid.setCellTemplate(oCombo, col, row);
The drop appears but does not react to a selection. What am I doing wrong. I must note that there is a bit of babble about this problem but none seems to work. I am running IE6 and AW V2.
Many thanks
Jack Mansons
May 9,
Jack,
Did you ever get this resolved? Could you let us know the solution?
Thanks,
Scott
ScottN
August 29,
Like others here, I'm trying to get the combo control in ActiveWidgets to work just like an HTML form select field. Based on several hours of digging through this forum, especially the above thread, I have come close to what I need with the following function that I use with any combo control to enable the appropriate functionality:
function set_combo_behavior(combo)
{
combo.getContent("box/text").setAttribute("readonly",true);
combo.onControlEditStarted = function() {
this.getContent("box/text").element().contentEditable = false;
}
combo.AW_showPopup = combo.showPopup;
combo.showPopup = function() {
this.AW_showPopup();
var selected_item = this.getSelectedItems();
var AW_onCurrentItemChanged = this.onCurrentItemChanged;
this.onCurrentItemChanged = null;
this.setCurrentItem(selected_item);
this.onCurrentItemChanged = AW_onCurrentItemChanged;
}
var edit_box = combo.getContent("box/text");
edit_box.setEvent("onclick", function() { this.showPopup(); });
}
The only missing piece of the puzzle is highlighting the selected item in the list when the dropdown list is displayed. The "setCurrentItem" call above at least scrolls the dropdown list to the correct part of the list when it pops up, but I have been unable to find any way to highlight the selected item. Has anyone else figured this out?
Randall Severy
January 18,