Hi.
I am using a webdropdown that has around 100 items in it. By default, on page-load, I want to select the first item in the list.
I am using
$find("webdropdown1").set_selectedItemIndex(0);
in client-side javascript. It is selecting the first item correctly. But when I open the dropdown, the first items does not show selection. The currently selected item should be highlighted in the dropdownlist. How to accomplish this?
For your Information, I have also tried :
$find("webdropdown1").set_selectedItemIndex(0, true);
but did not work.
Hello,Please take a look at the attached sample. It shows how to achieve your goals. You have to get an item and select/unselect it directly. Setting the index will not resolve the issue. Same would happen if you want to change the active item. Then you have to say item.activate/inactivate.Please let me know if the sample works for you.
Hi,
Thanks for your reply. While working on this, I got another problem. Actually, I am loadiing the items into a webdropdown using
the below code:
webdropdown1.loadItems(webdropdown2_value,false);
alert("value:" + webdropdown1.get_items().getItem(0).get_value());
Problem is when I have loaded the new items above into the webdropdown1, the alert value statement is still showing me the index 0 element which was there in the dropdown1 before loading the new items. Is there a problem that changes are not getting reflected in the client-side. The dropdown clearly shows the correct items have been loaded when I open the dropdown and look at the items. Do i need to change some property values of the webdropdown. Because, once I am able to retrieve the correct item after loading, then I can use your code to select that item.
Hello Sunil,I am not sure if I am getting the whole scenario, but from the code you have pasted. When you call loadItems ajax request is done and on the server the new items are being loaded in the WDD and after this you have to handle the AjaxResponse event which is called after the WDD gets ajax response from the server . In this event if you get the item 0 then it will be the expected one. If I am not helpful please attach a small runnable page which demonstrates the issue so I can see what exactly you are doing and provide more help.
To elaborate, take an example I have two webdropdowns:
"webdropdown1" which has two items:
0100 POLITICS
0200 SCIENCE
"webdropdown2' which has
"0101 NEW JERSEY" and "0102 NEW YORK" items which will be loaded when "0100 POLITICS" will be selected in "webdropdown1".
"0201 BIOLOGY" and "0202 PHYSICS" items which will be loaded when "0200 SCIENCE" will be selected in "webdropdown1".
I am using a SelectionChanged event on webdropdown1, so that when the selection changes, the corresponding items will be loaded into webdropdown2. I am using a server-side function in VB to load the items into webdropdown2 which is called on "OnItemsRequested" event.
aspx code:
<ig:WebDropDown id="webdropdown1" runat="server" cssclass="igdd_Control" Height="12px" Width="375px" EnableAnimations="False" EnableCustomValues="False" AutoSelectOnMatch="False" EnableAutoFiltering="Client">
<ClientEvents SelectionChanged="loadWebdropdown2"/></ig:WebDropDown>
<ig:WebDropDown id="webdropdown2" runat="server" cssclass="igdd_Control" Height="12px" Width="365px" EnableAnimations="False" EnableCustomValues="False" OnItemsRequested="webdropdown2_OnItemsRequested"></ig:WebDropDown>
Code-behind VB code:
Protected Sub webdropdown2_OnItemsRequested(ByVal sender As Object, ByVal e As Infragistics.Web.UI.ListControls.DropDownItemsRequestedEventArgs)
Code to load webdropdown2
End Sub
Javascript-code(client-side):
function loadWebdropdown2(sender, e) {
$find("webdropdown2").loadItems(e.getNewSelection()[0].get_value(), false);
var webdropdown2_txt = $find("webdropdown2").get_items().getItem(1).get_text();
alert("webdropdown2_txt:" + webdropdown2_txt); }
Issue: When I select "0100 POLITICS" from webdropdown1, then "0101 NEW JERSEY" and "0102 NEW YORK" items are getting loaded correctly in webdropdown2.
After that, when I select "0200 SCIENCE" from webdropdown2, then "0201 BIOLOGY" and "0202 PHYSICS" items are getting loaded correctly in webdropdown2. But webdropdown2_txt displays text as "0102 NEW YORK" whereas "0202 PHYSICS" is expected.
I am not sure what may be the problem. How to make sure that AJAX response is coming correctly.
Also, to add into this, I am not sure how the "OnitemsRequested" event works. But what I am able to see is. first the entire javscript code is getting executed and then the control goes to the server-side function called on "ItemsRequested" event. I was assuming that when
is executed, control will immediately go to the server-side. After executing the "OnItemsRequested" event, the control will return to the client-side after the loaditems statement.
Hi Nikifor,
I don't have any other browser apart from IE. I am able to reproduce the behaviour with your sample. Please find your updated sample.
I have increased the number of items in webdropdown2 to 3 by adding "Z" value as well when "2" is selected in webdropdown1.
Also, I have added the below two lines in the AJAXResponse javascript function:
var ddLength = ig_controls.WebDropDown2.get_items().getLength(); alert("Number of items in webdropdown2:" + ddLength);
to check the number of items in webdropdown2 after AJAX Response comes. It shows the old values and not the count of newly loaded items.
I want to do some processing on the new items after getting the new items in the AJAX Response. but since this is not working, I am stuck here.
Is this behavior reproducible with the sample i have attached? Because i have tested this sample with FF 14, Opera 12, IE 9 and Chrome and none of the browsers shows this behavior. All the browsers show the new loaded values with the sample
I was asking for a solution to the AJAX response problem. Whatever solution you have given will not work till the AJAX response fix is done.
Problem Description: When ItemsRequested event is called and control goes to server-side to load a webdropdown with new values and after that, when a AJAX response comes to client-side, it still shows the old items in the response. When ItemsRequested event is called again, then the AJAX response shows the previous response and that's how it is working.
Ideal behaviour: When AJAX response is handled at client-side, it should show the newly loaded items so that validations can be done on the client-side for the new items.
Please provide some temporary solution to this problem if you don't have a permanent solution now. And when we can expect a permanent solution.
Hello Sunil,Please use this temporary workaround:
function mySelector() {
var dd = ig_controls.WebDropDown2;
if (dd.get_selectedItemIndex() > -1) {
dd.get_selectedItem().unselect();
}
dd.get_items().getItem(0).select();
var vtd = dd.get_items().getItem(0).get_text()
dd.set_currentValue(vtd,
true);
dd._elements[
"Input"].value = vtd;
Just checking to know how much time it will take to solve the issue? If it is going to take weeks, then please suggest some alternate solution/workaround for this issue.