ASP.NET Extender Controls
are cool. They allow you to add rich client capabilities to other server controls.
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.
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,
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.
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
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
If you think extending RadGrid with even richer client capabilities is cool too,
Rosen's blog post to see how an extender can turn
RadListView into a powerful client-bound image loader with "infinite scroll".
Iana Tsolova is Product Manager at Telerik’s DevTools division. She joined the company back in the beginning of 2008 as a Support Officer and has since occupied various positions at Telerik, including Senior Support Officer, Team Lead at one of the ASP.NET AJAX teams and Technical Support Director. Iana’s main interests are web development, reading articles related to geography, wild nature and latest renewable energy technologies.