dataform single edit/insert template

[laura]

Is it possible to use a userControl for the edit and insert item templates and take advantage of automatic update/inserts.   In my (limited) testing, I can get the edit template to populate, it just can't find the fields when updating.  

Alternatively, is it possible to use either the edit or insert itemTemplate for both insert and update functions?   

My edit and insert templates are identical, I'd like to only have to maintain it in one place.  

 

 

 

 

[Vessy]

Hi Laura,

If you use the Bind() expression when updating the values from your edit/Insert templates you should be able to use the built-in operations of the DataForm without a problem:
https://docs.microsoft.com/en-us/previous-versions/aspnet/ms178366(v=vs.100)

Unfortunately, using the same template for both the Insert and Edit template of the control is not supported at the moment and the templates must be defined separately:

<telerik:RadDataForm runat="server" ID="RadDataForm1" OnNeedDataSource="radDataForm_NeedDataSource">
    ...
    <EditItemTemplate>
        <uc1:WebUserControl1 runat="server" ID="WebUserControl1" />
    </EditItemTemplate>
    <InsertItemTemplate>
        <uc1:WebUserControl1 runat="server" ID="WebUserControl1" />
    </InsertItemTemplate>
</telerik:RadDataForm>

Regards,
Vessy
Progress Telerik

[laura]

Is there a working demo of this somewhere?    I've tried what you have above, with the exception that I'm using a DataSourceID.  

It appears that null values are getting sent on the insert/update.   

I can copy/paste or use the exact same code as an html include, and it works, so I'm reasonably certain my (user control) code is correct.   

[Attila Antal]

Hi Laura,

I am afraid we have not created an online demo for this specific scenario, but I will show you an example that you can try to make this work. The configuration is easy to understand and does not require much of coding. To achieve this, I am following the same approach demonstrated in the Scheduler - Customizing Advanced Insert and Edit Forms demo.

When using WebUserControls, in addition to the bind() assigned to the controls, within the WebUserControl, create public properties for every field you would like to update.

For example, assuming the following is our user control (WebUserControl1.ascx):

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl1.ascx.cs" Inherits="WebUserControl1" %>
<asp:TextBox ID="ShipNameText" runat="server" Text='<%# Bind("ShipName") %>'></asp:TextBox>
<asp:TextBox ID="ShipCountryText" runat="server" Text='<%# Bind("ShipCountry") %>'></asp:TextBox>

In the code behind, create properties for both fields, ShipName and ShipCountry and configure them to support binding in two directions.

[Bindable(BindableSupport.Yes, BindingDirection.TwoWay)]
 public string ShipName
 {
     get
     {

         return ShipNameText.Text;
     }

     set
     {
         ShipNameText.Text = value;
     }
 }

 [Bindable(BindableSupport.Yes, BindingDirection.TwoWay)]
 public string ShipCountry
 {
     get
     {

         return ShipCountryText.Text;
     }

     set
     {
         ShipCountryText.Text = value;
     }
 }

Once the properties are all set, the User Control inserted in the EditItemTemplate of the DataForm will not only contain the tags and the ID, but will also call the bind() method for both fields like the example below:

<EditItemTemplate>
    <uc1:WebUserControl1 runat="server" ID="WebUserControl1" ShipCountry='<%# Bind("ShipCountry") %>' ShipName='<%# Bind("ShipName") %>' />
</EditItemTemplate>

That is it, the binding part of the controls is done. As next, configure the Buttons. Since the same WebUserControl is being used for both editing and inserting, you can use one button that fires different command depending on whether the RadDataForm is inserting a new item or is editing and existing one. 

For this purpose, I have added couple of properties in the CodeBehind of the WebUserControl.

protected RadDataFormEditableItem EditItem
{
    get
    {
        return (this.NamingContainer as RadDataFormEditableItem);
    }
}
// Get a reference to the owner DataForm of the current Item
protected RadDataForm Owner
{
    get
    {
        return EditItem.OwnerDataForm;
    }
}

// property that returns a boolean from checking whether the item is in Edit mode and also checks whether it is an insert or edit item.
protected bool IsInserting
{
    get
    {
        return (EditItem.IsInEditMode && Owner.IsItemInserted);
    }
}

You can now add two buttons to the WebUserControl. One of the buttons will be the Cancel button, this requires no special configuration. CommandName cancel and text cancel. The other button, however, can be used either in the Edit or in the Insert template. To configure the CommandName, Text and Tooltip accord whether the form is editing or inserting, you can now apply server-block codes in the markup:

<telerik:RadButton RenderMode="Lightweight" ID="UpdateButton" runat="server" ButtonType="SkinnedButton" CommandName='<%# IsInserting ? "PerformInsert" : "Update" %>' Text='<%# IsInserting ? "Insert Record" : "Update Edited" %>' ToolTip='<%# IsInserting ? "Insert New" : "Update Edited" %>' />
<telerik:RadButton RenderMode="Lightweight" ID="CancelButton" runat="server" ButtonType="SkinnedButton" CausesValidation="False" CommandName="Cancel" Text="Cancel" ToolTip="Cancel" />

You can check out the final code in the attached sample.

I hope this will help implement the described scenario.

Kind regards,
Attila Antal
Progress Telerik