:: Forum >>

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
Wednesday, November 30, 2005
Hey Rob,

Have you figured anything out. I need this functionality too.
LostInSpace
Sunday, February 5, 2006
Nope ... not yet but I will need it soon. Please post if you figure it out first.
Rob Francis
Sunday, February 5, 2006
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>

/********************************************************************
    Combo
********************************************************************/


    #myCombo {width: 100px; height: 22px}

</style>

<p style="font:menu">
    see page source
</p>



<script>

/********************************************************************
/////////////////////////////////////////////////////////////////////

    Combo box object is not completed yet

/////////////////////////////////////////////////////////////////////
********************************************************************/


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

    // ADDED THIS LINE TO PREVENT USER FROM TYPING IN THE TEXT AREA.
    // THE DROPDOWN STILL WORKS AND THE USER CAN SELECT A VALUE
    obj.getContent('box/text').setAttribute('readonly', true);
    obj.onControlActivated = function(){ return true; }
    // WHY THE onControlActivated IS NEEDED BEATS ME?


    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:
/javascript.forum.7648.11/disable-input-edit-box.html

Rob Francis
Sunday, February 5, 2006
Rob, you are a genius!
LostInSpace
Monday, February 6, 2006
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
Wednesday, February 8, 2006
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
Monday, February 13, 2006
Hi Will ... you are right. This does not work in FF.
Rob Francis
Monday, February 13, 2006
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>

/********************************************************************
Combo
********************************************************************/


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


// COMPARE NEW TEXT WITH LAST KNOWN GOOD VALUE AND ARRAY OF
// VALID VALUES. IF NO MATCH IS FOUND THEN USER MUST BE
// TYPING SO WE DROP THE COMBO AND SET THE VALUE BACK TO
// THE LAST KNOWN GOOD VALUE

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


// GET THE INITIAL TEXT. NOTE, THIS MIGHT NOT BE A VALUE
// IN THE LIST INSTEAD IT MIGHT BE SOMETHING LIKE '<<Select>>
obj.onControlActivated = function(event){ lastvalue=obj.getControlText(); };


document.write(obj);

</script>
</body>
</html>
Rob Francis
Sunday, February 26, 2006
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) // x=column number

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
Friday, March 3, 2006
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
Friday, March 3, 2006
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
Wednesday, March 22, 2006
see http://friendsofaw.com/nuke/modules.php?name=Forums

in Combo control section - works fine!
Philippe
Wednesday, March 22, 2006
Actually, the code on FOAW does not prevent typing text into the combo with IE6 or FF 1.5 and AW v2.
Paul Tiseo
Thursday, April 6, 2006
Debugging superficially, it would seem that obj.getControlText(); returns an empty string when called in onControlActivated.
Paul Tiseo
Thursday, April 6, 2006
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);

    // make input box readonly
    obj.getContent("box/text").setAttribute("readonly", true);

    // fix for 'contentEditable' attribute
    obj.onControlEditStarted = function(){
        this.getContent("box/text").element().contentEditable = false;
    }

    document.write(obj);
Alex (ActiveWidgets)
Thursday, April 6, 2006
Thanks.
Paul Tiseo
Thursday, April 6, 2006
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
Tuesday, May 9, 2006

Jack,

Did you ever get this resolved? Could you let us know the solution?

Thanks,

Scott
ScottN
Tuesday, August 29, 2006
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
Thursday, January 18, 2007

This topic is archived.


Back to support forum

Forum search