Sunday, March 11, 2012

CascadingDropDown fire event after binding?

You could add the code yourself or maybe wait a while until we add events like this to the entire Toolkit as we'd like to do in a future release. Alternatively, you might be able to attach your code to the onchange event of the SELECT element, but this is only an idea.
Managed to edit the source for the control and added an onClientPopulated property which works really well!

Can you post? I want to use something like that to populate the DDLs with database values.

Thanks!


Nevermind...I found another way to achieve what I wanted to do.

chrispont:

Managed to edit the source for the control and added an onClientPopulated property which works really well!

Could you please give a code-sample on how to listen to an event from the client-script code in the page hosting a CascadingDropDown?

Basically, I need the same thing: I want to re-color prompt text when the values are populated.

Thanks in advance!


Turned out to be pretty easy and I copied most of the source from the dropdown control

In the AjaxControlToolkit source, added the following to CascadingDropDownBehaviour.js...

add_populated :function(handler) {

/// <summary>

/// Add a handler on the populated event

/// </summary>

/// <param name="handler" type="Function">

/// Handler

/// </param>

this.get_events().addHandler("populated", handler);

},

remove_populated :function(handler) {

/// <summary>

/// Remove a handler from the populated event

/// </summary>

/// <param name="handler" type="Function">

/// Handler

/// </param>

this.get_events().removeHandler("populated", handler);

},

raisePopulated :function(arg) {

/// <summary>

/// Raise the populated event

/// </summary>

/// <param name="arg" type="Sys.EventArgs">

/// Event arguments

/// </param>

var handler =this.get_events().getHandler("populated");

if (handler) handler(this, arg);

}

..and in CascadingDropdownExtender.cs I added another property..

[DefaultValue("")]

[Category("Behavior")]

[ExtenderControlEvent]

[ClientPropertyName("populated")]

publicstring OnClientPopulated

{

get {return (string)(ViewState["OnClientPopulated"] ??string.Empty); }

set { ViewState["OnClientPopulated"] =value; }

}

then on your control just add

OnClientPopulated="function(){<yourscript>}"

to your control.

HTH

Chris


Oops, sorry, forgot to add.

You also need

this

.raisePopulated();

in the _onMethodComplete function

Thanks

Chris


Thank you very much for your reply.

Few more questions:

Don't these have to be called somewhere ininitialize :function() anddispose :function() ?

add_populated :function(handler)
remove_populated :function(handler)

If so, what should be passed as a handler parameter?

raisePopulated :function(arg)

this also requires some parameter?


Never mind. I figured it out. Works perfectly :-)

Thank you so much for sharing your code!!!


Hi,

I keep getting this error after altering the cdd with the code you shared, can you help me on this? Tks.

the code that generates this exception is:

var $create = Sys.Component.create = function Sys$Component$create(type, properties, events, references, element) {/// <param name="type" type="Type"></param> /// <param name="properties" optional="true" mayBeNull="true"></param> /// <param name="events" optional="true" mayBeNull="true"></param> /// <param name="references" optional="true" mayBeNull="true"></param> /// <param name="element" domElement="true" optional="true" mayBeNull="true"></param> /// <returns type="Sys.UI.Component"></returns> var e = Function._validateParams(arguments, [ {name:"type", type: Type}, {name:"properties", mayBeNull:true, optional:true}, {name:"events", mayBeNull:true, optional:true}, {name:"references", mayBeNull:true, optional:true}, {name:"element", mayBeNull:true, domElement:true, optional:true} ]);if (e)throw e;
////// Error /////////

description: "Sys.ArgumentUndefinedException: Value cannot be undefined.

Parameter name: type"

message: "Sys.ArgumentUndefinedException: Value cannot be undefined.

Parameter name: type"

name: "Sys.ArgumentUndefinedException"

paramName: "type"

////// Error /////////


Frankly speaking I don't know why are you getting errors with the suggested solution. Just in case, go through this checklist to ensure that you didn't miss anything:

1. Modify CascadingDropDownBehavior.js as suggested by chrispont in his posting (addadd_populated :function(handler),remove_populated :function(handler),raisePopulated :function(arg) with their respective code).

2. In CascadingDropDownBehavior.js locate a_onMethodComplete :function(result, userContext, methodName) and add the following line there (right afterthis._setOptions(result);):

this.raisePopulated(null);

3. Modify CascadingDropDownExtender.cs as suggested by chrispont (add the behavior OnClientPopulated).

4. Build the Toolkit.

5. Ensure that your project/solution references this new version of the Toolkit!!!

6. Now in your aspx file you can add the property OnClientPopulated to your CascadingDropDown (intellisense should also work for this property now).

7. Build your page.

Hope this helps.

PS. Once again, many thanks to chrispont for sharing the solution!


Thank you ,

Figured what was causing the problem, had the event raisePopulated set before the set options.

Moving on to the next problem, I set the value of the selected index, and the cdd doen't fire the events to select the next combo values, any clues? (I know i'm pushing on this post...sorry)

Best regards,

Pedro Costa


ps: it has to be in client side

I am afraid that after the dropdown is populated, the extender does not "hear"/"see" changes made to SelectedIndex onchange event made via client-script code. In other words, I assume the extender does not know the client state of the dropdown if changes are made without user interaction.

I can suggest only the following: in your OnClientPopulated client-side handler which sets the value of selected index you also need to fire the extender's _onChange or _onParentChange handlers (you might need to experiment which one is needed). You will have to get the extender's behavior collection to fire its _onChange or _onParentChange. A code-sample on how to get the extender's behavior and fire its methodis available in this forum (the thread deals with CollapsiblePanelExtender though, but the approach should be identical).

No comments:

Post a Comment