jQWidgets Forums
jQuery UI Widgets › Forums › General Discussions › Lists › ComboBox › Combobox and DropDownList problems
Tagged: combobox, DropDownList, jqxComboBox
This topic contains 12 replies, has 2 voices, and was last updated by damc 12 years, 8 months ago.
-
Author
-
Hi,
I have problems by using Combobox or DropDownList. I can’t set some default functionalities that users need. Some functionalities are missing for me by combobox and some by dropdown.
1. Users would like to move between input fields on form with tab key. I can’t focus jqxDropDownList with the Tab. If I use Combobox instead jqxDropDownList, tab key works but with one problem user need to twice presses on tab key to move over Combobox to another input field. How to force it to work with one key press?
2. If I use Combobox I need to limit the choices to only those in the list. How to do this?
3. If I use DropDownList, users would like to have filter option, because list has 1200 items (like typing and autocomplete in combo). How to do this?
Thank you for your help.
Hi damc,
1. DropDownList supports Tab key, too. You can take a look at this sample: settings.htm. Click the ComboBox, then press Tab to move the Focus to the DropDownList.
2. ComboBox can select items only from those that are available in the Popup List. With 1200 items, it is preferable to use remoteAutoComplete. If you want to make the input field readonly, you may do something like that:
$("#combobox").find('input').attr('readonly', 'readonly');
3. DropDownList does not have an Input field and there’s no such auto-complete feature.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi Peter,
I have problem with “border selection” on tab key by DropDownList because I change border on input to red (border: ‘1px solid red’) if value in input is not valid and back to default if value is OK ( border: ‘1px solid #ABADB3’. Here is problem, because on IE8 doesn’t work border: ”) and then is not visible tab position on DropDownList. Is it possible to have DropDownList on tab key same selection (selected is value in input not border) like combo?
Thank you for your help.
Hi damc,
I am afraid that it is not possible to select the value in DropDownList.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi Peter,
I have another problem. If user select item from dropDownlist with mause (with keyboard it is ok) then loses focus and tab key does not work properly. How can I set focus?
You can try on yours (settings.htm) sample.
Thank for your help.
Hi damc,
The demo you are pointing out is from the ComboBox demos, not from the DropDownList demos. I believe that the issue you reported is already resolved in the latest version. Could you please try that again?
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi Peter!
Good work! I take a look on new demo in v2.5.5 and works fine (demo in 2.5.0 does not). I will upgrade to 2.5.5 ant try it on my sample.
Thanks.
Hi Peter,
Bug or new future in version 2.5.5 jqxComboBox selectedIndex property does not work. Same code in 2.5.0 works. Can you look this?
Thanks.
In order to select an index, use ‘selectIndex’ method.
Below is a working code that uses ‘selectedIndex’ property.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script></head><body> <div id='content'> <script type="text/javascript"> $(document).ready(function () { var theme = getTheme(); var url = "../sampledata/customers.txt"; // prepare the data var source = { datatype: "json", datafields: [ { name: 'CompanyName' }, { name: 'ContactName' } ], id: 'id', url: url, async: false }; var dataAdapter = new $.jqx.dataAdapter(source); // Create a jqxComboBox $("#jqxWidget").jqxComboBox({ selectedIndex: 0, source: dataAdapter, displayMember: "ContactName", valueMember: "CompanyName", width: 200, height: 25, theme: theme }); // bind to the select event. $("#jqxWidget").bind('select', function (event) { if (event.args) { var item = event.args.item; if (item) { var valueelement = $("<div></div>"); valueelement.html("Value: " + item.value); var labelelement = $("<div></div>"); labelelement.html("Label: " + item.label); $("#selectionlog").children().remove(); $("#selectionlog").append(labelelement); $("#selectionlog").append(valueelement); } } }); $("#jqxWidget").jqxComboBox({ selectedIndex: 6 }); }); </script> <div id='jqxWidget'> </div> <div style="font-size: 13px; font-family: Verdana;" id="selectionlog"></div> </div></body></html>
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi Peter,
I use it on create jqxComboBox. I have variable indexToSelect which I set it.
My code (works on version 2.5.0 and on version 2.5.5 dropDownList but not with combobox):
indexToSelect = 4;// Create a jqxComboBox$("#jqxWidget").jqxComboBox({ selectedIndex: indexToSelect, source: dataAdapter, displayMember: "ContactName", valueMember: "CompanyName", width: 200, height: 25, theme: theme });
Thanks.
Hi Peter,
Why this code does not work on 2.5.5 version combobox?
Code:
indexToSelect = 4;// Create a jqxComboBox$("#jqxWidget").jqxComboBox({ selectedIndex: indexToSelect, source: dataAdapter, displayMember: "ContactName", valueMember: "CompanyName", width: 200, height: 25, theme: theme });
Thank you for your help.
Hi damc,
Did you try the working code that I posted in my last post?
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi Peter.
I don’t know why does not work with my old code (I replace the component with 2.5.0 and works with same code). If I add code to set selectedIndex after creating jqxComboBox it works. Where is the point? Why can’t I set selectedIndex when I initialize component?
Code:
indexToSelect = 4;// Create a jqxComboBox$("#jqxWidget").jqxComboBox({ selectedIndex: indexToSelect, source: dataAdapter, displayMember: "ContactName", valueMember: "CompanyName", width: 200, height: 25, theme: theme });$("#jqxWidget").jqxComboBox({ selectedIndex: indexToSelect });
elp.
Thank you for your help.
-
AuthorPosts
You must be logged in to reply to this topic.