New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Layouts

Our customers

Insert new customer
CustomerID  
 



Edit customer
CustomerID

 




This demo demonstrates how to define custom templates in RadDataForm and how to show Insert and Edit template at the same time.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.DataFormExamples.Functionality.Layouts.DefaultCS"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container">
        <h3 class="rdfHeader">Our customers
        </h3>
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
            <telerik:RadDataForm RenderMode="Lightweight" runat="server" ID="RadDataForm1"
                DataKeyNames="CustomerID"
                DataSourceID="EntityDataSourceCustomers"
                OnPreRender="RadDataForm1_PreRender" Skin="Silk"
                InsertItemPosition="FirstItem">
                <LayoutTemplate>
                    <div class="RadDataForm RadDataForm_<%# Container.Skin %> rdfNoFieldHint rdfInlineBlock">

                        <div id="itemPlaceholder" runat="server">
                        </div>
                        <br />
                        <div class="rdfPager rdfPagerRight">
                            <span>
                                <telerik:RadButton RenderMode="Lightweight" ID="RadButton1" runat="server" CommandArgument="First" CommandName="Page" CssClass="rdfActionButton rdfPageFirst" ToolTip="First">
                                    <Icon PrimaryIconCssClass="rdfIcon rdfPageFirstIcon" />
                                </telerik:RadButton>
                                <telerik:RadButton RenderMode="Lightweight" ID="RadButton2" runat="server" CommandArgument="Prev" CommandName="Page" CssClass="rdfActionButton rdfPagePrev" ToolTip="Previous">
                                    <Icon PrimaryIconCssClass="rdfIcon rdfPagePrevIcon" />
                                </telerik:RadButton>
                            </span><span>
                                <telerik:RadButton RenderMode="Lightweight" ID="RadButton3" runat="server" CommandArgument="Next" CommandName="Page" CssClass="rdfActionButton rdfPageNext" ToolTip="Next">
                                    <Icon PrimaryIconCssClass="rdfIcon rdfPageNextIcon" />
                                </telerik:RadButton>
                                <telerik:RadButton RenderMode="Lightweight" ID="RadButton4" runat="server" CommandArgument="Last" CommandName="Page" CssClass="rdfActionButton rdfPageLast" ToolTip="Last">
                                    <Icon PrimaryIconCssClass="rdfIcon rdfPageLastIcon" />
                                </telerik:RadButton>
                            </span>
                        </div>
                    </div>
                </LayoutTemplate>
                <ItemTemplate>
                    <div class="rdfFieldset rdfBorders" style="display: inline-block; width: 250px">
                        <div class="rdfRow">
                            <asp:Label ID="CompanyNameLabel2" runat="server" CssClass="rdfLabel rdfBlock" Text="CompanyName"></asp:Label>
                            <asp:Label ID="CompanyNameLabel1" runat="server" CssClass="rdfFieldValue" Text='<%# Eval("CompanyName") %>' />
                        </div>
                        <div class="rdfRow">
                            <asp:Label ID="ContactNameLabel2" runat="server" CssClass="rdfLabel rdfBlock" Text="ContactName"></asp:Label>
                            <asp:Label ID="ContactNameLabel1" runat="server" CssClass="rdfFieldValue" Text='<%# Eval("ContactName") %>' />
                        </div>
                        <div class="rdfRow">
                            <asp:Label ID="AddressLabel2" runat="server" CssClass="rdfLabel rdfBlock" Text="Address"></asp:Label>
                            <asp:Label ID="AddressLabel1" runat="server" CssClass="rdfFieldValue" Text='<%# Eval("Address") %>' />
                        </div>
                        <div class="rdfRow">
                            <asp:Label ID="CountryLabel2" runat="server" CssClass="rdfLabel rdfBlock" Text="Country"></asp:Label>
                            <asp:Label ID="CountryLabel1" runat="server" CssClass="rdfFieldValue" Text='<%# Eval("Country") %>' />
                        </div>
                        <div class="rdfCommandButtons">
                            <hr class="rdfHr" />
                            <telerik:RadButton RenderMode="Lightweight" ID="InitInsertButton" runat="server" ButtonType="SkinnedButton" CausesValidation="False" CommandName="InitInsert" Text="Insert" ToolTip="Insert" />
                            <telerik:RadButton RenderMode="Lightweight" ID="EditButton" runat="server" ButtonType="SkinnedButton" CausesValidation="False" CommandName="Edit" Text="Edit" ToolTip="Edit" />
                            <telerik:RadButton RenderMode="Lightweight" ID="DeleteButton" runat="server" ButtonType="SkinnedButton" CausesValidation="False" CommandName="Delete" Text="Delete" ToolTip="Delete" />
                        </div>
                    </div>
                </ItemTemplate>
                <EditItemTemplate>
                    <div class="formWrapper edit">
                        <fieldset class="rdfFieldset rdfBorders">
                            <legend class="rdfLegend">Edit customer</legend>
                            <div class="rdfRow">
                                <asp:Label ID="CustomerIDLabel2" runat="server" CssClass="rdfLabel rdfBlock" Text="CustomerID"></asp:Label>
                                <telerik:RadTextBox RenderMode="Lightweight" MaxLength="5" ID="CustomerIDTextBox" ReadOnly="true" runat="server" Text='<%# Bind("CustomerID") %>' WrapperCssClass="rdfInput" />
                                <br />
                                <br />
                            </div>
                            <div class="rdfRow">
                                <asp:Label ID="CompanyNameLabel2" runat="server" AssociatedControlID="CompanyNameTextBox" CssClass="rdfLabel rdfBlock" Text="CompanyName"></asp:Label>
                                <telerik:RadTextBox RenderMode="Lightweight" MaxLength="40" ID="CompanyNameTextBox" runat="server" Text='<%# Bind("CompanyName") %>' WrapperCssClass="rdfInput" />
                                <asp:RequiredFieldValidator ValidationGroup="EditGroup" runat="server" ControlToValidate="CompanyNameTextBox" Text="*Company Name is Required"></asp:RequiredFieldValidator>

                            </div>
                            <div class="rdfRow">
                                <asp:Label ID="AddressLabel2" runat="server" AssociatedControlID="AddressTextBox" CssClass="rdfLabel rdfBlock" Text="Address"></asp:Label>
                                <telerik:RadTextBox RenderMode="Lightweight" MaxLength="60" ID="AddressTextBox" runat="server" Text='<%# Bind("Address") %>' WrapperCssClass="rdfInput" />
                                <br /><br />
                            </div>
                            <div class="rdfRow">
                                <asp:Label ID="CountryLabel2" runat="server" AssociatedControlID="CountryTextBox" CssClass="rdfLabel rdfBlock" Text="Country"></asp:Label>
                                <telerik:RadTextBox RenderMode="Lightweight" MaxLength="15" ID="CountryTextBox" runat="server" Text='<%# Bind("Country") %>' WrapperCssClass="rdfInput" />
                            </div>
                            <div class="rdfCommandButtons">
                                <hr class="rdfHr" />
                                <telerik:RadButton RenderMode="Lightweight" ID="UpdateButton" ValidationGroup="EditGroup" runat="server" ButtonType="SkinnedButton" CommandName="Update" Text="Update" ToolTip="Update" />
                                <telerik:RadButton RenderMode="Lightweight" ID="CancelButton" runat="server" ButtonType="SkinnedButton" CausesValidation="False" CommandName="Cancel" Text="Discard" ToolTip="Discard changes" />
                            </div>
                        </fieldset>
                    </div>
                </EditItemTemplate>
                <InsertItemTemplate>
                    <div class="formWrapper insert">
                        <fieldset class="rdfFieldset rdfBorders">
                            <legend class="rdfLegend">Insert new customer</legend>
                            <div class="rdfRow">
                                <asp:Label ID="CustomerIDLabel2" runat="server" CssClass="rdfLabel rdfBlock" Text="CustomerID"></asp:Label>
                                <telerik:RadTextBox RenderMode="Lightweight" MaxLength="5" ID="CustomerIDTextBox" runat="server" Text='<%# Bind("CustomerID") %>' WrapperCssClass="rdfInput" />
                                <asp:RequiredFieldValidator ValidationGroup="InsertGroup" runat="server" ControlToValidate="CustomerIDTextBox" Text="*Customer ID is Required"></asp:RequiredFieldValidator>
                            </div>
                            <div class="rdfRow">
                                <asp:Label ID="CompanyNameLabel2" runat="server" AssociatedControlID="CompanyNameTextBox" CssClass="rdfLabel rdfBlock" Text="CompanyName"></asp:Label>
                                <telerik:RadTextBox RenderMode="Lightweight" MaxLength="40" ID="CompanyNameTextBox" runat="server" Text='<%# Bind("CompanyName") %>' WrapperCssClass="rdfInput" />
                                <asp:RequiredFieldValidator ValidationGroup="InsertGroup" runat="server" ControlToValidate="CompanyNameTextBox" Text="*Company Name is Required"></asp:RequiredFieldValidator>
                            </div>
                            <div class="rdfRow">
                                <asp:Label ID="AddressLabel2" runat="server" AssociatedControlID="AddressTextBox" CssClass="rdfLabel rdfBlock" Text="Address"></asp:Label>
                                <telerik:RadTextBox RenderMode="Lightweight" MaxLength="60" ID="AddressTextBox" runat="server" Text='<%# Bind("Address") %>' WrapperCssClass="rdfInput" />
                                <br /><br />
                            </div>
                            <div class="rdfRow">
                                <asp:Label ID="CountryLabel2" runat="server" AssociatedControlID="CountryTextBox" CssClass="rdfLabel rdfBlock" Text="Country"></asp:Label>
                                <telerik:RadTextBox RenderMode="Lightweight" MaxLength="15" ID="CountryTextBox" runat="server" Text='<%# Bind("Country") %>' WrapperCssClass="rdfInput" />
                            </div>
                            <div class="rdfCommandButtons">
                                <hr class="rdfHr" />
                                <telerik:RadButton RenderMode="Lightweight" ValidationGroup="InsertGroup" ID="PerformInsertButton" runat="server" ButtonType="SkinnedButton" CommandName="PerformInsert" Text="Insert" ToolTip="Insert" />
                                <telerik:RadButton RenderMode="Lightweight" ID="CancelButton" runat="server" ButtonType="SkinnedButton" CausesValidation="False" CommandName="Cancel" Text="Reset" ToolTip="Reset insert form" />
                            </div>
                        </fieldset>
                    </div>
                </InsertItemTemplate>
                <EmptyDataTemplate>
                    <div class="RadDataForm RadDataForm_<%# Container.Skin %>">
                        <div class="rdfEmpty">
                            There are no items to be displayed.
                        </div>
                    </div>
                </EmptyDataTemplate>
            </telerik:RadDataForm>
        </telerik:RadAjaxPanel>
    </div>
    <asp:EntityDataSource ID="EntityDataSourceCustomers" runat="server" ConnectionString="name=NorthwindReadWriteEntities"
        DefaultContainerName="NorthwindReadWriteEntities" EntitySetName="Customers" OrderBy="it.[ContactName]"
        EntityTypeFilter="Customer" EnableDelete="True" EnableFlattening="False" EnableInsert="True" EnableUpdate="True">
    </asp:EntityDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance