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
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
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.
Veel succes met dit extender control.
