RadDock inside FormView EditItemTemplate

[Phil H.]

Hi:

I have placed RadDockZone and RadDoc inside of FormView EditItemTemplate.  The FormView's ItemUpdating event cannot seem to find the Bind values in the form.  If I remove the RadDockZone and RadDoc, it works as expected.

Phil

[Ianko]

Hello Phil,

 

I am not sure what exactly is the scenario that you have on your end. I tested a simple XML binding scenario with RadDock in the EditItemTemplate, but the fields from that source are properly propagated to the RadDock.

 

Here you are code samples of the test case:

 

<asp:FormView runat="server" ID="FormView1"
    DataSourceID="PeopleDataSource"
    AllowPaging="true"
    DataMember="Person">

    <ItemTemplate>
        <div><%# XPath ("Name/FirstName") %></div>
        <div><%# XPath ("Name/LastName") %></div>
        <asp:LinkButton ID="Edit"
            Text="Edit"
            CommandName="Edit"
            runat="server" />
    </ItemTemplate>
    <EditItemTemplate>
        <telerik:RadDockZone runat="server">
            <telerik:RadDock runat="server">
                <ContentTemplate>
                    <asp:TextBox ID="FirstNameUpdateTextBox"
                        Text='<%# XPath ("Name/FirstName") %>'
                        runat="server" />
                    <asp:TextBox ID="LastNameUpdateTextBox"
                        Text='<%# XPath ("Name/LastName") %>'
                        runat="server" />
                    <asp:LinkButton ID="Update"
                        Text="Update"
                        CommandName="Update"
                        runat="server" />
                </ContentTemplate>

            </telerik:RadDock>
        </telerik:RadDockZone>
    </EditItemTemplate>
</asp:FormView>

<asp:XmlDataSource
    ID="PeopleDataSource"
    runat="server"
    DataFile="~/App_Data/people.xml" />

 

You can refer to this page for the XML: https://msdn.microsoft.com/en-us/library/494y92bs.aspx.  

 

Regards,
Ianko
Telerik by Progress

[Phil H.]

Hi Lanko:

Try changing your form to include a Updating form event:

<asp:FormView runat="server" ID="FormView1"
    DataSourceID="PeopleDataSource"
    AllowPaging="true"
    DataMember="Person" OnItemUpdated="FormView1_ItemUpdated">
...

Then add the following:

protected void FormView1_ItemUpdated(object sender, FormViewUpdatedEventArgs e)
{
    StringBuilder _msg = new StringBuilder("[smd: ");
    foreach (DictionaryEntry _entry in e.NewValues)
    {
        _msg.AppendFormat("{0}={1}, ", _entry.Key,
            (_entry.Value != null ? _entry.Value.ToString() : ""));
    }
    int _i = 0;
}

Set a break point on _i   I find that the dictionary is empty.  And the form yellow screens with the following:

Specified method is not supported.
  Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

 Exception Details: System.NotSupportedException: Specified method is not supported.

Source Error:


 An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

Stack Trace:



[NotSupportedException: Specified method is not supported.]
   System.Web.UI.DataSourceView.ExecuteUpdate(IDictionary keys, IDictionary values, IDictionary oldValues) +29
   System.Web.UI.DataSourceView.Update(IDictionary keys, IDictionary values, IDictionary oldValues, DataSourceViewOperationCallback callback) +87
   System.Web.UI.WebControls.FormView.HandleUpdate(String commandArg, Boolean causesValidation) +1136
   System.Web.UI.WebControls.FormView.HandleEvent(EventArgs e, Boolean causesValidation, String validationGroup) +425
   System.Web.UI.WebControls.FormView.OnBubbleEvent(Object source, EventArgs e) +89
   System.Web.UI.Control.RaiseBubbleEvent(Object source, EventArgs args) +37
   System.Web.UI.WebControls.FormViewRow.OnBubbleEvent(Object source, EventArgs e) +80
   System.Web.UI.Control.RaiseBubbleEvent(Object source, EventArgs args) +37
   System.Web.UI.WebControls.LinkButton.OnCommand(CommandEventArgs e) +121
   System.Web.UI.WebControls.LinkButton.RaisePostBackEvent(String eventArgument) +156
   System.Web.UI.WebControls.LinkButton.System.Web.UI.IPostBackEventHandler.RaisePostBackEvent(String eventArgument) +10
   System.Web.UI.Page.RaisePostBackEvent(IPostBackEventHandler sourceControl, String eventArgument) +13
   System.Web.UI.Page.RaisePostBackEvent(NameValueCollection postData) +9665034
   System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +1724

 

Phil

[Ianko]

Hello Phil H.,

The same happens without the RadDock. Therefore, I am not exactly sure how this is relevant to the RadDock nested in the FormView. Also, the same exception is thrown without the RadDock.

Regards,
Ianko
Telerik by Progress

[Phil H.]

Hi Lanko:

That is because your sample code does not have a Bind in the view.  I missed that initially.

Phil

[Phil H.]

Hi Lanko:

I created a simple people class and an access class:

//
public class People
{
   public string FirstName { set; get; }
   public string LastName { set; get; }
   public string Street { set; get; }
   public string City { set; get; }
   public string Region { set; get; }
   public string ZipCode { set; get; }
   public string Title { set; get; }
   public string Description { set; get; }
}
public class PeopleAccess
{
    public List<People> GetData()
    {
        return new List<People>(){
            new People {
                FirstName = "Manoj",
                LastName = "Syamala",
                Street = "345 Maple St.",
                City = "Redmond",
                Region = "WA",
                ZipCode = "01434",
                Title = "CEO",
                Description = "Develops company strategies."
            },
            new People {
                FirstName = "Jared",
                LastName = "Stivers",
                Street = "123 Elm St.",
                City = "Seattle",
                Region = "WA",
                ZipCode = "11223",
                Title = "Attorney",
                Description = "Reviews legal issues."
            }
        };
    }
}

Then I change the UI to not use xml:

<asp:FormView runat="server" ID="FormView1"
    DataSourceID="PeopleDataSource"
    AllowPaging="true"
    OnItemUpdated="FormView1_ItemUpdated">
    <ItemTemplate>
        <div><%# Eval( "FirstName") %></div>
        <div><%# Eval( "LastName") %></div>
        <asp:LinkButton ID="Edit"
            Text="Edit"
            CommandName="Edit"
            runat="server" />
    </ItemTemplate>
    <EditItemTemplate>
        <telerik:RadDockZone ID="RadDockZone1" runat="server">
            <telerik:RadDock ID="RadDock1" runat="server">
                <ContentTemplate>
                    <asp:TextBox ID="TextBox1"
                        Text='<%# Bind( "FirstName") %>'
                        runat="server" />
                    <asp:TextBox ID="TextBox2"
                        Text='<%# Bind( "LastName") %>'
                        runat="server" />
                    <asp:LinkButton ID="Update"
                        Text="Update"
                        CommandName="Update"
                        runat="server" />
                </ContentTemplate>
            </telerik:RadDock>
        </telerik:RadDockZone>
    </EditItemTemplate>
</asp:FormView>
<asp:ObjectDataSource ID="PeopleDataSource" runat="server"
    TypeName="MMPA.MILC.WebUI.PeopleAccess"
    DataObjectTypeName="MMPA.MILC.WebUI.People"
    SelectMethod="GetData"
    >
</asp:ObjectDataSource>

You will have to adjust the class names in the ObjectDataSource...

Now it fails to load the e.NewValues when the RadDock is used and load e.NewValues w/o the RadDock.

Phil

[Ianko]

Hello Phil H.,

I am not sure whether you hit yet another exception, but in this scenario here you should add additionally the UpdateMehtod of the ObjectDataSource control. 

Further, RadDock's template will not be able to send the bound values to the server as the ASP template mechanism changes the name attribute of the form fields.

You can fix that by having hidden inputs in the FormVie, which are programmatically updated when the textbox fields in the RadDock are changed. 

Here you are a code example of this case:

<asp:FormView runat="server" ID="FormView1"
    DataSourceID="PeopleDataSource"
    AllowPaging="true"
    OnItemUpdated="FormView1_ItemUpdated">
    <ItemTemplate>
        <div><%# Eval( "FirstName") %></div>
        <div><%# Eval( "LastName") %></div>
        <asp:LinkButton ID="Edit"
            Text="Edit"
            CommandName="Edit"
            runat="server" />
    </ItemTemplate>
    <EditItemTemplate>
        <asp:HiddenField ID="hiddenFirstName" runat="server" Value='<%# Bind( "FirstName") %>' ClientIDMode="Static"  />
        <asp:HiddenField ID="hiddenLastName" runat="server" Value='<%# Bind( "LastName") %>' ClientIDMode="Static" />

        <telerik:RadDockZone ID="RadDockZone1" runat="server" >
            <telerik:RadDock ID="RadDock1" runat="server" OnClientLoad="OnClientLoad" >
                <ContentTemplate>
                    <asp:TextBox ID="TextBoxFirstName"
                        Text='<%# Bind( "FirstName") %>'
                        runat="server" CssClass="TextBoxFirstName" />
                    <asp:TextBox ID="TextBoxLastName"
                        Text='<%# Bind( "LastName") %>'
                        runat="server" CssClass="TextBoxLastName"  />
                    <asp:LinkButton ID="LinkButton1"
                        Text="Update"
                        CommandName="Update"
                        runat="server"  />
                </ContentTemplate>
            </telerik:RadDock>
        </telerik:RadDockZone>
    </EditItemTemplate>
</asp:FormView>

<script>
    function OnClientLoad() {
        var $ = $telerik.$;

        var TextBoxFirstName = $(".TextBoxFirstName"),
            TextBoxLastName = $(".TextBoxLastName"),
            HiddenFirstName = $("#hiddenFirstName"),
            HiddenLastName = $("#hiddenLastName");

        TextBoxFirstName.change(function (ev) {
            HiddenFirstName.val($(TextBoxFirstName).val());
        })

        TextBoxLastName.change(function (ev) {
            HiddenLastName.val($(TextBoxLastName).val());
        })

    }
</script>

<asp:ObjectDataSource ID="PeopleDataSource" runat="server"
    TypeName="WebUISite.PeopleAccess"
    DataObjectTypeName="WebUISite.People"
    SelectMethod="GetData" UpdateMethod="UpdateData"></asp:ObjectDataSource>

Regards,
Ianko
Telerik by Progress

[Phil H.]

Hi Lanko:

The bound items need to go from the form updating event to the data source updating event, but the form updating event could not find the controls/values.  I already know about needing the data source event.

So your work-around is binding to hidden fields.  Not good in my opinion.

Phil

[Ianko]

Hello Phil H.,

I agree with you on this, however, it is how templates in ASP.NET Web Forms work. Putting a form field in a template will update the name attribute of this field with additional values (the ID of the parent control). This is the native way for Web Forms to handle ViewState.

Therefore, having a template that nests an additional template, where the update source comes from will not update the state of the bound datasource to the original control. This is because the ViewState cannot handle this situation. Thus, workarounds such as the proposed one are needed for such complex cases when nesting templates.

Regards,
Ianko
Telerik by Progress