I have several WebDropDowns on my page. When the user clicks the dropdown to view the list, I need to display each item's text. When they select an item, I need to display the selected value, rather than the selected text, as the selected item in the dropdown list. Is this possible?
Hello,
If you would like to change only the current value for the drop down to match the selected item’s value, it is possible to handle the client side SelectionChanged event and use the following: function WebDropDown1_SelectionChanged(sender, eventArgs) {
selItem = sender.get_selectedItem();
selItemVal = sender.get_selectedItem().get_value();
//change the selected text
sender.set_currentValue(selItemVal)} <ig:WebDropDown> <ClientEvents SelectionChanged="WebDropDown1_SelectionChanged" /> </ig:WebDropDown>
If you would like to manipulate each item’s text and change it upon user interaction with its value, it is possible to add the following in the above event as well //change the item's text selItem.set_text(selItemVal);
Additionally you could reference some of the already existing topics regarding this or similar matters:http://es.infragistics.com/community/forums/t/71997.aspxhttp://es.infragistics.com/community/forums/t/65595.aspxhttp://es.infragistics.com/community/forums/t/76242.aspx
Selecting the value is not the problem. I need to DISPLAY the VALUE instead of the TEXT. Here is an example of what I need:
When they click to open the dropdown list, the following options appear:
Value Text
1 Option One
2 Option Two
3 Option three
When they click on 'Option One', I need '1' to display in the dropdown list.
Adding the following didn't seem to do anything: //change the item's text selItem.set_text(selItemVal);
I tried adding that above and below sender.set_currentValue(selItemVal), and I tried removing sender.set_currentValue(selItemVal), either way the display did not change.
In order to see the changes you could handle the same event like
function WebDropDown1_SelectionChanged(sender, eventArgs) {
selItem.set_text(selItemVal); }
However, this will result in closing the dropdown. The values will be displayed upon opening the dropdown again. It is also possible to programmatically close/reopen the dropdown, if this is not the expected for the user to make the additional interaction. What is more, the dropdown closing on selection is the default behavior which happens automatically unless you have EnableClosingDropDownOnSelect set to false.
When I select an item, it still shows the selected text in the text box instead of the selected value. If open the dropdown list and select an item a second time, it will then display the value in the text box. Is there really no way to avoid this?
It seems like you still don't understand what I'm asking for. I will try and explain this as simply and with as much detail as I can. When you click on a dropdown list to open it, a list of text displays. Each of those text items has a text and a value. When you select one of the items, the dropdown list closes and the text is displayed as the dropdown's text.
Instead of the selected text displaying, I need the selected value displayed. Then when they reopen the dropdown, I need it to still display the same text list. I am not changing any of the list items - I just need to change what is displayed when an item is selected and the dropdown is closed.
Also, not sure if this changes what needs to be done, but the dropdown is in an update panel.
Hello Jesse,
Thank you for the details shared. It seems you do not require to do post-back and a client side approach fits well.
In order to close the WebDropDown when a selection is made, it is possible to either set EnableClosingDropDownOnSelect property to true Like: EnableClosingDropDownOnSelect="true" OR as an alternative close it manually in the WebDropDown1_SelectionChanged event handler like adding sender.closeDropDown(); at the end of the function.
As an alternative to your approach, you could use the following:
function WebDropDown1_SelectionChanging(sender, eventArgs) { var actItem = sender.get_activeItem(); var value = actItem.get_value(); sender.get_activeItem().set_text(value); }
Here, sender.get_activeItem() will return the same object as the one when using eventArgs.get_value()[0]
It seems this will be sufficient for you to fulfill the requirements. Please let me know if you require further assistance with this.
Looks like we were both looking into similar alternatives. I found a way to make this work, but it seems a bit ugly to me:
function wddTerms_SelectionChanging(sender, e) { e.get_value()[0].set_text(e.get_value()[0].get_value()); }
Trying out your code, it kept adding the values to the dropdown list, rather than just setting the display value. And for some reason my dropdown list wasn't closing until I clicked somewhere else on the page. I think I'll stick with my way since it's working.
I have further investigated the possible approach and I suggest a client side alternative for visualization purposes only. It suggests handling SelectionChanging event.
<script type="text/javascript" id="igClientScript">
function WebDropDown1_SelectionChanging(sender, eventArgs) {
var ActItem = sender.get_activeItem();
var value = ActItem.get_value();
var elem = ActItem._element
elem.innerText = value;
sender.closeDropDown(); }
You could refer to the attached code sample for details.