Putting more than one behavior on one element

Microsoft Ajax has the interesting ability to combine more than one component onto a single element. In the previous talk, I alluded to this possibility and one of the commenters (Tiamat) asked me to show how this is done.

Here is an example that combines the new EditInPlace behavior I showed yesterday with an AutoComplete and a Watermark from the Ajax Control Toolkit:

The sample page here is using the extenders that the toolkit provides to instantiate the AutoComplete and Watermark behaviors but you really could include the script references and $create yourself. The edit in place behavior doesn’t have an associated server-side extender (but it would be quite easy to build one) so I’m just including the script and calling $create from client script. If you run this sample, you’ll see something like this:

If you view source in the browser, you’ll see that the code that the extender generates for the browser to run isn’t magical in any way, it’s just script tags and $create like we’d do manually.

One thing to note is that I hit a bug in the Toolkit while building that sample: AutoComplete assumes the element it attaches to is visible when it calls focus on it, which is usually OK but fails here when used with the edit in place behavior. I fixed this bug by surrounding the focus call with a try/catch block. A build of the toolkit with this fix is included in the zip file for this sample.

Bottom line is that more than one behavior on a single tag works great and makes for a formidable composition model.

@deap82: that's a really good question, and for the moment you'd need to use something like the script profiler tool that is available on http://www.codeplex.com/aspnet but in the next release I want to add to each of the toolkit scripts its list of dependencies, which should make things a lot easier.