Target Group Feature in WebCallOut

The latest WebCallout control introduces a new capability to target a group of elements. Although it may seem simple, it’s indeed a nice time-saving feature which eliminates a lot of codes. With this group targeting feature, you can easily specify the “group name” of multiple WebCallOuts in the page. The callout instances with same “group name” will only appear once per show.

To get a better picture, let’s assume we have three WebCallout instances in a page where each callout is bound to each image element to be shown. The scenario that we’d like to achieve here is to show a callout on an image and automatically hide the other callouts that may still be displayed in the previous show.

Certainly the above scenario can be achieved using traditional way by handling the OnShow client-side event where custom codes are required to hide the other callouts. The new “group name” feature is a much more elegant approach to achieve this scenario, where you can simply specify the group name of all callout instance to an identical value.

For a quick instance, I have three callout instances where each callout is bound to a car image. Each callout will be shown when its associated image is hovered. Ultimately, you’ll see all the three callouts displayed at the same time when you hover on each car image quickly – which isn’t the behavior that users desire. To prevent this to happen, now I simply set all the GroupName property of all callout instances to “automobile”. Please see the following screenshot.

Here’s an example of the WebCallout markup declaration used in the above sample:

<ISWebDesktop:WebCallOut ID=”WebCallOut1″ runat=”server” Height=”69px” Width=”300px” TargetControlId=”chrysler” Title=”Chrysler 300 Touring” GroupName=”automobile” ContentMode=”UseTemplate”>

<ContentTemplate>

……. create the WebCallout template here…….

</ContentTemplate>

</ISWebDesktop:WebCallOut>

That’s all for now, hopefully this new time-saving feature is useful for your web development. Please visit our forum for feedback and questions.

Best regards,

Budianto Muliawan