Hi,
I am using 2 webdropdowns on a page in my web application.
1) Group webdropdown
2) Subitems webdropdown
The values in the Subitems dropdown varies depending upon what is selected from the Group dropdown. To accomplish this, I am using a
SelectionChanged client-side event with the Group webdropdown as follows:
aspx page code:
<ig:WebDropDown id="Groupdropdown" runat="server" cssclass="igdd_Control" Height="12px" Width="400px" EnableAnimations="False" EnableCustomValues="False">
<ClientEvents SelectionChanged ="loadsubItems"/></ig:WebDropDown>
<ig:WebDropDown id="SubItemsdropdown" runat="server" cssclass="igdd_Control" Height="12px" Width="415px" EnableAnimations="False" EnableCustomValues="False" OnItemsRequested="cmbSubItems_OnItemsRequested">
javascript code:
function loadsubItems(sender, e) {
var subItemsCmb;
subItemsCmb= $find("SubItemsdropdown");
subItemsCmb.set_currentValue("", true);
subItemsCmb.loadItems(e.getNewSelection()[0].get_value(),false);
}
Code-behind vb code:
Protected Sub cmbSubItems_OnItemsRequested(ByVal sender As Object, ByVal e As Infragistics.Web.UI.ListControls.DropDownItemsRequestedEventArgs)
// Code to check e.value and then populate the subitems dropdown based upon e.value
End Sub
The problem that I am facing is:
As soon as I type a character in the group dropdown, the control is automatically going to the subitems dropdown. Suppose, there are 2 values in the group dropodown as follows:
0100 POLITICS
0200 SCIENCE
As soon as I type "0", "0100 POLITICS' is getting selected and control is automatically going to the subitems dropdown. If I type "02" quickly, only 02 remains in the dropdown and control is automatically going to the second dropdown.
I don't want the control to automatically go to the subitems dropdown. When I type 0 in the group dropdown, I should have the capability to select any value starting with "0". Moreover, only the items present in the dropdown should appear in the textfield.
Please let me know how to accomplish this.
Thanks,
Sunil Mehta.
Any suggestions please?
Hello Sunil,
Moving focus to the next dropdown is expected behavior. The functionality you are trying to achieve is not possible with enabled auto-filtering, because every time you type a character, the SelectionChanged event is raised. The second dropdown is populated with corresponding values and the focus is moved on it.
Let me know if you have any questions.
Hi Sunil,
I am attaching a sample, demonstrating the described functionality. EnableAutoFiltering is set to "Client" and AutoPostBackFlags for value and selection changed are "Off". Also the items for the second dropdown are loaded on SelectionChanged instead of ValueChanged event of first dropdown. However, the user should select an item matching the filter using the mouse or by pressing enter key. If the arrow keys are used to navigate through items, SelectionChanged event will be raised and the items for the second dropdown will be loaded through an asynchronous postback.
Feel free to contact me if you have any questions.
I'm just checking if you need any further assistance with the matter.
There is one problem that I see here. Take an example, there are 5 items in the dropdown:
0111 TEST1
0121 TEST2
0222 TEST3
0223 TEST4
0333 TEST5
When I type "01" in the dropdown, I am able to see that only items starting with "01" remains in the dropdown and all other 3 items are vanished. I should have the ability to see all the items in the dropdown irrespective of whatever I am selecting.
Also, when I calculate the number of items in the dropdown after typing "01" using the below code;
$find("webdropdown").get_items().getLength();
I am able to see "2" only whereas I was expecting it to return 5. Any solution to this.
To achieve this you should set EnableAutoFiltering="Off".
If I set EnableAutoFiltering="Off", then I am not able to select an item from the webdropdown by pressing "Enter" key.
I am just checking if the latest reply helped you out and if you require any further assistance on the matter.
I would suggest you to set EnableAutoCompleteFirstMatch=”true”. Doing so there actually will be a SelectedItem at any time.
About your initial question - after further research, selecting an item on Enter key press has been determine as a new Product Idea. I have sent your Product Idea directly to our product management team. Our product team chooses new Product Ideas for development based on popular feedback from our customer base. Infragistics continues to monitor application development for all of our products, so as trends appear in requested ideas, we can plan accordingly.
We value your input, and our philosophy is to enhance our toolset based on customer feedback. If your idea is chosen for development, you will be notified at that time. Your reference number for this Product Idea is PI12080122.
If you would like to follow up on your Product Idea at a later point, you may contact Developer Support management via email. Please include the reference number of your Product Idea in the subject and body of your email message. You can reach Developer Support management through the following email address: dsmanager@infragistics.com.
Thank you for your idea.
To add further into the above post, try typing a text in the dropdown. If a user does not press Enter or select an item explicitly, the item is not getting selected but user gets an illusion that an item has been selected. This is because the typed item looks like the current value in the webdropdown. This is a bad illusion to the user. A normal user does not know whether the dropdown is a combo-box or a normal dropdown. If a dropdown has a typing feature, then the above discussed are the basic features that a product should have.
We are looking for a solution to this.
Hi Nikolay,
We have already purchased webdropdown recently. So, moving to another product just to enable one option does not make sense. Also, even if we purchase the combo box suggested by you, there is no guarantee that whatever features are atleast working now with webdropdown, will work with combo box as well.
I am looking for a solution to my problem within the webdropdown if possible.
By design the WebDropDown control does not raise SelectionChanged event when Enter is pressed. I would suggest you to check our jQuery Combo Box, which offers functionality similar to what you required - http://ko.infragistics.com/products/jquery/sample/combo-box/combo-load-on-demand.
If you have any other questions, please let me know.