DataForm - Layouts

Our customers

Insert new customer
CustomerID  
 



Edit customer
CustomerID

 




Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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

Help Us Improve

Was this example helpful?