Showing a ValidationSummary in a RadWindow

4 posts, 0 answers
  1. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 20 Jun 2010 Link to this post

    Requirements

    RadControls version

    2009 Q3 and later

    .NET version

    Any

    Visual Studio version

    Any

    programming language

    C#

    browser support

    all browsers supported by RadControls

    I've seen the question "Can I show a validation summary in a RadWindow" a number of times in the forums; I asked it myself. There have been a number of responses which kind of do the job but never well enough for my to want to use 'em.

    Looking through the telerik demos recently (no, I don't get out much) I noticed the "RadWindow as a Controls Container" demo and developed the following solution to the validation summary question.

    Before I start let me say that this only works with the CustomValidator class.

    Consider a case were I need to validate that the value in a textbox begins with, say, an "A" (trivial enough for you?). We'd start with something like this...


            <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">  
                <script type="text/javascript">  
                    function validate(s, e) {  
                        var wnd = $find("<%= RadWindow1.ClientID %>");  
                        ee.IsValid = e.Value.substring(0) == "A";  
                    }  
                </script> 
            </telerik:RadScriptBlock> 
     
            <asp:ValidationSummary ID="ValidationSummary1" runat="server"   
                DisplayMode="BulletList" 
                ShowSummary="true" /> 
     
            <telerik:RadTextBox ID="RadTextBox1" runat="server">  
            </telerik:RadTextBox> 
     
            <asp:CustomValidator ID="CustomValidator1" runat="server"   
                ControlToValidate="RadTextBox1" 
                ClientValidationFunction="validate" 
                EnableClientScript="true" 
                ErrorMessage="CustomValidator"></asp:CustomValidator> 
            <br /> 
            <asp:Button ID="Button1" runat="server" Text="Button" /> 
     

    To get the summary in a RadWindow, change it to looke like this ...

            <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">  
                <script type="text/javascript">  
                    function validate(s, e) {  
                        var wnd = $find("<%= RadWindow1.ClientID %>");  
                        ee.IsValid = e.Value.substring(0) == "A";  
                        if (!e.IsValid) {  
                            wnd.show();  
                        } else {  
                            wnd.hide();  
                        }  
                    }  
                </script> 
            </telerik:RadScriptBlock> 
     
            <telerik:RadTextBox ID="RadTextBox1" runat="server">  
            </telerik:RadTextBox> 
     
            <asp:CustomValidator ID="CustomValidator1" runat="server"   
                ControlToValidate="RadTextBox1" 
                ClientValidationFunction="validate" 
                EnableClientScript="true" 
                ErrorMessage="CustomValidator"></asp:CustomValidator> 
            <br /> 
            <asp:Button ID="Button1" runat="server" Text="Button" /> 
              
            <telerik:RadWindow ID="RadWindow1" runat="server" 
                Behaviors="Close, Move, Resize" 
                Height="200px" 
                Title="Validation Errors" 
                Width="200px">  
                <ContentTemplate> 
                    <asp:ValidationSummary ID="ValidationSummary1" runat="server"   
                        DisplayMode="BulletList" 
                        ShowSummary="true" /> 
                </ContentTemplate>      
            </telerik:RadWindow> 
     

    Basically, that's it. You can play to your heart's content from here. You can add other controls to the window, like a button to dismiss it, you can make it modal, whatever.

    There is a bit of a gotcha here however; as written above, a CustomValidator won't fire if your input is blank. You prolly know this, but did you know that it will /always/ fire if you don't include the ControlToValidate attribute? All that means is that you have to explicitly get the control you want to validate in your client-side code, like this...

            <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">  
                <script type="text/javascript">  
                    function validate(s, e) {  
                        var wnd = $find("<%= RadWindow1.ClientID %>");  
                        var tb = $find("<%= RadTextBox1.ClientID %>");  
     
                        e.IsValid = tb.get_value().substring(0) == "A";  
                        if (!e.IsValid) {  
                            wnd.show();  
                        } else {  
                            wnd.hide();  
                        }  
                    }  
                </script> 
            </telerik:RadScriptBlock> 
     
            <telerik:RadTextBox ID="RadTextBox1" runat="server">  
            </telerik:RadTextBox> 
     
            <asp:CustomValidator ID="CustomValidator1" runat="server"   
                ClientValidationFunction="validate" 
                EnableClientScript="true" 
                ErrorMessage="CustomValidator"></asp:CustomValidator> 
            <br /> 
            <asp:Button ID="Button1" runat="server" Text="Button" /> 
              
            <telerik:RadWindow ID="RadWindow1" runat="server" 
                Behaviors="Close, Move, Resize" 
                Height="200px" 
                Title="Validation Errors" 
                Width="200px">  
                <ContentTemplate> 
                    <asp:ValidationSummary ID="ValidationSummary1" runat="server"   
                        DisplayMode="BulletList" 
                        ShowSummary="true" /> 
                </ContentTemplate>      
            </telerik:RadWindow> 

    If you find a way of making this technique work with other validator types, or just find a better way of doing this, why not post here and let us all know?

    --
    Stuart
  2. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 21 Jun 2010 Link to this post

    Hello Stuart,

    Thank you very much for this article - I am sure it will be of help to the other members of our community :)


    Greetings,
    Georgi Tunev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. KidSysco
    KidSysco avatar
    10 posts
    Member since:
    Aug 2013

    Posted 26 Mar 2015 Link to this post

    Great post, thank you for sharing your thoughts on this Stuart!

    This helped me develop another approach that has worked for me. Just continuing to pay it forward here.

    Any type of validator can be used in this approach. But all client scripting must be turned OFF on all validators and the ValidateEmptyText property set to true on all CustomValidators.

    The RadWindow contains a simple div with unique ID. I use jQuery to copy the ValidationSummary here. For some reason the ValidationSummary does not show for me in the RadWindow. Probably due to the ContentTemplate, not sure.

    <telerik:RadWindowManager ID="ArMaintenanceRadWindowManager" runat="server">
        <Windows>
            <telerik:RadWindow ID="ValidationWindow" Title="Validation Errors" runat="server" Width="400" Height="300" CssClass="modal-with-splitter" KeepInScreenBounds="true" Behaviors="Close,Move,Resize">
                <ContentTemplate>
                    <div id="ValidationSummary"></div>
                </ContentTemplate>
            </telerik:RadWindow>
        </Windows>
    </telerik:RadWindowManager>

    Then I use another Div to wrap the real ValidationSummary tag and hide it elsewhere on the page where it works more naturally. 

    <div id="ValidationSummaryHidden" style="display:none;">
        <asp:ValidationSummary runat="server" ID="FormValidationSummary" CssClass="save-message-error" DisplayMode="BulletList" ShowValidationErrors="true" ShowSummary="true" ShowMessageBox="false"  EnableClientScript="false" />
    </div>

    If validation fails in the save button event, then I call a javascript function that exists at the bottom of the page. I use the script manager because this is all likely going on inside an ajax panel of some sort.

    protected void SaveButton_Click(object sender, EventArgs e)
    {
        if (this.Page.IsValid)
        {
            // do good stuff.
        }
        else
        {
            // show validation error in RadWindow!
            ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "ShowValidationWindow", "ShowValidationWindow();", true);
        }
    }

    Here is the javascript using a little jQuery to copy the ValidationSummary to the RadWindow and show that window!

    <telerik:RadScriptBlock runat="server" ID="SicScriptBlock">
        <script type="text/javascript">
            function ShowValidationWindow() {
                $('#ValidationSummary').html($('#ValidationSummaryHidden').html());
                var win = $find("<%= this.ValidationWindow.ClientID %>");
                win.show();
            }
        </script>
    </telerik:RadScriptBlock>
  4. TommyBoy
    TommyBoy avatar
    22 posts
    Member since:
    Oct 2011

    Posted 20 Jul 2015 in reply to KidSysco Link to this post

    Thank you KidSysco for posting your update. Your solution worked for me like a charm!
Back to Top