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

WebForms DataForm Overview

Our customers
CompanyName aa
ContactName huh?
ContactTitle
Address
City
Country

This demo demonstrates simple way of using RadDataForm bound to a DataSource control. The templates used in this demo were generated using the Design-Time Configuration Wizard of RadDataForm. Buttons inside each template have CommandName and CommandArgument which is enough for performing automatic operations like editing and paging. The control is skinnable out of the box and works well in combination of RadFormDecorator. This demo also shows how some of the main build-in CSS selectors can be used for further customization of the form.

About RadDataForm for ASP.NET AJAX

RadDataForm is data oriented control, which displays the values of a single record or collection of data items from a DataSource using user-defined templates. You can use the control designer to autogenerate its fields. The control provides you with an option to preview, edit, delete, and insert records through the available ItemTemplate, EditItemTemplate and InsertItemTemplate templates. The DataForm also provides EmptyDataTemplate, which applies when the datasource is empty, as well as the LayoutTemplate for easy customization.

The control supports the rich set of skins provided by the suite.

RadDataForm and 120+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

Key Features

  • Various templates for data and layout presentation
  • Data-binding – Server-side
  • Insert, Update and Delete operations
  • Set of commonly used predefined layouts and unlimited possibilities for creating custom layouts
  • Visual Appeal – ships with rich set of skins for easy and consistent styling
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • Styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.DataFormExamples.Overview.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 size-custom">
        <telerik:RadAjaxPanel runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
            <telerik:RadDataForm RenderMode="Lightweight" runat="server" ID="RadDataForm1" DataKeyNames="CustomerID" DataSourceID="EntityDataSourceCustomers" OnPreRender="RadDataForm1_PreRender">
                <LayoutTemplate>
                    <div id="demo">
                        <div class="RadDataForm RadDataForm_<%# Container.Skin %> rdfInlineBlock">
                            <div class="rdfHeader ">
                                <div class="rdfHeaderInner">Our customers</div>
                            </div>
                            <div id="itemPlaceholder" runat="server">
                            </div>
                            <div class="rdfPager rdfPagerLeft">
                                <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>
                    </div>
                </LayoutTemplate>
                <ItemTemplate>
                    <div class="rdfFieldset rdfBorders">
                        <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="ContactTitleLabel2" runat="server" CssClass="rdfLabel rdfBlock" Text="ContactTitle"></asp:Label>
                            <asp:Label ID="ContactTitleLabel1" runat="server" CssClass="rdfFieldValue" Text='<%# Eval("ContactTitle") %>' />
                        </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="CityLabel2" runat="server" CssClass="rdfLabel rdfBlock" Text="City"></asp:Label>
                            <asp:Label ID="CityLabel1" runat="server" CssClass="rdfFieldValue" Text='<%# Eval("City") %>' />
                        </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>
                    <fieldset class="rdfFieldset rdfBorders">
                        <legend class="rdfLegend"></legend>
                        <div class="rdfRow">
                            <asp:Label ID="CustomerIDLabel2" runat="server" CssClass="rdfLabel rdfBlock" Text="CustomerID"></asp:Label>
                            <asp:Label ID="CustomerIDLabel1" runat="server" CssClass="rdfFieldValue" Text='<%# Eval("CustomerID") %>' />
                        </div>
                        <div class="rdfRow">
                            <asp:Label ID="CompanyNameLabel2" runat="server" AssociatedControlID="CompanyNameTextBox" CssClass="rdfLabel rdfBlock" Text="CompanyName"></asp:Label>
                            <telerik:RadTextBox RenderMode="Lightweight" ID="CompanyNameTextBox" runat="server" Text='<%# Bind("CompanyName") %>' WrapperCssClass="rdfInput" />
                            <asp:RequiredFieldValidator ErrorMessage="CompanyName is required" Display="Dynamic" ControlToValidate="CompanyNameTextBox" runat="server" />
                        </div>
                        <div class="rdfRow">
                            <asp:Label ID="ContactNameLabel2" runat="server" AssociatedControlID="ContactNameTextBox" CssClass="rdfLabel rdfBlock" Text="ContactName"></asp:Label>
                            <telerik:RadTextBox RenderMode="Lightweight" ID="ContactNameTextBox" runat="server" Text='<%# Bind("ContactName") %>' WrapperCssClass="rdfInput" />
                        </div>
                        <div class="rdfRow">
                            <asp:Label ID="ContactTitleLabel2" runat="server" AssociatedControlID="ContactTitleTextBox" CssClass="rdfLabel rdfBlock" Text="ContactTitle"></asp:Label>
                            <telerik:RadTextBox RenderMode="Lightweight" ID="ContactTitleTextBox" runat="server" Text='<%# Bind("ContactTitle") %>' WrapperCssClass="rdfInput" />
                        </div>
                        <div class="rdfRow">
                            <asp:Label ID="AddressLabel2" runat="server" AssociatedControlID="AddressTextBox" CssClass="rdfLabel rdfBlock" Text="Address"></asp:Label>
                            <telerik:RadTextBox RenderMode="Lightweight" ID="AddressTextBox" runat="server" Text='<%# Bind("Address") %>' WrapperCssClass="rdfInput" />
                        </div>
                        <div class="rdfRow">
                            <asp:Label ID="CityLabel2" runat="server" AssociatedControlID="CityTextBox" CssClass="rdfLabel rdfBlock" Text="City"></asp:Label>
                            <telerik:RadTextBox RenderMode="Lightweight" ID="CityTextBox" runat="server" Text='<%# Bind("City") %>' WrapperCssClass="rdfInput" />
                        </div>
                        <div class="rdfRow">
                            <asp:Label ID="CountryLabel2" runat="server" AssociatedControlID="CountryTextBox" CssClass="rdfLabel rdfBlock" Text="Country"></asp:Label>
                            <telerik:RadTextBox RenderMode="Lightweight" ID="CountryTextBox" runat="server" Text='<%# Bind("Country") %>' WrapperCssClass="rdfInput" />
                        </div>
                        <div class="rdfCommandButtons">
                            <hr class="rdfHr" />
                            <telerik:RadButton RenderMode="Lightweight" ID="UpdateButton" 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="Cancel" ToolTip="Cancel" />
                        </div>
                    </fieldset>
                </EditItemTemplate>
                <InsertItemTemplate>
                    <fieldset class="rdfFieldset rdfBorders">
                        <legend class="rdfLegend"></legend>
                        <div class="rdfRow">
                            <asp:Label ID="CustomerIDLabel2" runat="server" CssClass="rdfLabel rdfBlock" Text="CustomerID"></asp:Label>
                            <telerik:RadTextBox RenderMode="Lightweight" ID="CustomerIDTextBox" runat="server" Text='<%# Bind("CustomerID") %>' WrapperCssClass="rdfInput" />
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" ErrorMessage="CustomerID is required" Display="Dynamic" ControlToValidate="CustomerIDTextBox" runat="server" />
                        </div>
                        <div class="rdfRow">
                            <asp:Label ID="CompanyNameLabel2" runat="server" AssociatedControlID="CompanyNameTextBox" CssClass="rdfLabel rdfBlock" Text="CompanyName"></asp:Label>
                            <telerik:RadTextBox RenderMode="Lightweight" ID="CompanyNameTextBox" runat="server" Text='<%# Bind("CompanyName") %>' WrapperCssClass="rdfInput" />
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" ErrorMessage="CompanyName is required" Display="Dynamic" ControlToValidate="CompanyNameTextBox" runat="server" />
                        </div>
                        <div class="rdfRow">
                            <asp:Label ID="ContactNameLabel2" runat="server" AssociatedControlID="ContactNameTextBox" CssClass="rdfLabel rdfBlock" Text="ContactName"></asp:Label>
                            <telerik:RadTextBox RenderMode="Lightweight" ID="ContactNameTextBox" runat="server" Text='<%# Bind("ContactName") %>' WrapperCssClass="rdfInput" />
                        </div>
                        <div class="rdfRow">
                            <asp:Label ID="ContactTitleLabel2" runat="server" AssociatedControlID="ContactTitleTextBox" CssClass="rdfLabel rdfBlock" Text="ContactTitle"></asp:Label>
                            <telerik:RadTextBox RenderMode="Lightweight" ID="ContactTitleTextBox" runat="server" Text='<%# Bind("ContactTitle") %>' WrapperCssClass="rdfInput" />
                        </div>
                        <div class="rdfRow">
                            <asp:Label ID="AddressLabel2" runat="server" AssociatedControlID="AddressTextBox" CssClass="rdfLabel rdfBlock" Text="Address"></asp:Label>
                            <telerik:RadTextBox RenderMode="Lightweight" ID="AddressTextBox" runat="server" Text='<%# Bind("Address") %>' WrapperCssClass="rdfInput" />
                        </div>
                        <div class="rdfRow">
                            <asp:Label ID="CityLabel2" runat="server" AssociatedControlID="CityTextBox" CssClass="rdfLabel rdfBlock" Text="City"></asp:Label>
                            <telerik:RadTextBox RenderMode="Lightweight" ID="CityTextBox" runat="server" Text='<%# Bind("City") %>' WrapperCssClass="rdfInput" />
                        </div>
                        <div class="rdfRow">
                            <asp:Label ID="CountryLabel2" runat="server" AssociatedControlID="CountryTextBox" CssClass="rdfLabel rdfBlock" Text="Country"></asp:Label>
                            <telerik:RadTextBox RenderMode="Lightweight" ID="CountryTextBox" runat="server" Text='<%# Bind("Country") %>' WrapperCssClass="rdfInput" />
                        </div>
                        <div class="rdfCommandButtons">
                            <hr class="rdfHr" />
                            <telerik:RadButton RenderMode="Lightweight" 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="Cancel" ToolTip="Cancel" />
                        </div>
                    </fieldset>
                </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>
        <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>
    </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