If you've been developing with the radControls for long, you know that there are times when you wish that your amazing radControl could just do one more thing. Maybe you want to have a grid with drag-and-drop reordering. Maybe you want an input control that can be watermarked with CSS styles. Can we use Extenders to add this functionality to our 3rd party controls? I decided to try.
The executive summary: you can extend radControls with Extenders, but it's not easy.
Why? radControls, like many 3rd party components, come with lots of client-side functionality out of the box (after all, that's why you use these controls over the standard ASP.NET controls). That poses a challenge when you try to add your own client-side functionality to the controls, because you're faced with
breaking disabling existing functionality in order to get your own additions to work. That makes extending 3rd party controls much more difficult than extending normal ASP.NET controls (as is done by the AjaxControlToolkit).
I made two attempts to extend radControls: one to add drag-and-drop reordering of rows to grid and one to add styled watermarks to input. The input project fared much better than the grid project, though neither has resulted in perfect results yet. For this post, I will discuss the more successful input project with some code and screenshots.
The goal for my InputWatermarkExtender is simple: create a control that can apply a CSS styled watermark to an input control. Out of the box, input supports some basic watermarking capability, but it does not allow watermarks to be styled with CSS. That may change in version 2 (due in April), but for now we'll need an Extender to get the job done.
Public Property WatermarkText() As String
Return GetPropertyValue(strWatermarkText, "")
Set(ByVal value As String)
When an input control renders in the browser, it is actually rendering much more than a single "magic" textbox. In fact, it's rendering 3 textboxes and 2 span tags like this:
<span id="radInputTstStyleSheetHolder" style="display: none;"></span>
<input id="radInputTst" value="" type="hidden">
<input id="radInputTst_Value" name="radInputTst" type="hidden">
<input id="radInputTst_TextBox" name="radInputTst_TextBox" type="text">
this._mouseOverHandler = Function.createDelegate(this, this._onMouseOver);
var controlID = this.get_element().id + '_TextBox';
var e = $get(controlID);
Once you've got all of your events and properties wired-up, you can build your control and drop it onto a page in your test website. The only markup you need on your page to make this Extender work looks like this:
<radI:RadMaskedTextBox runat="server" id="radInputTst" Mask="#####" />
<cc1:InputWatermarkExtender runat="server" id="inputExtender1" WatermarkText="Enter your zip code" WatermarkCssClass="watermark" TargetControlID="radInputTst" />
Build your solution and you end up with an input control with a styled watermark that looks like this:
While extending radControls with Extenders is possible, it will require extra time to analyze and work around the existing client-side functionality. Hopefully this example has highlighted some of the issues you'll need to consider if you attempt your own Extenders and shown you some of the basics to writing Extenders. As soon as I find a good place to host the code, I'll post a link to download the code used in this article (with a trial version of radInput, of course). Until then, have fun experimenting with Extenders!
Thursday, February 15, 2007