RadAjaxManager, RadInputManager & asp:FormView

[Thomas]

Hi,

In my application I have some simple asp:formviews for changing some settings of a specific record. In this case the password.
The form has three buttons, one for the formviews canceling event, one for the formviews update event and one which do some other staff on the server-side.

The two password textboxes requires validation done by the RadInputManager.
The TextBoxSettings are appended in the formiews ItemCreated event.

When calling the page the first time all looks fine, validation works and skins are applied. After clicking the update or the cancel button the TextBoxSettings are not appended to the textboxes and there is no validation.
On the other hand, when I click on the third button all works fine.

Has anyone an idea what I'm doing wrong? Is there an Rad equal to asp:formview ? How are others editng forms? Please note the this is only a small example. I have a lot of more complex asp:formviews in my app

Here ist my code

<%@ Page Title="" Language="C#" MasterPageFile="~/portal/PartnerPersSettings.master" AutoEventWireup="true" CodeFile="PartnerAccess.aspx.cs" Inherits="www.sw_xperts.com.portal.PartnerAccess" %>
<asp:Content ID="Content1" ContentPlaceHolderID="cpPersSettingContent" runat="server">
<asp:HiddenField id="hfEditingPartnerId" runat="server" />
<telerik:RadFormDecorator ID="rfdDefault" runat="server"/>
        <telerik:RadAjaxManager ID="ramManager" runat="server" EnablePageHeadUpdate="False">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="fvZugangsdaten"  >
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="fvZugangsdaten" LoadingPanelID="ralpLoading" />
                        <telerik:AjaxUpdatedControl ControlID="rimAccess"/>
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel id="ralpLoading" runat="server"></telerik:RadAjaxLoadingPanel>
        <telerik:RadInputManager ID="rimAccess" runat="server">
            <telerik:TextBoxSetting BehaviorID="behTxtRequired" Validation-IsRequired="true">
            </telerik:TextBoxSetting>
        </telerik:RadInputManager>
    <asp:FormView CellPadding="0" CellSpacing="0" ID="fvZugangsdaten"
        DataKeyNames="cp_id" DefaultMode="Edit" runat="server"
        DataSourceID="odsZugangsdaten" onitemcreated="fvZugangsdaten_ItemCreated">
    <EditItemTemplate>
        <div class="editForm" >
            <div>
                <fieldset style="width:725px;">
                    <div class="fieldsetTopSpacer"></div>
                    <ul>
                        <li>
                            <asp:Label ID="lblZdUsername" runat="server">Benutzername</asp:Label>
                            <asp:HiddenField ID="hfZdUsername" runat="server" Value='<%# Bind("DBUSER") %>' />
                        </li>
                        <li class="inputBox">
                            <%# Eval("DBUSER") %>
                        </li>
                        <li style="width:50%;text-align:right;">
                            <asp:Button ID="btnZugangsdatenNeu" runat="server" Text="Benutzerkennung anlegen"
                                CommandName="ZugangsdatenNeu" CausesValidation="false"
                                onclick="btnZugangsdatenNeu_Click"/>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <asp:Label ID="lblZdPasswortNeu1" runat="server">Neues Passwort*</asp:Label>
                        </li>
                        <li>
                            <asp:TextBox ID="txtPasswort1" runat="server"  TextMode="Password" Text='<%# Bind("Passwort") %>'></asp:TextBox>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <asp:Label ID="lblZdPasswortNeu2" runat="server">Wiederholung*</asp:Label>
                        </li>
                        <li>
                            <asp:TextBox ID="txtPasswort2" runat="server"  TextMode="Password" ></asp:TextBox>
                        </li>
                        <li>
                            <asp:CompareValidator ID="comparePasswort" runat="server"
                                                        ControlToCompare="txtPasswort1" ControlToValidate="txtPasswort2" Display="Static"
                                                        ErrorMessage="Passwörter nicht gleich"></asp:CompareValidator>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <asp:Label ID="testOut" runat="server" ></asp:Label>
                        </li>
                    </ul>
                    <ul style="clear:both;">
                        <li style="width:100%; text-align:right; height:auto;clear:both;">
                            <asp:Button ID="btnUpdate" runat="server" Text="Speichern"
                            CommandName="Update" CausesValidation="true"/>
                            <asp:Button ID="btnCancel" runat="server" Text="Abbrechen"
                            CommandName="Cancel" CausesValidation="false"/>
                        </li>
                    </ul>
                </fieldset>
            </div>
        </div>
    </EditItemTemplate>
    </asp:FormView>
    <asp:ObjectDataSource ID="odsZugangsdaten" runat="server"
        SelectMethod="getZugangsdaten"  UpdateMethod="setZugangsdaten"  OldValuesParameterFormatString="original_{0}"
        TypeName="com.swxperts.corelib.bo.ModPersoenlicheDaten">
        <SelectParameters>
            <asp:SessionParameter Name="LoggedInProfilId" SessionField="LoggedInUser" Type="String" />
            <asp:ControlParameter ControlID="hfEditingPartnerId" DefaultValue=""
                Name="ProfilId" PropertyName="Value" Type="String" />
            <asp:SessionParameter Name="DbSession" SessionField="SessionTracker" Type="String" />
        </SelectParameters>
        <UpdateParameters>
            <asp:SessionParameter Name="LoggedInProfilId" SessionField="LoggedInUser" Type="String" />
            <asp:Parameter Name="Original_cp_id" Type="String" />
            <asp:SessionParameter Name="DbSession" SessionField="SessionTracker" Type="String" />
            <asp:Parameter Name="DBUser" Type="String" />
            <asp:Parameter Name="Passwort" Type="String" />
        </UpdateParameters>
    </asp:ObjectDataSource>


</asp:Content>

And code behind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;

namespace www.sw_xperts.com.portal {
    public partial class PartnerAccess : ExtendedPage {
        protected void Page_Load(object sender, EventArgs e) {
            if (!IsPostBack) {
                string EditingId = Request.QueryString.Get("ProfilId");
                hfEditingPartnerId.Value = string.IsNullOrEmpty(EditingId) ? Session["LoggedInUser"] as string : EditingId;
            }
            if (string.IsNullOrEmpty(hfEditingPartnerId.Value)) {
                Response.Redirect("~/Default.aspx");
            }
        }

        protected void fvZugangsdaten_ItemCreated(object sender, EventArgs e) {
            FormView fv = (FormView)sender;
            if (fv.CurrentMode == FormViewMode.Edit) {
                TextBox txtPasswort1 = fv.FindControl("txtPasswort1") as TextBox;
                TextBox txtPasswort2 = fv.FindControl("txtPasswort2") as TextBox;
                TextBoxSetting reqTextBoxSetting = (TextBoxSetting)rimAccess.GetSettingByBehaviorID("behTxtRequired");
                reqTextBoxSetting.TargetControls.Add(new TargetInput(txtPasswort1.UniqueID, true));
                reqTextBoxSetting.TargetControls.Add(new TargetInput(txtPasswort2.UniqueID, true));

            }
        }
        protected void btnZugangsdatenNeu_Click(object sender, EventArgs e) {
            Button a = sender as Button;
            Label l =  a.NamingContainer.FindControl("testOut") as Label;
            l.Text = "Clicked and done";
        }
}
}

[Tsvetina]

Hello Thomas,

I tried to replicate the issue described by you in a sample project using your code but did not manage to. Could you please take a look at the project and let me know if I am missing anything out?

Best wishes,
Tsvetina
the Telerik team

[Thomas]

Hello Tsvetina,

thanks for your answer.
Your appended project exactly shows the issue.

To replicate:

1.) Open the page the first time
    a.) Notice the styling of the textboxes
2.) click in the first text box
3.) click int the second textbox
4.) notice the behavior of the first textbox [red border and error icon inside]
5.) click "Abbrechen" [= cancel]
    a.) Notice the styling of the textboxes - its different from that in 1.) a.)
6.) repeat step 1 to 3
7.) notice the textbox behavior - its not the same as at step 4

Hopefully its clear what I mean.

Regards Thomas

[Veli]

Hello Thomas,

The RadInputManager documentation suggests that, when adding input settings programmatically, you need to first create and add the settings to the RadInputManager instance and then add the RadInputManager to the page. In your case, you cannot add a control to the page in the ItemCreated event handler of the FormView, but you can use the PreRender event of the page to add a RadInputManager dynamically:

protected void Page_PreRender(object sender, EventArgs e)
{
    if (fvZugangsdaten.CurrentMode == FormViewMode.Edit)
    {
        TextBox txtPasswort1 = fvZugangsdaten.FindControl("txtPasswort1") as TextBox;
        TextBox txtPasswort2 = fvZugangsdaten.FindControl("txtPasswort2") as TextBox;

        RadInputManager rim = new RadInputManager();
        rim.ID = "rimAccess";

        TextBoxSetting reqTextBoxSetting = new TextBoxSetting();
        reqTextBoxSetting.Validation.IsRequired = true;

        reqTextBoxSetting.TargetControls.Add(new TargetInput(txtPasswort1.UniqueID, true));
        reqTextBoxSetting.TargetControls.Add(new TargetInput(txtPasswort2.UniqueID, true));
        rim.InputSettings.Add(reqTextBoxSetting);

        Page.Form.Controls.Add(rim);

    }
}

Attaching the modified WebForms page.

Greetings,
Veli
the Telerik team

[Thomas]

Hello Veli,

thanks for your answer.

With your suggestion to add the code in the Page_PreRender event all works fine.

What I basicly miss, is a simple handling for the RadInputManager in combination with FormView.
We have a lot of FormViews in our application, and to get a integrated Look & Feel I have to write a lot of code.

Are there any plans from telerik to handle this easier in the future ?

Kind regards

Thomas

[Veli]

Hello Thomas,

I have notified our dev team of your feedback. It is surely appreciated. We are constantly trying to simplify and optimize the usage of our products based on user feedback, so your opinion will be taken into consideration for the future.

Veli
the Telerik team

[Roman]

Thanks for your answer.

Maybe you can take a look on my supportticket Support ID:353543 [Opened in the name of my customer].
It also figures some problems with formview and inputmanager.
Maybe you have some ideas.

Kind regars

Thomas

[Chen]

Veli,

I tried your suggestion, but it does not "REALLY" work.

In your example it so happens that the name of the TextBox control in the EditTemplate is the same as the Label in the ItemTemplate.
If the names of the controls are different, RadInputManager would not work with the FormView.
If the FindControl looks for the name of the textbox control, it cannot find it until after DataBound, which as far as I understand is too late to add a RadInputManager.

Long story short - do you have a suggestion re how to use RadInputManager with FormView after Databound?

What I really want is to have a RIM and apply it to all the textboxes on the page (including those inside FormViews).
My thought was to scan through all the controls on the page, find the text boxes and add them to the RIM.
However since the textboxes "appear" after DataBound, I am not sure what to do.

Any advice?

[Veli]

Hi Chen,

I do not really understand what you mean by "the name of the TextBox control in the EditTemplate is the same as the Label in the ItemTemplate." I do not see controls with duplicate IDs in any of the same code snippets provided. Can you clarify? As suggested in a previous post of mine dated 10/08/2010, you can add RadInputManager dynamically in the PreRender phase of the page where controls in the EditItemTemplate of the FormView are definitely initialized if the FormView is databound properly.

Veli
the Telerik team

[Chen]

My bad. You are correct. It was something in the way I tested.

I am still left with the following problem.
I have a fairly complex form and I want to apply RIM to all text boxes in the form.

What I want to do is to iterate all controls, and add the textboxes to the RIM.
However, the TextBoxes (in the FormView EditMode) are not available in the Page_PreRender, just in the FormView PreRender.
If I try to add the controls to RIM during the FormView PreRender I get:
"The control collection cannot be modified during DataBind, Init, Load, PreRender or Unload phases."

Any suggestion how to add controls to the RIM by iterating controls on the page?

[Veli]

Hello Chen,

The Page_PreRender is fired on the page before the respective PreRender events of the controls inside. Any controls initialized in databound containers (like the FormView) should be available in the PreRender events of both the page or the FormView. Can you identify why your textboxes inside the FormView are not available in Page_PreRender?

Veli
the Telerik team

[Chen]

When I check the FormView.Controls collection during the Page_PreRender, in EditMode the controls are still the controls from the ItemTemplate (labels, etc.).
When I check the same control collection in the FormView_PreRender the controls are the text boxes.

I think that in the Page_PreRender the FormView did not start to change its mode, thus the EditTemplate controls are not there yet.

[Veli]

Yes, I would believe so. You can check that by attaching to the DataBound event of the FormView. If the DataBound event is fired between Page_PreRender and FormView_PreRender events, then the FormView databinds in its own PreRender phase. To work around - you can explicitly databind it in Page_PreRender and then search for the controls in the edit item template.

Veli
the Telerik team

[Chen]

You are officially "The Man!"

In Page_PreRender I check for FormViews in EditMode and call their DataBind.
I then do what you recommend above and presto! it works.

Thanks.

My 2 cents: I think that RadInputManager is an excellent tool and the scenario of using it on all page controls is reasonable. I suggest to add it as a feature to the control or as a scenario in the documentation.

[Chen]

Something else is not working now.

I have a page, that hosts a user control.
In Page_PreRender I DataBind the user control and find a bunch of textboxes on the page (recusrively going over the controls in page.Form.Controls).
I add them to RadInputManager as you described above.

The appearance of the control changes to that of a RIM control, but the behavior does not.
The RegExSettings specified for the controls are not applied.

Any idea?

[Veli]

If the styles RadInputManager sets are properly applied, then the server settings are configured OK and RIM has initialized. The issue may be on the client-side. Are you getting any javascript errors?

Veli
the Telerik team

[Chen]

I do (on IE only).
I sent (in a ticket:  406090) my web.config. Can you have a look if it's anything there?
I read posts suggesting various changes in web.config. I am now not sure what needs to be there and what not.

The error IE reports (FF and Chrome do not) is:

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; InfoPath.3)
Timestamp: Tue, 22 Mar 2011 13:24:36 UTC

Message: Sys.InvalidOperationException: Handler was not added through the Sys.UI.DomEvent.addHandler method.
Line: 4155
Char: 48
Code: 0
URI: http://localhost:54414/ScriptResource.axd?d=bNHxpMQ95e_3fQ-H3zQlgUG8USOJgXDEaKPlVJtzXOzSBXgOH2I0fLP3c6MkKKE6gpgXTKAt2F1c1SRyaA1ZJ3qGq4Q7e5IjV-7MVyK3bWbxu7xbXMRiCYZclNyfgK6QPbAfmMZ-Zi4SFRWpSG1tcQ70ld6aH-W0HDwELvp3Mvn1Rk-zO-F4XJbQPJwrO6nX0&t=2610f696

I'll upload web.config 

[Chen]

OK. Everything works now (well, after minimal testing...).
Conclusions:

1. When using RadInputManager with a UserControl, use Page_PreRender in the UserControl and add the RadInputManager to "this.Controls", not to Page.Form.Controls.
   

   this.Controls.Add(rim);

2. I tried finding all TextBox controls in the PreRender of the page (rather than that of the UserControl). That does not work. At least I could not make it work.
   I got the appearance of a RadInputManager control (styles) but no functionality.

I hope it helps someone.

Thank you Veli. You were instrumental and very responsive.