RadToolTipify ASP.Net Validators

2 posts, 0 answers
  1. Sunil
    Sunil avatar
    230 posts
    Member since:
    Jan 2004

    Posted 18 Aug Link to this post

    Requirements

    Telerik Product and Version

    Q2 2015 and later ( but should work with earlier versions also)

    Supported Browsers and Platforms

    Chrome, Firefox, Opera, Edge, IE 8 and above

    Components/Widgets used (JS frameworks, etc.)

    JavaScript and jQuery


    PROJECT DESCRIPTION 
    This code library shows how to display a RadToolTip for an ASP.Net validator instead of the regular validation message. There could be multiple validators on an aspx page so that each validator shows its RadToolTip or you combine all validation messages into a single tool tip showing a list of messages. There is a single JavaScript file that implements all this functionality. No server-side code is part of this library since its 100% JavaScript code/library.

    ONLINE DEMO

     RadToolTipify Validators Demo

    You can create a demo on your laptop by simply unzipping the attached sample to the root of your ASP.Net website project.

    STEPS to enable RadToolTips for Validators

    • Include the JavaScript library called RadTooltipifyValidatorsPacked.js within RadScriptManager of  content page or master page. You could instead include a minified file called RadTooltipifyValidators.min.js, but the packed file is more compressed and reduced in size than the minified file. Markup for this is as given below.

    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js"></asp:ScriptReference>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js"></asp:ScriptReference>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js"></asp:ScriptReference>
            <asp:ScriptReference Path="~/scripts/RadTooltipifyValidatorsPacked.js" />
        </Scripts>
    </telerik:RadScriptManager>

    • You need to place a RadToolTipManager that is 100% dedicated to displaying  RadToolTips for validators. If you already have another RadToolTipManager, you must add a dedicated RadToolTipManager. This JavaScript library will automatically find a dedicated RadToolTipManager, and if it does not find it then RadToolTips for validators will be disabled; your validators will still work but will not display RadToolTips.
    • For each of the validators in your aspx page you need to make sure that EnableClientScript="true" is there in the validator's  markup. Even if you are using a server-side validator you need to include this in its markup. If you don't do this, then no erro will ccur but radtooltips for validators will be disabled.
    • If you want to use animate library for animation, which is a third-party animation framework for CSS-based animations, then you must include animate.css in your aspx page or master page.
    • The JavaScript file called RadTooltipifyValidatorsPacked.js  or RadTooltipifyValidators.min.js for this code library can be found under scripts folder in attached sample.
    • animate.css file can be found under styles folder in attached sample.

    With above steps, your validators should be automatically radtooltipified.

     

    Control behavior of this library

    You don't need to specify any special configuration since the default configuration is good enough to take care of all use cases. But in case you want to customize how this library behaves, then you could do so by setting properties on an object called radToolTipifyValidators which is a JavaScript object exposed by this library.  Sample JavaScript code for customization is given below. Always include this customization code in client-side pageLoad event.

     

    function pageLoad() {
                            radToolTipifyValidators.isSingleToolTipMode = false;
                            radToolTipifyValidators.toolTipManagerId = "toolTipManager2";
                            radToolTipifyValidators.singleToolTipMobilePosition = Telerik.Web.UI.ToolTipPosition.Center;
                            radToolTipifyValidators.singleToolTipMobileRelativeTo = Telerik.Web.UI.ToolTipRelativeDisplay.BrowserWindow;
                            radToolTipifyValidators.isSingleToolTipModal = false;
                            radToolTipifyValidators.isAnimated = true;
                            radToolTipifyValidators.animationDuration = 200; //in milliseconds
                            adToolTipifyValidators.minDeviceWidth = 200; //if device width is less than this width in px, RadToolTips will not be shown for validators
                            radToolTipifyValidators.maxMobileDeviceWidthForSingleToolTip = 800;
    }

     

    Mobile Screen handling

    Also, this library is completely compatible with mobile screens. When screen size becomes small for showing multiple RadToolTips, then the library will automatically consolidate all the validation error messages and show them in a single tool tip. So, on mobile screens you will see a single RadToolTip showing a bulleted list of validation messages. Also, if the validation messages are large in size then the RadToolTip shown will automatically expand to a maximum size of 90% of viewport and show scroll bars for long messages.

     

    Disable this library even when included in a page

    You can disable this functionality on a page even if the JavaScript library is included by using the code below.

    function pageLoad() {
       radToolTipifyValidators.isEnabled  = false;
    }

     

    Obtrusive Validation

    This library will work with both obtrusive as well as the older style of validation. 

     

    Automated Debug Messages

    If the library finds there is something missing then it will automatically popup an alert message explaining the problem and how it can be corrected as in following screen shots: Alert Message 1Alert Message 2

    If you want to stop the library from displaying these alerts then  add JavaScript code as below in pageLoad event.

    function pageLoad() {
       radToolTipifyValidators.showDebugMessage  = false;
    }

     

    NOTE: You don't need to specify the property radToolTipifyValidators.toolTipManagerId  since the library will automatically find the right RadToolTipManager. But, if you wanted, you could specify the client id of RadToolTipManager that you would like to use for validators.

     

    Third-part Animate library

    If you wanted to use the third-part animation library then you need to include the following code in pageLoad event, and also include the CSS file animate.css that can be found under  styles  folder in attached sample.

         function pageLoad() {
         radToolTipifyValidators.isAnimated = true;
         radToolTipifyValidators.isAnimateLibraryUsed = true;
         radToolTipifyValidators.animationDuration = 300;
    }

     

    Theming

    The current Telerik theme will be used unless the user wants to use one of the other custom themes from following list: Red, Orange, Windows10, Yellow, Green, Pink, Maroon, Dark, OldMonitor, Windows, Highlight, Daylight and Rainyday. To use one of these custom themes, you could use code like below. 

     

    function pageLoad() {
       radToolTipifyValidators.customSkin  = "oldmonitor";//case is not important when specifying a theme name
    }

  2. Vessy
    Admin
    Vessy avatar
    1385 posts

    Posted 22 Aug Link to this post

    Hi Sunil,

    Thank you a lot for sharing your solution with our community. I have updated your Telerik points as a small token of gratitude for your efforts.

    Regards,
    Vessy
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top