Validation Disappearing In RadInputManager Controls Tied To The RadAjaxManager On Loss of Focus/OnBlur

14 posts, 1 answers
  1. jgill
    jgill avatar
    116 posts
    Member since:
    Jul 2005

    Posted 11 Dec 2010 Link to this post

    Hello,
    I am trying to find a way to around a difficult issue I have been having with a scenario that involves the RadInputManager and RadAjaxPanel.  Normally I want the page to do an async postback when the value in a control changes (e.g. similar to OnPropertyChanged and TextChanged ) except when the control fails validation, but it is posting back every time.  Note that my controls are actually usercontrols and I do not want to utilize Asp.net Validators that are embedded in the user control definitions as the entire application is dynamic (e.g. the validations are added dynamically and are rarely the same from control to control).

    • I have an application that dynamically loads regular Asp.net textboxes and other controls (decorated with the RadDecorator) into a Placeholder control that is hooked up to the RadAjaxManager
    • The controls are also added to the RadInputManager so they can receive the benefit of the RadInput control style validations (the inputsettings/validations like a RegEx Setting are added successfully)
    • I have an event handler hooked up on the server side for when the value in the user control is changed by the user and that triggers every time causing an async postback (the page is where the event handler resides and the user control's throw the event)
    • When a control fails validation, the error css/warning triangle image and error message displays for a second but then the page starts posting back, the loading panel displays, and when it returns the validation error message/css, etc. are missing.
      • I have tried also adding the RadInputManager to the list of controls updated by the RadAjaxManager, however that results in errors related to ViewState (e.g. Failed to load viewstate. The control tree into which viewstate is being loaded must match the control tree that was used to save viewstate during the previous request. For example, when adding controls dynamically, the controls added during a post-back led to load viewstate)

        Is there a way to check if a control failed the RadInput inputsettings style validations and stop the async postback while still displaying the error message css/message (the client side methods in the documentation for RadInput will indeed stop the postback, but they keep the error message css/text, etc. from displaying), or to display the validation css/message etc. when the async postback comes back?  Basically I would like the user to be able to view that there is an error in their input (instead of seeing a flicker of an error) correct it, then have the regular events and actions tied to a change in their input fire after it passes through validation.  Note, I cannot use Asp.net validators in the app.


        Thanks for any help provided,
  2. Tsvetina
    Admin
    Tsvetina avatar
    1873 posts

    Posted 16 Dec 2010 Link to this post

    Hi,

    Have you tried handling the OnError client-side event of the respective input settings and cancel out the event which triggered the callback? If this does not work, would it be possible that you post the parts of your code related to the issue (including how the controls are situated in the page and the user controls), so we can try to replicate the issue locally and see what is causing it?

    All the best,
    Tsvetina
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. jgill
    jgill avatar
    116 posts
    Member since:
    Jul 2005

    Posted 16 Dec 2010 Link to this post

    Hello Tsvetina,
    This is actually what I tried.  When I try to handle the OnError, OnValidating, etc. I can cancel the event/postback however the error CSS styling (and message text that can be specified for a RadInput Regex Validation Setting) never appear when I do this which is one of the issues I'm facing.  Basically if there is an error/the control fails validation I want the error/warning CSS styling to display, the error message if it is a Regular Expression RadInput validation, and the postback not to occur...however I cannot seem to get all of this to occur at once.
  5. Tsvetina
    Admin
    Tsvetina avatar
    1873 posts

    Posted 16 Dec 2010 Link to this post

    Hi,

    For showing the invalid style for the input controls, you can try doing it in javascript by using the approach explained in this forum post.

    Best wishes,
    Tsvetina
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  6. jgill
    jgill avatar
    116 posts
    Member since:
    Jul 2005

    Posted 16 Dec 2010 Link to this post

    Thank you.  The controls on my page are added dynamically and are actually decorated textboxes for the most part, styled to look like RadTextboxes and with validations attached with the RadInputManager.

    When I change the value for a decorated textbox for instance, I am not able to get the true control value of the textbox.  The sender, sender.get_id(),  is coming back as ctl00_ContentPlaceholder1_InputManager_1 instead of the textbox control's client ID for instance.  I do not know which control will trigger the validation event ahead of time so I cannot "hardcode" a textbox, e.g. TextBox1.ClientId.

    This is the text code I'm working with:
    function OnClientValueChanged(sender, eventArgs)
    {
        alert("Client Value Changed: " + sender.get_id());
        //alert("Invalid value: " + eventArgs.get_newValue());
        var tb = $find("<%= InputManager.ClientID %>").get_targetInput(sender.get_id());  
        tb.get_owner()._inputs[tb._id]._invalid = true;  
        tb.updateCssClass(); 
        e.preventDefault(); 
        eventArgs.set_cancel(true);
    }
    function OnClientError(sender, eventArgs)
    {
        alert("Error: " + sender.get_id());
        //alert("Invalid value: " + eventArgs.get_newValue());
        eventArgs.set_cancel(true);
        var tb = $find("<%= InputManager.ClientID %>").get_targetInput(sender.get_id());  
        tb.get_owner()._inputs[tb._id]._invalid = true;  
        tb.updateCssClass();  
        //e.preventDefault();  
    }

    In the code-behind I am doing this since I cannot seem to hook into the OnValueChanged event since the control is not a true RadInput control, but a decorated control:
    Dim RegExSetting As RegExpTextBoxSetting = New RegExpTextBoxSetting
    RegExSetting.ValidationExpression = "Pattern obtained from database"
    RegExSetting.ErrorMessage = "Error message obtained from database"
      
    RegExSetting.TargetControls.Add(New TargetInput(dynamicControl.UniqueID, True))
    'Note how the OnValueChanged event is not available here
    RegExSetting.ClientEvents.OnError = "OnClientValueChanged"
    InputManager.InputSettings.Add(RegExSetting)
  7. jgill
    jgill avatar
    116 posts
    Member since:
    Jul 2005

    Posted 16 Dec 2010 Link to this post

    I have found that even if I change the type of control to a RadTextbox from a decorated default Textbox I still have an issue.

    1. When the user changes the value in the textbox and leaves the control the async post back starts
    2. The "OnError" event does not trigger in time (e.g. before the async postback), however the OnValueChangedEvent does
    3. I could not find a way to check if the value in the textbox is valid in the OnValueChangedEvent

    If I uncomment the //tb._invalid = true; line below then I can set the style to the invalid css styling...however I can never set it back and basically it just sets the "invalid" style each time the user changes the textbox value (since OnClientError is really getting called when OnValueChanged occurs) not just when it is an invalid value.

    function OnClientError(sender, eventArgs)
    {
        alert("Error: " + sender.get_id());
        var tb = $find(sender.get_id());  
        //tb._invalid = true;
        tb.updateCssClass();  
        eventArgs.set_cancel(true);
    }
      
    function restoreState(sender, args)  
    {  
        sender.get_id()._invalid = false;  
    }
  8. jgill
    jgill avatar
    116 posts
    Member since:
    Jul 2005

    Posted 16 Dec 2010 Link to this post

    This post has an image that describes the issue from the original post.
  9. Tsvetina
    Admin
    Tsvetina avatar
    1873 posts

    Posted 21 Dec 2010 Link to this post

    Hello,

    When using a RadTextBox, the approach to switch valid and invalid styles through code is explained in the other post by Dimo in the help article I linked to. And you can do regular expression validation through javascript.

    The thing here is that when AutoPostBack is set to true for a RadInput control or a RadInputManager target control, the focus falls on server-side validation. If properly set-up, the controls will return an error message on postback, for example this code:
      <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Button1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="TextBox1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadInputManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="TextBox1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="TextBox1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="TextBox1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default" MinDisplayTime="2000">
    </telerik:RadAjaxLoadingPanel>
    <div>
        <telerik:RadInputManager ID="RadInputManager1" runat="server">
            <telerik:RegExpTextBoxSetting ValidationExpression="^((0[1-9])|(1[0-2]))\/((2009)|(20[1-2][0-9]))$">
                <TargetControls>
                    <telerik:TargetInput ControlID="TextBox1" />
                </TargetControls>
            </telerik:RegExpTextBoxSetting>
        </telerik:RadInputManager>
        <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="true" CausesValidation="true"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="Button" />

    The other option is to set AutoPostBack to false and client-side validation for both RadInputManager and RadTextBox will go through as per your requirements without additional handling.

    Greetings,
    Tsvetina
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  10. jgill
    jgill avatar
    116 posts
    Member since:
    Jul 2005

    Posted 07 Mar 2011 Link to this post

    Hello Tsvetina,
    Sorry to bother you, however I am still having this issue.  Here is the scenario using 1 dynamic control.  Is there something I'm doing wrong in the order of operations as declaratively using your earlier example things are fine, but with dynamically added controls it does not seem to work for me?

    When the user enters an incorrect value, as soon as the the control looses focus they only see an error message for a bried moment, then the loading panel displays, then they see no feedback.

  11. Answer
    Tsvetina
    Admin
    Tsvetina avatar
    1873 posts

    Posted 10 Mar 2011 Link to this post

    Hello,

    There are no settings for the textbox to be updated by the other controls like there were for the declarative scenario. These would need to be added programmatically. I modified your code in the following way, try it and let us know how it goes:
    <telerik:RadAjaxManager ID="AjaxManager1" runat="server">  
        <AjaxSettings>  
                <telerik:AjaxSetting AjaxControlID="Area">  
                <UpdatedControls>  
                    <telerik:AjaxUpdatedControl ControlID="Area" LoadingPanelID="RadAjaxLoadingPanel1" />  
                    <telerik:AjaxUpdatedControl ControlID="RadInputManager1" /> 
                    <telerik:AjaxUpdatedControl ControlID="Button1" /> 
                </UpdatedControls>  
            </telerik:AjaxSetting>  
             
                <telerik:AjaxSetting AjaxControlID="RadInputManager1">  
                <UpdatedControls>  
                    <telerik:AjaxUpdatedControl ControlID="Area" LoadingPanelID="RadAjaxLoadingPanel1" />  
                </UpdatedControls>  
            </telerik:AjaxSetting
        </AjaxSettings>  
    </telerik:RadAjaxManager>  
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default" MinDisplayTime="2000">  
    </telerik:RadAjaxLoadingPanel>  
    <div>  
        
                   <asp:Panel ID="Area" runat="server"
                            <asp:PlaceHolder Runat="server" ID="DynamicControls"></asp:PlaceHolder
                        </asp:Panel>     
        
        <asp:Button ID="Button1" runat="server" Text="Button" /> 
        </div>

    Private txtBox As New TextBox()
    Private inputManager As New RadInputManager()
      
    Protected Sub Page_Init(sender As Object, e As EventArgs) Handles Me.Init
        Dim txt As TextBox = txtBox
      
        txt.ID = "TextBox1"
        txt.AutoPostBack = True
        txt.CausesValidation = True
        DynamicControls.Controls.Add(txt)
      
        Dim mngr As RadInputManager = inputManager
        mngr.ID = "RadInputManager1"
        Dim RegExPattern As String = "\d{2}/\d{4}"
        Dim RegExSetting As New RegExpTextBoxSetting()
      
        RegExSetting.ValidationExpression = RegExPattern
        RegExSetting.ErrorMessage = "Test error message"
      
        'RegExSetting.BehaviorID = Guid.NewGuid().ToString;
        RegExSetting.TargetControls.Add(New TargetInput(txt.ID, True))
        mngr.InputSettings.Add(RegExSetting)
        Page.Form.Controls.Add(mngr)
      
    End Sub
      
    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
      
        AjaxManager1.AjaxSettings.AddAjaxSetting(txtBox, txtBox, RadAjaxLoadingPanel1)
        AjaxManager1.AjaxSettings.AddAjaxSetting(Button1, txtBox, RadAjaxLoadingPanel1)
        AjaxManager1.AjaxSettings.AddAjaxSetting(inputManager, txtBox, RadAjaxLoadingPanel1)
      
    End Sub



    Regards,
    Tsvetina
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  12. jgill
    jgill avatar
    116 posts
    Member since:
    Jul 2005

    Posted 12 Mar 2011 Link to this post

    Hi Tsvetina,
    That worked!  However it introduced a new issue since RadAjax now wraps the controls in a div after adding the RadAjaxSetting correctly. 

    Adding a RadAjaxSetting programatially seems to wrap the control in a block div which causes an issue in situations where an image or icon was displayed next to the control previously, e.g. a help icon, since divs are rendered by default as block instead of in-line.  The rest of the site needs to still treat the divs as block.  Is there any way to get the added divs to add style="display: inline;" to all the items it tries to wrap.

    Before:
    <div id="ctl00_ContentPlaceHolder1_Area">
             
                            <input name="ctl00$ContentPlaceHolder1$TextBox1" type="text" onchange="javascript:setTimeout('WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$TextBox1", "", true, "", "", false, true))', 0)" onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;javascript:$radIE.keyPress(event);" id="ctl00_ContentPlaceHolder1_TextBox1" class="RadInputMgr_Office2007 RadInput_Enabled_Office2007" onmouseover="javascript:$radIE.mouseOver(event);" onmouseout="javascript:$radIE.mouseOut(event);" onblur="javascript:$radIE.blur(event);" onfocus="javascript:$radIE.focus(event);" />
                         
        </div>


    After:
        <div id="ctl00_ContentPlaceHolder1_Area">
             
      <div id="ctl00_ctl00_ContentPlaceHolder1_TextBox1Panel">
                <input name="ctl00$ContentPlaceHolder1$TextBox1" type="text" onchange="javascript:setTimeout('WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$TextBox1", "", true, "", "", false, true))', 0)" onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;javascript:$radIE.keyPress(event);" id="ctl00_ContentPlaceHolder1_TextBox1" class="RadInputMgr_Office2007 RadInput_Enabled_Office2007" onmouseover="javascript:$radIE.mouseOver(event);" onmouseout="javascript:$radIE.mouseOut(event);" onblur="javascript:$radIE.blur(event);" onfocus="javascript:$radIE.focus(event);" />
            </div>
    </div>


  13. Tsvetina
    Admin
    Tsvetina avatar
    1873 posts

    Posted 17 Mar 2011 Link to this post

    Hello,

    There is a property of RadAjaxManager that controls the display mode of the update panels, so you just need to set UpdatePanelsRenderMode="Inline" and this style will be applied only to the update panels rendered by the ajax manager.

    Kind regards,
    Tsvetina
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  14. Rohan
    Rohan avatar
    94 posts
    Member since:
    Jul 2012

    Posted 22 Oct 2012 Link to this post

    Hi all,

    I have simple requirement with rad grid and radajaxmanager . I am using Rad Grid Edit with User Control facility and i want validate control in user control , without adding the rad grid in radajaxmanager it works but after admin the rad grid to radajaxmanager my validation are not working ... please provide any solution or example .
  15. Tsvetina
    Admin
    Tsvetina avatar
    1873 posts

    Posted 22 Oct 2012 Link to this post

    Hi Rohan,

    You can see an example of validating RadGrid edit when the grid is ajaxified through RadAjaxManager here:
    http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/validation/defaultcs.aspx

    Apart from the user control, are there any other differences in the implementation. Can you post the user control declaration.

    Additionally, make sure that you run the site with script debugging enabled and that in such case there are no javascript errors coming up.

    Kind regards,
    Tsvetina
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017