MSDN Magazine - February 2008 - (Page 49) Figure 5 Using the Animations Property Note that the extender only applies to ASP.NET Web and HTML controls and can’t be used with regular HTML elements such as SELECT or OPTION. So, basically, the primary benefit of the ListSearch extender is that it lets you search for items in a list control by typing and prevents your search string from being lost after a few seconds; instead, it will remain there until you press Esc or post back to the server (both full and partial postbacks included). Any other character you type is appended to the search string and used to further narrow the list of items. Here’s how you use a ListSearch extender: You can use the Animations property to add an action to the procedure that brings up the list. You can define animations for two events—OnShow and OnHide. Animations are performed through the Animation extender and its related framework (see the example in Figure 5). The animation script fades the completion list in and out. The OpacityAction node sets the transparency, and HideAction displays the completion list along with any other visual effects. Finally, the FadeIn and FadeOut actions perform fading. Figure 6 shows an animated completion list. Incremental Search on Lists Have you ever tried to find a particular item in a long list—for example, a country name in the list of all countries in the world? If you’re fast enough to type a few consecutive letters, you may get the country you want, but even a few milliseconds of hesitating means that the next letter you type becomes the first letter of the search term. The ListSearch extender fixes this limitation. The extender features three main properties: PromptText, PromptCssClass, and PromptPosition. All of them refer to the prompt text—the string that appears around the target control to provide visual feedback about the text being searched. The default value for PromptText is “Type to search.” This text is usually displayed just above the target list control, as soon as the control gets focus. The PromptCssClass property gets and sets the name of the CSS class to apply to the prompt message. The prompt text is replaced by the search text as typed by the user. The Escape and Delete buttons play a key role here. The Esc button clears the current search and resets the list to the default selected item. The Del button removes the last typed character from the search text and updates the selection in the list. In addition, the Animations property works as I discussed for the AutoComplete extender a moment ago. It’s good to offer users options for what they can do just as they are about to do it. Years ago, tooltips were a huge improvement because they provided additional information on the fly about the role of a certain control. The advent of Dynamic HTML made HTML tooltips possible. Today, the HoverMenu extender makes it possible to display a flyout panel next to any ASP.NET server control. One of the most common uses of this extender is to display context menus that are activated by mouse movement events rather than a right-click. The HoverMenu extender is activated when the user moves the mouse over the control. As a result, the specified popup panel is displayed near the control; the actual position can be controlled programmatically. In addition, a CSS style can be applied to the control to mark it with a hot state. Figure 7 shows a radio button menu that provides suggestions about the text to insert in the textbox. Here’s the declaration for the related extender: Flying Context Menus Figure 6 The AutoComplete Extender in Action The Panel1 control contains the list of radio buttons. To make sure that any selection makes its way into the textbox target control, you define a SelectedIndexChanged event in the radio button list and wrap everything in an UpdatePanel control. (See the companion source code in the download for this column for more details.) Cutting Edge february2008 49
For optimal viewing of this digital publication, please enable JavaScript and then refresh the page. If you would like to try to load the digital publication without using Flash Player detection, please click here.