How to Handle the AjaxControlToolkit's Client Event or Rewrite the Delegate of the Client Event

It was mentioned in my last post that AjaxControlToolkit Extender client classes provide many useful APIs which can bebound to other events and provide handlers to them. Now, let's see how it works.(How to Find the Client Behavior of the Extender which is placed inside the DataBind Control)

Each extender provides some established functions to handle its client events which are defined as "add_Event Name".

For example, AutoCompleteExtender has several client events, such as "GotFocus", "LostFocus", "KeyDown", "CompletionListBlur", "ListMouseOver". We can easily understand the functions by their names: "GotFocus" event happens when the cursor focus on the AutoComplete's target -- the input TextBox; "ListMouseOver" event is like a mouseover event of the autocomplete flyout(we can call it SuggestionList) . For exact descriptions of these events, please download this file: AjaxControlToolkit-Framework3.5SP1.zip.(with complete source), and refer to this page:\AjaxControlToolkit-Framework3.5SP1\AjaxControlToolkit\AutoComplete\AutoComplete.aspx

Here, I would like to take "ListMouseOver" event as the sample control in the test demo below. The AutoComplete control creates a delegate and a handler to the event.

Code

Besides, there are two APIs named add_itemOver and remove_itemOver which are used to handle the same event.

Code

Ok, let's use these functions.
Here is a scenario. An AutoComplete should be added into a DIV while another DropDownList is under its input TextBox. Normally, the generated CompletionList can be displayed upon the DropDownList. Like this:

But if we place them inside a relative position DIV, the behavior is changed. The DropDownList will stay above any other controls! (This is the established design of IE6.)

To make the CompletionList locate on the top, we need to add a shared absolute position IFRAME behind the CompletionList. Here are the steps to reach it:

Firstly, we need to handle the CompletionList's ClientShowing event.

Code

Then, we need to find the Client Behavior and the CompletionList of the AutoComplete in the script.
In the end, add the shared absolute position IFRAME.

Code

Now, we finally achieve the goal of keeping the CompletionList on the top of the DropDownList:

Take a break here.

A good gain takes long pain. If you think that's all, then you may be wrong here. I have metioned there is a "MouseOver" event of the CompletionList. If we add the IFRAME, would any chaos be added in? YEAH! That's what I focused.

If the input text is long enough, we can find the option values in the CompletionList are not in the same length. What would be raised if hovering over the end of the shorter option? You may think of the result--an error!

The cause is the added IFRAME does not have a valid value to choose. Let's fix it by handling the "MouseOver" event.

Firstly, we need to remove the original event delegate in the pageLoad function. Do you remember how to find the Client Behavior of the Extenders? We need it now!

Code

Actually, we can use this method $find(the AutoComplete's BehaviorId) instead of the currentBehavior if there is only one extender.

Secondly, in the customMouseOverHandler function, rewrite the original method by adding the judge of the Hovered Item type:

Code

OK! This is the really end! I assume you have a basic understanding of how to handle the AjaxControlToolkit extender's client event or rewrite the delegate of the client event. Any questions, feel free to let me know here or post your request to the AJAX forum.

The complete code:

Code

The related thread url: http://forums.asp.net/t/1362145.aspx

posted on 2009-01-15 17:24 Zhi-Qiang Ni 阅读(1676) 评论(8) 编辑收藏举报