ValidationSummary in dynamically loaded user control

[Fred]

 Hi, i have a page that loads user controls, like in this demo: http://demos.telerik.com/aspnet-ajax/ajax/examples/common/loadingusercontrols/defaultcs.aspx . The User control have a form (RadListView with EditTemplate) with validator controls and a ValidatorSummary control.
  The problem is, the ValidatorSummary only works with ShowSummary="True" and i need to have ShowMessageBox="True". Is it the expected behavior ? How can i get it to work?

Thanks in advance.

[Fred]

any tips on this ?

[Tsvetina]

Hi Fred,

The validation summary should not behave differently when loaded in a user control. Have you tried the same scenario directly in an aspx page with AJAX turned on and off? Also, can you provide us with code that we can use to replicate the problem locally?

Regards,
Tsvetina
the Telerik team

[Fred]

Hi, this is the code in the user control:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Control3.ascx.cs" Inherits="RadControlsWebTeste.Control3" %>
<h2>Control 3</h2>

 <script language="javascript" type="text/javascript">
     function valida(src, args) {

         args.IsValid = false;
     }
    </script>

 <telerik:RadListView ID="RadListView1" runat="server"
ItemPlaceholderID="ItemPlaceHolder"
    onneeddatasource="RadListView1_NeedDataSource" >

   <ValidationSettings EnableValidation="true" ValidationGroup="g1" />
 <LayoutTemplate>

            <asp:Panel runat="server" id="itemPlaceholder" Width="100%"  >


            </asp:Panel>


 </LayoutTemplate>

  <ItemTemplate>
      <asp:Panel ID="Panel1" runat="server" >

      ID: <asp:Label ID="lbNome"  runat="server" Text=' <%# Eval("Id")%>'></asp:Label><br />
      Description: <asp:Label ID="Label1"  runat="server" Text=' <%# Eval("Id")%>'></asp:Label><br />
       <asp:LinkButton ID="lkBt1" runat="server" CommandName="Edit" Text="Editar"></asp:LinkButton><br /><br />
      </asp:Panel>

  </ItemTemplate>

 <EditItemTemplate>

 <asp:Panel ID="Panel1" runat="server">


       <asp:TextBox ID="txtId"  runat="server" Text='<%# Bind("Id") %>'
                        Columns="16" MaxLength="15"></asp:TextBox>

        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="txtId"  ValidationGroup="g1"
runat="server" ErrorMessage="RequiredFieldValidator" Display="None"></asp:RequiredFieldValidator>

 <asp:CustomValidator ID="CustomValidator1" runat="server"
                     ClientValidationFunction="valida"  ValidateEmptyText="true"  ValidationGroup="g1" ControlToValidate="txtId" ErrorMessage="CustomValidator"></asp:CustomValidator>


     <asp:TextBox ID="txtDesc"  runat="server" Text='<%# Bind("Description") %>'
                        Columns="16" MaxLength="15"></asp:TextBox>

    <asp:LinkButton ID="lkBt1" runat="server" CommandName="Update" Text="Salvar" ValidationGroup="g1"></asp:LinkButton><br /><br />
    </asp:Panel>


   <asp:ValidationSummary ID="ValidationSummary1" runat="server" ShowMessageBox="true" ShowSummary="true" ValidationGroup="g1"/>


    </EditItemTemplate>

</telerik:RadListView>

The exact same code on a simple WebPage (.aspx) works, but on the user control (again, loaded dynamically) don't. Also, we found that CustomValidators don't work in this situation too.

[Andrey]

Hi,

Could you show us how you are loading dynamically the user control? Other than that you code looks pretty much OK.

Kind regards,
Andrey
the Telerik team

[Fred]

This is the .aspx. 

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Panel1"  LoadingPanelID="RadAjaxLoadingPanel1"/>
                        <telerik:AjaxUpdatedControl ControlID="RadMenu1"  />
                    </UpdatedControls>
                </telerik:AjaxSetting>

                <telerik:AjaxSetting AjaxControlID="RadMenu1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Panel1"  LoadingPanelID="RadAjaxLoadingPanel1"/>
                    </UpdatedControls>
                </telerik:AjaxSetting>

            </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadMenu ID="RadMenu1" Runat="server" Flow="Vertical"
        style="top: 10px; left: 0px" onitemclick="RadMenu1_ItemClick">
        <Items>
            <telerik:RadMenuItem runat="server" Text="Control2" Value="Control2" Selected="true">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem runat="server" Text="Control3" Value="Control3">
            </telerik:RadMenuItem>

        </Items>

    </telerik:RadMenu>

<Asp:Panel ID="Panel1" runat="server" Width="800px" style="float:left; margin:5px;min-height:300px; display:inline-block;">




</Asp:Panel>



</asp:Content>

and below is th code behind. It's pretty much like the demo in http://demos.telerik.com/aspnet-ajax/ajax/examples/common/loadingusercontrols/defaultcs.aspx with little modifications.

public partial class WebForm1 : System.Web.UI.Page
   {
       private string LatestLoadedControlName
       {
           get
           {
               string ret = "Control2.ascx";
               if (ViewState["USRCTRCADASTROLTST"] != null)
                   ret = ViewState["USRCTRCADASTROLTST"].ToString();

               return ret;
           }
           set
           {
               ViewState["USRCTRCADASTROLTST"] = value;
           }
       }

       private string NewControlName
       {
           get
           {
               string ret = "";
               if (ViewState["USRCTRCADASTRO"] != null)
                   ret = ViewState["USRCTRCADASTRO"].ToString();

               return ret;
           }
           set
           {
               ViewState["USRCTRCADASTRO"] = value;
           }
       }

       private string LatestMenuItem
       {
           get
           {
               string ret = RadMenu1.Items[0].Text;
               if (ViewState["USRCTRCADASTROMENU"] != null)
                   ret = ViewState["USRCTRCADASTROMENU"].ToString();

               return ret;
           }
           set
           {
               ViewState["USRCTRCADASTROMENU"] = value;
           }
       }

       private string NewMenuItem
       {
           get
           {
               string ret = "";
               if (ViewState["USRCTRCADASTROMENUNEW"] != null)
                   ret = ViewState["USRCTRCADASTROMENUNEW"].ToString();

               return ret;
           }
           set
           {
               ViewState["USRCTRCADASTROMENUNEW"] = value;
           }
       }

       protected void Page_Load(object sender, EventArgs e)
       {
           RadAjaxManager manager = RadAjaxManager.GetCurrent(this.Page);
           manager.AjaxRequest += ManagerAjaxRequest;


           if (!IsPostBack)
           {
               LoadUserControl("Control2.ascx", false);
               LatestMenuItem = RadMenu1.Items[0].Text;
           }
           else
           {
               LoadUserControl(LatestLoadedControlName, false);
           }


       }

       protected void ManagerAjaxRequest(object sender, AjaxRequestEventArgs e)
       {
           if (e.Argument == "tab")
               return;

           Session["ISEDITING"] = false;
           LoadUserControl(NewControlName, true);
           RadMenu1.ClearSelectedItem();
           RadMenu1.Items.FindItemByText(NewMenuItem).Selected = true;
       }

       public bool LoadUserControl(string controlName, bool confirm)
       {
           if (LatestLoadedControlName != null)
           {
               Control previousControl = Panel1.FindControl(LatestLoadedControlName.Split('.')[0]);

               if (!Object.Equals(previousControl, null))
               {

                   this.Panel1.Controls.Remove(previousControl);
               }
           }

           string userControlID = controlName.Split('.')[0];
           Control targetControl = Panel1.FindControl(userControlID);
           if (Object.Equals(targetControl, null))
           {
               UserControl userControl = (UserControl)this.LoadControl(controlName);



               //slashes and tildes are forbidden
               userControl.ID = userControlID.Replace("/", "").Replace("~", "");
               this.Panel1.Controls.Add(userControl);
               LatestLoadedControlName = controlName;
           }

           return true;
       }

       protected void RadMenu1_ItemClick(object sender, Telerik.Web.UI.RadMenuEventArgs e)
       {
           NewControlName = string.Format("{0}.ascx", e.Item.Value);
           NewMenuItem = e.Item.Text;



           bool ret = false;
           if (Session["ISEDITING"] != null)
               ret = Boolean.Parse(Session["ISEDITING"].ToString());

           if (ret)
           {
               RadAjaxManager manager = RadAjaxManager.GetCurrent(this.Page);
               manager.ResponseScripts.Add("if(confirm('Clique em ok para sair sem gravar as alterações.'))" + manager.ClientID + ".ajaxRequest('')");

               RadMenu1.ClearSelectedItem();
               RadMenu1.Items.FindItemByText(LatestMenuItem).Selected = true;


           }
           else
           {
               LoadUserControl(NewControlName, false);
               LatestMenuItem = e.Item.Text;

           }

       }
   }

[Andrey]

Hi,

Your code seems OK. Most probably the problem comes from the fact that the Validation summary control is not updated with the Ajax call.

Try to wrap the ValidationSummary control into an asp panel and add this panel as an updated control in RadAjaxManager. Then check whether the issue still replicates. More information about this approach could be found in this help topic.

If needed you could place RadAjaxManagerProxy control in the user control if the ValidationSummary control is located there. Thus you could easily add the updated control to RadAjaxManager settings.


Kind regards,
Andrey
the Telerik team

[Fred]

Yes, already tried this approach without success. Bear in mind, the controls to be validated are on the <EditItemTemplate> from RadListView, and the ValidatorSummary works (it's using javascript too, i supose), only not with the ShowMessageBox parameter. Also, the CustomValidator cannot live outside the template. or i'll get an error saying the control to be validated does not exist.

[Andrey]

Hi,

I am afraid that further assistance without a runnable project that we could test/debug won't be an easy and quick task.

So, could you strip sample project that replicates the issue and upload it on some online storage.

Thus I will be able to test/debug the project and will let you know how to fix or why you are not able to fix the issue.


Greetings,
Andrey
the Telerik team

[Fred]

Here: http://dl.dropbox.com/u/9597858/RadControlsWebTeste.rar

[Andrey]

Hello,

Thank you for sending me a runnable version of your code.

I tired to replicate the issue you are facing, but the validation summary shows on my side as expected event if the ShowSummary property is set to False.

You could check this video file for an overview of how things are looking on my side.

Greetings,
Andrey
the Telerik team

[Fred]

Sorry, i'm afraid the start page in the project was wrong, you need to see the "WebForm1.aspx" (click in "control 3" option), this is the correct one. The webform2 was just to show the differences between a normal aspx page and a page that loads user controls.

Thanks.

[Andrey]

Hello,

I was able to replicate the issue.

In order to resolve the issue you should add one additional setting to your RadAjaxManager settings section:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Panel1"  LoadingPanelID="RadAjaxLoadingPanel1"/>
                        <telerik:AjaxUpdatedControl ControlID="RadMenu1"  />
                    </UpdatedControls>
                </telerik:AjaxSetting>

                <telerik:AjaxSetting AjaxControlID="RadMenu1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Panel1"  LoadingPanelID="RadAjaxLoadingPanel1"/>
                        <telerik:AjaxUpdatedControl ControlID="RadMenu1"  LoadingPanelID="RadAjaxLoadingPanel1"/>
                    </UpdatedControls>
                </telerik:AjaxSetting>

                <telerik:AjaxSetting AjaxControlID="Panel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadMenu1"  LoadingPanelID="RadAjaxLoadingPanel1"/>
                    </UpdatedControls>
                </telerik:AjaxSetting>

            </AjaxSettings>
    </telerik:RadAjaxManager>

I have modified the project to reflect these changes.

Regards,
Andrey
the Telerik team