Dropdown Control instead of Combo?

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

Rob, you are a genius!

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

}

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

Hi Will ... you are right. This does not work in FF.

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>

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.

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.

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

see http://friendsofaw.com/nuke/modules.php?name=Forums

in Combo control section - works fine!

Actually, the code on FOAW does not prevent typing text into the combo with IE6 or FF 1.5 and AW v2.

Debugging superficially, it would seem that obj.getControlText(); returns an empty string when called in onControlActivated.

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

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,

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

Thanks,

Scott

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?

Forum search