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

Invoking javascript routine on dropdown change

I'm trying to implement a ASP.NET 2.0/Ajax page where a client-side javascript routine is invoked when the user changes the value of a dropdown list. The dropdown list is populated in the Page_Load event.

In the aspx file, I declare the drop down as:

<asp:DropDownList ID="cbIDs" runat="server"OnSelectedIndexChanged="idChanged()" >

Visual Studio complains about "'idChanged' is not a member' of the page.

I've tried searching Google and ASP.Net but haven't been able to find an example on how to do this. Can someone please help me out?

Thanks,

Richard

onselectedindexchanged is a server side event. That is not the right place to hook in client-side code.

Doing the searchhttp://www.google.com/search?q=asp.net+dropdownlist+javascript

brings me the first article at: http://weblog.vb-tech.com/nick/archive/2005/03/25/607.aspx

which shows how to add the onchange attribute to your drop down list. There you can hook in a client side event. Be careful to make sure you fire both client-side and server-side events if you need to.

--JJ

richardr:

OnSelectedIndexChanged="idChanged()" >

richardr:

Visual Studio complains about "'idChanged' is not a member' of the page.

OnSelectedIndexChanged is a server side event... so compiler would try to findidChanged()handler in code behind which is not there..

you need to useOnChange event instead of OnSelectedIndexChanged.

a sample code below:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript" language="javascript">
function idChanged()
{
alert("on change event...");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="DropDownList1" runat="server"onchange="idChanged()">
<asp:ListItem Text="1" Value="1" />
<asp:ListItem Text="2" Value="2" />
<asp:ListItem Text="3" Value="3" />
<asp:ListItem Text="4" Value="4" />
<asp:ListItem Text="5" Value="5" />
</asp:DropDownList>
</div>
</form>
</body>
</html>