maandag 19 oktober 2009

Vervanger voor ValidatorCalloutExtender van AjaxControlTookit

Al enige tijd maak ik dankbaar gebruik van het AjaxControlTookit in mijn webapplicaties. Het control wat ik het meest gebruik is de ValidatorCalloutExtender. Deze extender vervangt de standaard meldingen van een ASP.NET Validator control door een fraaie tooltip.

Sinds kort maak ik gebruik van de Telerik controls (RadControls for ASP.NET AJAX), welke mijns insziens een zeer volwassen pakket met ASP.NET AJAX controls is.

Eigenlijk wil ik niet beide control suites in één project gebruiken en daarom heb ik een vervanger voor de ValidatorCalloutExtender van het AjaxControlTookit ontwikkelt. Deze vervanger is ook een ASP.NET AJAX Extender, welke gebruik maakt van de RadTooltipManager om de tooltips bij een Validator control te tonen.

Ik heb deze extender in een test web project geplaatst, welke je hier kan downloaden. In dit bestand heb ik overigens de assemblies van Teleriek niet toegevoegd. Daar zal je zelf voor moeten zorgen.

Hieronder een korte uitleg van deze extender:
De belangrijkste onderdelen van de extender zijn een klasse, genaamd ValidatorRadTooltipExtender, en een javascript bestand, genaamd ValidatorRadTooltipBehavior.
ValidatorRadTooltipExtender
De ValidatorRadTooltipExtender klasse erft van de abstracte klasse ExtenderControl, welke de basis is voor ASP.NET AJAX control extenders. Deze klasse bevat de volgende eigenschappen:
  • RadTooltipManagerID = het ID van het RadTooltipManager control welke gebruikt wordt om de tooltips te tonen
  • HighlightCssClass = naam van de class in de stijlen van de pagina, welke wordt gebruikt om toe te passen op het control wat gevalideert wordt (bijv. een Textbox welke verplicht is om in te vullen), wanneer het control ongeldig is volgens de validatie
ValidatorRadTooltipBehavior
Dit is het javascript bestand welke de extender functionaliteit implementeert. Hierbij wordt de EvaluationFunction van het Validator control vervangen door een eigen Validate functie. Deze functie voert wel de EvaluationFunction van het Validator control uit, maar zorgt er daarna voor dat het ToolTip wordt getoond op de pagina.
Hiernaast worden event handlers toegevoegt voor de Focus en Blur events van het control wat gevalideert wordt. Bij OnFocus wordt de tooltip getoond (indien deze niet geldig is volgens de validatie) en bij OnBlur wordt deze tooltip weer verborgen.

Webpagina
De volgende onderdelen dienen toegevoegd te worden aan een pagina, om gebruikt van deze extender te kunnen maken:
RadTooltipManager
Dit control dient toegevoegd te worden aan de webpagina of aan de Master van de webpagina. De volgende eigenschappen op dit control zijn van belang:
  • RelativeTo = waar (gerelateerd aan welk object) dient de tooltip gepositioneerd te worden. Deze eigenschap dient op 'Element' ingesteld te worden
  • HideEvent = welk event zorgt ervoor dat de tooltip weer verborgen dient te worden. Deze eigenschap dient op 'FromCode' ingesteld te worden
  • ShowEvent = welk event zorgt ervoor dat de tooltip weer getoond dient te worden. Deze eigenschap dient ook op 'FromCode' ingesteld te worden
Validator
Naast het element wat gevalideert dient te worden (bijv. een Textbox) dient natuurlijk het Validator control (bijv. de RequiredFieldValidator) aan de pagina toegevoegd te worden. Voor dit control zijn de volgende eigenschappen van belang:
  • ErrorMessage = de melding die in de tooltip getoond moet worden indien het element niet geldig is. Hierbij kan je gewoon gebruik van HTML maken, zodat je de tooltip een leuk uiterlijk kan geven!
  • Display = deze eigenschap dient op 'None' ingesteld te worden, zodat de ErrorMessage van de validator niet in een label wordt getoond. Hiervoor wordt natuurlijk de tooltip gebruikt.
  • SetFocusOnError = indien deze op 'True' wordt ingesteld dan zal het element wat gevalideert wordt de focus krijgen wanneer dit niet geldig is. Door deze actie zal het OnFocus event ervoor zorgen dat de tooltip direct getoond wordt.
Hierboven zijn de belangrijkste onderdelen van dit extender control beschreven. Hieronder een screenshot van deze extender in werking.


Veel succes met dit extender control.

5 opmerkingen:

Anoniem zei

Ja, waarschijnlijk dus het is

Anoniem zei

Bedankt voor een interessante blog

Allan Gobin zei

Excellent work! Thanks!

Allan Gobin zei

Hi Dan,

I ran across a problem with your control in Firefox and Chrome that I don't know if you already resolved.

Firefox and Chrome shows the error message of the LAST validator on the page not the first. If you run your test app in Firefox you will see this.

You can reach me at: allan@getnex.com

Thanks

Dennis Smit zei

Geen werving en selectiebureaus, enkel werkgevers! Solliciteer dus rechtstreeks bij de werkgever. Check jouw ict vacature!