Scroll And Slider ToolTip Extenders for RadGrid for ASP.NET AJAX

ASP.NET Extender Controls are cool. They allow you to add rich client capabilities to other server controls. The ASP.NET AJAX Control Toolkit is a wonderful example of unleashing the power of extenders to give regular ASP.NET server controls rich client capabilities. We tried this approach to further enrich RadGrid's otherwise quite solid set of client functionalities. The result is even richer.

The sample project attached contains 2 custom extender controls that can be used with RadGrid. The two are similar in purpose, but different in usage.

GridSliderToolTipExtender

The GridSliderToolTipExtender is used with RadGrid's Slider pager. It provides you with a handy tooltip that is dynamically loaded over the RadSlider when you slide it. You define a custom template to the extender's ToolTipTemplate that is rendered into the tooltip. Before the tooltip is shown, it makes an AJAX postback and fires its server-side OnToolTipUpdate event. You can handle the event and pass a data item to the event argument, to have the tooltip template bind to that item. The purpose is simple - when the slider value changes, you can query RadGrid's data source and pass the first data item from the selected page before actually paging. Thus, your users will see any preview data you want to show them without having to page.

The GridSliderToolTipExtender provides the client-side beforeShow event that you can use to cancel the postback, change the postback data, or sent some custom data to the server. You can subscribe to the event both by providing a method name to the GridSliderTooltipExtender.OnClientBeforeShow property, or using the client object to subscribe from the javascript.

Finally, a performance optimization. The GridSliderToolTipExtender will cache any response from the server. This means that the next time you want to make an AJAX request with the same postback data that has already been sent in a previous request, the extender won't hit the server. It will load the tooltip content from the cache.

GridScrollToolTipExtender

Our second attempt to further enrich RadGrid's client capabilities turned into an extender control that can display a tooltip when Scrolling is enabled for RadGrid. GridScrollToolTipExtender exposes a ToolTipTemplate that is databound on the server when RadGrid is loaded initially. It then works completely client-side. When you scroll, it shows you a tooltip of the current topmost item into view.

Besides the customizable ToolTipTemplate, You can specify the display position (in pixels) of the tooltip relative to the RadGrid container using the Left, Right, Top and Bottom properties.

ToolTipTemplate exposes a couple of client-side events - beforeShow and show. Their event argument objects both expose the target data item, its index, as well as the tooltip content that is to be / or is already rendered. beforeShow can be used to cancel the action (setting eventArgs.set_cancel(true);) and you can specify event handlers for both of them programmatically through the OnClientBeforeShow and OnClientShow properties.

If you got into the idea of using control extenders to enrich RadGrid, you can go ahead and check out the attached project. The two extenders presented here can be further enhanced in countless ways. If you have a great idea on what else to add, or want to get wild and implement a control extender for any of the RadControls for ASP.NET AJAX yourself, do not hesitate to share your ideas/projects/comments here.

If you think extending RadGrid with even richer client capabilities is cool too, check Rosen's blog post to see how an extender can turn RadListView into a powerful client-bound image loader with "infinite scroll".

GridSlideAndScrollTooltipExtenders.zip