Invoking CascadingDropDown populate from javascript

Hi,

This question has problably been asked before but I was not able to find something relevant in my search.

I am using cascading dropdown control extenders. The are populated by a client web service method. I would like to invoke the cascading dropdown behaviour using javascript as opposed to user interaction.

Could somebody give me a brief summary to the javascript interface of the CascadingDropDown extender? I want to be able to populated and change the selected index of the corresponding HTML select elements and get the full effect of the cascading dropdown behaviour.

Thank you.

This is a BUMP to my post. I just want a few hints. How can I repopulate the HTML select elements by invoking the default functionality of the CascadeDropdown control extender via javascript. Any hints are very much appreciatted.

BUMP one more time. Someone help please.

Last try to BUMB. If I don't get any feedback I will try to do the processingon the server. So that will defeat the whole Ajax concept but I have no other option.

well, I have the same situation, and did it like this:

var ccd=$find('CCD_" + sControlName +"');

if (!ccd) {return false;}

ccd._onParentChange(null,null);

(this last line triggers the cascading-event)

Hi Attractor,

My understanding of your issue is that your have two questions list below. If I have misunderstood , please feel free to let me know.

attractor:

Could somebody give me a brief summary to the javascript interface of the CascadingDropDown extender?

Please see the CascadingDropDownBehavior.js, all the functions has been listed with a brief summary. One thing should be emphasized that it is not reommended to call a function start with "_". It is just like a inner function. Here is a sample:

get_SelectedValue : function() { /// <value type="String"> /// Selected value of the drop down /// </value> return this._selectedValue; }

attractor:

How can I repopulate the HTML select elements by invoking the default functionality of the CascadeDropdown control extender via javascript.

Based on my research, there's no public method been exposed. So my solution is :

Use javascript to select a different value meanwhile store the original selected vaule somewhere such as a hiddenField. Then afterwards make the stored value as the selected item.

Best regards,

Jonathan.

Thank you for your replies.

I was able to replicate the Cascading DropDown behaviour through the fireEven('onchange');

When calling this method on the Select element it triggers the cascading effect.

I also used the window.setTimeout() method to delay the selection of the new value in the triggered select element until its content has been refreshed.

The code is something like that :

list1.value ="val1"list1.fireEvent('onchange');window.setTimeout("list2.value = 'val2';", 1000);

Unfortunately I was not able to make it work for Mozilla. The dispatchEvent() would not work as expected. Any ideas how I can atchieve this effect in Mozilla?

Hi Attractor,

The simplest way to make your Javascript code be compatible with the main browsers is using Microsoft Ajax Library's functions. In my opnion, you need not use list1.fireEvent('onchange'); Here is my solution, please add these codes to your page.

function pageLoad(){//be called automatically.
$find("<%=Your CascadingDropDown.ClientID%>").add_selectionChanged(onSelectionChanged)
}
function onSelectionChanged(){
alert(1); // add your code here
}

For more details , please dip into the Ajax Control Toolkit's source code.

Best regards,

Jonathan