Validation Summary using Telerik control

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

    Posted 16 Nov 2017 Link to this post

    Requirements

    Telerik Product and Version

    2015.2.826.45 and later

    Supported Browsers and Platforms 

    Chrome, Firefox, Opera, Edge and IE>=8

    Components/Widgets used (JS frameworks, etc.)

    jQuery


    PROJECT DESCRIPTION 
    This library called validationSummary.min.js is a minified JavaScript library that will automatically show ASP.Net Validation Summary control as a Telerik control.  The Telerik control could be a RadAlert or RadToolTip or RadWindow.   jQuery must be included in the aspx page for this library to work. The developer does not need to write any further code.

    The library will display a Telerik control based on ShowMessage property of validation summary control. 

    An online demo can be see at following url : http://www.kandoodev.com/ValidationSummaryUsingTelerikControls.aspx

    Also, you can create a demo on your computer using attached files.

    Following are some important points related to this library.

    • You need to include either a RadWindowManager or RadToolTipManager in the aspx page in which you are using this library depending on whether you want to display a RadAlert/RadWindow or RadToolTip for validation summary control.
    • If ShowMessageBox = "true" then validation summary is shown as a RadAlert.
    • If ShowMessage= "false" then validation summary is shown as a RadToolTip.
    • The title of the validation summary can be styled by specifying a CSS class called validationSummaryTitle.
    • The body of validation summary can be styled by specifying a CSS class called validationSummaryMessage.
    • The Telerik control displayed for validation is 100% responsive i.e. no matter what the screen size, the Telerik control will display according to the screen size. This means this library will make the summary look beautiful on both mobile as well as laptop devices.
    • The Telerik control being shown will be automatically autosized, no matter what the screen size across mobile and non-mobile devices. You do not need to include any special autosizing library for this.

    You can include this library either within RadScriptManager or as a regular script. If you include it using regular script tag, then make sure you include it just before closing body tag, else you will end up with JavaScript error.

    Sample markup to make this library work

    <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/validationSummary.min.js" />
         </Scripts>
    </telerik:RadScriptManager>
    <asp:ValidationSummary ID="ValidationSummary1" runat="server" ShowMessageBox="true" ShowSummary="true" ShowValidationErrors="true" CssClass="err" HeaderText="You must enter a value for following field(s):" DisplayMode="BulletList" />
    <telerik:RadToolTipManager runat="server" ID="RadToolTipManager1" Animation="Resize" AnimationDuration="500" RenderMode="Lightweight" Modal="false" AutoTooltipify="false"></telerik:RadToolTipManager>
    <telerik:RadWindowManager ID="RadWindowManager1" runat="server" KeepInScreenBounds="true" Animation="Resize" AnimationDuration="300" RenderMode="Lightweight" CenterIfModal="false" VisibleStatusbar="false"></telerik:RadWindowManager>


    Customization of this library

    If you need to, you could customize behavior of this library in some special cases. All customization code must be within client-side pageLoad event.
    Below are points related to customization.

    • This library exposes a single object called vsm, that has useful properties for customization.
    • You can set whether to animate RadToolTip or not by setting following properties - vsm.isToolTipAnimated and vsm.toolTipAnimationDuration.
    • You can set the width of RadAlert or RadWindow by using the property of vsm.validationSummaryRadWindowtWidth  or
       vsm.validationSummaryRadAlertWidth.  If you set the width property, then the corresponding control will take that width and its height will be automatically adjusted. If you do not set the width, it will still work because the library will use an optimal width for the control. But at the end, the Telerik control will be perfectly autosized.
    • The width of RadToolTip is auto adjusted and you cannot set a width for it.
    • Besides, displaying summary in RadAlert or RadToolTip, you could instead display it in RadWindow if you set the property vsm.validationSummaryInRadWindow to true.
    • To style the validation summary header text you can include a CSS class called valSummaryTitle and to style the message part of the summary control you can include a CSS class of valSummaryMessage
    • To set title of RadAlert or RadToolTip or RadWindow, you can set the property  vsm.validationSummaryTitle.

    Customization code

    function pageLoad() {
        //to show in Radwindow you need to set the property below, else it depends on
        //ShowMessageBox property of ValidationSummary control
        vsm.validationSummaryInRadWindow = true;
     
        //set the title of RadAlert or RadWindow or RadToolTip
        vsm.validationSummaryTitle = "Input Errors"
     
        vsm.toolTipPosition = Telerik.Web.UI.ToolTipPosition.BottomRight;
     
       //animation properties for RadToolTip
        vsm.isToolTipAnimated = true;
        vsm.toopTipAnimationDuration = 1000;
     
       //width properties for RadAlert and RadWindow
        vsm.validationSummaryRadWindowtWidth = 500;
        vsm.validationSummaryRadAlertWidth = 700;
    }


    CSS for styling

    .valSummaryTitle {
        font-weight: bold;
        font-style: italic;
    }
     
    .valSummaryMessage {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        padding-top: 10px;
        padding-bottom: 5px;
    }






     

  2. Vessy
    Admin
    Vessy avatar
    1688 posts

    Posted 17 Nov 2017 Link to this post

    Hi,

    Thanks a lot for your contribution, Sunil. Your Telerik points have been updated accordingly.

    Regards,
    Vessy
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top