Select widget

Submitted by bill on Wed, 06/07/2006 - 06:29.

Widgets

The ComboBox widget has been split into two separate widgets, ComboBox and Select (Select is a subclass of the ComboBox). The ComboBox widget was previously serving two functions: 1. an enhanced text <input> field where the user could input any value, or pick from a list of drop down "suggestions" 2. an enhanced version of <select>, where you had separate labels and values (ex: CA vs California), and the user could only pick one of the predefined values #2 has been split into a separate widget called Select. The two major differences are that 1) the value submitted from the Select widget is the hidden value (CA), not the displayed value (California), and 2) the Select widget restricts the user to the set of predefined choices. Compare the combo box test and select widget test Thanks to Matthew Flanagan for the patch! There's recently been a bunch of interest in the ComboBox widget, and I think there will be some more patches to come (there are still some outstanding bugs), but there's been a bunch of stuff fixed already, so take a look. Bill

OK, I'm not sure if I'm

Submitted by Adrian Tanase (not verified) on Wed, 06/07/2006 - 13:28.

OK, I'm not sure if I'm supposed to leave feedback here but I'll do it anyway :) I think that for the select widget one should be able to turn the filtering off. People don't use selects exclusively to find a value, but also to change it. Once I select something, whenever I want to select something else, I have to manually delete the input value before picking something else.

That might be a good point.

Submitted by jan831 (not verified) on Wed, 06/07/2006 - 13:58.

That might be a good point. Isn't it possible to disable autocomplete when a valid option is entered, and display the complete list (instead of displaying nothing in the current situation)?

I agree with Adrian. Also, I

Submitted by Patrick Heymans (not verified) on Wed, 06/07/2006 - 16:21.

I agree with Adrian. Also, I want to be able to disable typing text in the input box and to have behavior exactly as a normal combobox.

Adrian, A better way of

Submitted by Tom Trenka (not verified) on Wed, 06/07/2006 - 20:09.

Adrian, A better way of thinking of the new Select element is that it's just like a select element, with a better AutoComplete facility as well as enhanced styling capability...in addition to using it to get past the IE select "shine-through" issue. Obviously improvements will be made, so if you have an enhancement suggestion, feel free to file an enhancement bug on trac (http://trac.dojotoolkit.org)

Tom, I'll do that, thanks

Submitted by Adrian Tanase (not verified) on Wed, 06/07/2006 - 21:40.

Tom, I'll do that, thanks for the link. Jan and Patrick: that's basically what I was saying, but this should all be configurable -- I bet there are also applications for the current behaviour.

Patrick, A combobox as it's

Submitted by Tom Trenka (not verified) on Wed, 06/07/2006 - 23:07.

Patrick, A combobox as it's normally understood in other UI toolkits are essentially a text input with dropdown "helper" functionality; the only real decision is whether or not to allow a new value to be entered or not. The big issue is that the value of the widget has to be what you see, particularly if you're allowing new values. A list (or select element, as in the HTMLSelect element) is a set of choices using human-readable labels as aliases for values that are hidden. (I'm being pendantic but being clear does make a difference) The issue with the ComboBox as originally written is that it tried to be both; hence the decision to split this into two widgets. It sounds like what you're looking for is a replacement for HTMLSelect; that's what the new Select widget is for. A Combobox, on the other hand, should be used where you'd normally use a text input--*not* a select box (unless you're talking autocomplete, which is really a function of the Select widget). Hope that clears some things up!

I have a quick question.

Submitted by Sam Mager (not verified) on Wed, 06/07/2006 - 23:15.

I have a quick question. Inside widget.ComboBox.js I see an IncrementalComboBoxDataProvider and a ComboBoxDataProvider. For a ComboBox widget that is based on the user typing in text and then the sever making a call to get incremental data, based on the comments in the source I changed the mode setting in widget.html.ComboBox.js from "local" to "remote". During debugging I noticed that the IncrememtalComboDataProvider is used but I am getting incorrect type ahead. For example if the user quickly types in "s" followed by "m", without quotes of course, I saw in my server's output the two requests : typed value = "s" return = [["Saa,Edward","28950"],[etc]] typed value = "sm" return = [["Smack,Dina A","30986"],[etc]] Buy in the form the value in the textbox is sma,Edward, with "a,Edward" as the typeahed part. Did anyone else notice this problem? Any most importantly how do I fix it. Thank you. Sam

Tom, I fully understand the

Submitted by Patrick Heymans (not verified) on Thu, 06/08/2006 - 03:34.

Tom, I fully understand the difference between what you described, but a combobox and a list (or SELECT element) is the same according to http://en.wikipedia.org/wiki/Combo_box. In the .NET Window.Forms toolkit, they use a DropDownStyle property to make the difference between editable and non-editable comboboxes (http://msdn2.microsoft.com/en-us/system.windows.forms.combobox.dropdowns...). Combobox widgets in almost every UI toolkit I know (and that are quite a lot) has the concept of text/value. Often can add objects to the list where the toString method on each object is used to render the texts. The widget you are refering to as ComboBox is actually a TextBox with auto completion functionality and in some toolkits it's named AutoCompleter. And yes, all I want is a replacement for the standard HTML SELECT element for all the reasons you mentioned in reply #4.

Is it possible to

Submitted by Rajkumar Vakkada (not verified) on Tue, 07/18/2006 - 01:02.

Is it possible to dynamically modify the dataUrl or pass a query string to the dataUrl in the input/select comboBox widget

Dynamically change the dataUrl

Submitted by redlifejacket on Sun, 05/06/2007 - 07:51.

Hi there,

I've got 2 combo boxes:

Combo box 1: countries
Combo box 2: cities

I want the values in combo box 2 (cities) to change depending on the country selected in combo box 1.

Could you please help me with changing the dataUrl dynamically.

Thanks.

function countryOnChange(ctry) {
var cityField = dojo.widget.byId('cities');
cityField.textInputNode.value = ctry;
}

< input dojotype="ComboBox" value="this should never be seen - it is replaced!" dataurl="getCountries.php?type=json&matching=%{searchString}" onvaluechanged="countryOnChange(arguments[0]);" style="width: 300px;" name="country" id="country" mode="remote" >

< input dojotype="ComboBox" value="this should never be seen - it is replaced!" dataurl="getCities.php?type=json&matching=%{searchString}" onvaluechanged="citiesOnChange(arguments[0]);" style="width: 300px;" name="cities" id="cities" mode="remote" >

How would one go about using

Submitted by Ryan Vaughan (not verified) on Tue, 09/26/2006 - 23:04.

How would one go about using a javascript function to provide the data for a Select widget?

I want to fill ComboBox with

Submitted by Rozita (not verified) on Tue, 10/10/2006 - 21:03.

I want to fill ComboBox with some data extracted from back-end database using AJAX. I mean I use AJAX to send a request to server and fetch some data from back-end database. Now I want to fill my ComboBox with this fetched data. Would you please let me know how can I do that?

Rajkumar Vakkada "Is it

Submitted by Max Melnishyn (not verified) on Tue, 11/21/2006 - 21:55.

Rajkumar Vakkada "Is it possible to dynamically modify the dataUrl...", Ryan Vaughan "How would one go about using a javascript function to provide the data for a Select widget?": Here is an example: dojo.widget.byId('history').dataProvider.searchUrl = 'GetData.aspx?type=history&id=' + dojo.widget.byId('customer').selectedResult[1];

Rajkumar, If you absolutely

Submitted by Charles Fulnecky (not verified) on Wed, 12/06/2006 - 05:30.

Rajkumar, If you absolutely need to do some processing via javascript: In your event handler for your ajax call you could do something like the following to populate the original select before dojo-ifying it. --charles orgTreeGrid.setOnLoadingEnd( function(){ //Set up the search feature var theSelector = getElem('txtXgridSearch'); var orgs = orgTreeGrid.xmlLoader.doXPath('//row[@searchable]'); var orgcnt = orgs.length; theSelector.options[theSelector.length]= new Option('',''); for (i=0;i

Arrgh angle

Submitted by Charles Fulnecky (not verified) on Wed, 12/06/2006 - 05:32.

Arrgh angle brackets! orgTreeGrid.setOnLoadingEnd( function(){ //Set up the search feature var theSelector = getElem('txtXgridSearch'); var orgs = orgTreeGrid.xmlLoader.doXPath('//row[@searchable]'); var orgcnt = orgs.length; theSelector.options[theSelector.length]= new Option('',''); for (i=0;i less than orgcnt;i++){ theSelector.options[theSelector.length]= new Option(orgs[i].firstChild.text,orgs[i].getAttribute("id")); }; dojo.require("dojo.widget.Select"); dojo.widget.createWidget('txtXgridSearch'); window.status="... finished loading."; });

Open the select/combobox

Submitted by sandeep misra (not verified) on Tue, 01/16/2007 - 06:45.

Open the select/combobox widget test page. Make your IE size such that the selection list appears on top of typeahead field. Then type "a" in the field. You will see the list of all the states starting with a above the typeahead field. then give a pause and type "l" . You will see that the list is displayed incorrectly with the position of the field. I think the relative co-ordincates are not set properly. Hence the list appears hanging above the field. Is this a known issue ? We are using dojo combobox widget and this is becoming a real problem for us. Is there any solution to this problem ?

I'm searching a way to

Submitted by Giuseppe Cassata (not verified) on Mon, 02/05/2007 - 14:31.

I'm searching a way to replace existing "normal" HTML select with Dojo Combobox at runtime as soon as the page loads. I set dojotype to "combobox" but the select is not changed at all. How can I do this? Any idea? Thank you in advance

Can someone give me a

Submitted by djailer (not verified) on Tue, 02/27/2007 - 10:12.

Can someone give me a nudge...I have a Combobox I would like to have get its options from a .cfm page. Did I read somewhere that the ComboBox expects a JSON datasource? Actually, I would like to pass a cfquery directly. Is this possible - especially for someone who only has a glimpse of what they are doing!!?

As many of you probably know

Submitted by massive on Wed, 04/18/2007 - 07:44.

As many of you probably know there is also a patch made to dojo 0.3.0 that modifies the behavior of select widget radically. This page has list of arguments why this implementation is "the real" select box. It has some very useful features such as support for paging and moving to the search result, not filtering alternatives.

dojo combo box

Submitted by sathish darshan on Mon, 04/14/2008 - 16:30.

how can i make a dojo combo box non-editable....

how to write code for that...