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

Edit Form Types

Next database reset in 0 hours, 55 minutes, 44 seconds
 TOCFirstNameLastNameHire DateTitle 
       
Ms.NancyDavolio5/1/1992Sales Representative
Dr.AndrewFuller8/14/1992Vice President, Sales
Employee Details
Company Info:
Country:
City:
Region:
Personal Info:
Title Of Courtesy
FirstName:
Last Name:
Birth Date:
Hire Date:
Title:
Home Phone:
Notes:
Address:
 
Ms.JanetLeverling4/1/1992Sales Representative
Mrs.MargaretPeacock5/3/1993Sales Representative
Mr.StevenBuchanan10/17/1993Sales Manager
Mr.MichaelSuyama10/17/1993Sales Representative
Mr.RobertKing1/2/1994Sales Representative
Ms.LauraCallahan3/5/1994Inside Sales Coordinator
Ms.AnneDodsworth11/15/1994Sales Representative
  • Demo Configurator
EditForm type

Telerik RadGrid supports custom edit forms for management of item content. You can switch the type of the edit forms using the GridEditFormType Enumeration.

In the example above the edit form is a WebUserControl specified by the UserControlName property. The same user control will be used for the insert form as well. The user control implements a public DataItem property through which Telerik RadGrid sets the correct values for the editor controls (when loading the user control). This allows the developer to write binding expressions to bind the server controls in the user control to the corresponding DataItem.

Note that WebUserControl custom edit form is not supported with simple data-binding (calling DataBind()). See the Simple data binding demo from the Populating with data section for more info about the limitations of this binding mode.

You can toggle the PopUp checkbox if you want to display editing items in a PopUp edit form. When an item is put in edit mode RadGrid will display a popup with the edit form. You merely need to set the EditMode property of the corresponding GridTableView to Popup.

This example shows how:
  • One can adopt user controls as RadGrid's edit/insert forms.
  • DefaultCS.aspx
  • EmployeeDetailsCS.ascx
  • DefaultCS.aspx.cs
    • DefaultCS.aspx.cs
    • EmployeeDetailsCS.ascx.cs
  • styles.css
<%@ Page Language="C#" Inherits="Telerik.GridExamplesCSharp.DataEditing.UserControlEditForm.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ 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" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function RowDblClick(sender, eventArgs) {
                sender.get_masterTableView().editItem(eventArgs.get_itemIndexHierarchical());
            }

            function onPopUpShowing(sender, args) {
                args.get_popUp().className += " popUpEditForm";
            }
        </script>
    </telerik:RadCodeBlock>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadFormDecorator RenderMode="Lightweight" ID="RadFormDecorator1" runat="server" DecorationZoneID="demo" DecoratedControls="All" EnableRoundedCorners="false" />
    <div id="demo" class="demo-container no-bg">
        <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" AllowPaging="True" ShowFooter="true"
            AllowSorting="True" AutoGenerateColumns="False" ShowStatusBar="true" 
            OnPreRender="RadGrid1_PreRender" OnNeedDataSource="RadGrid1_NeedDataSource" OnUpdateCommand="RadGrid1_UpdateCommand" OnItemDataBound="RadGrid1_ItemDataBound"
            OnInsertCommand="RadGrid1_InsertCommand" OnDeleteCommand="RadGrid1_DeleteCommand">
            <MasterTableView Width="100%" CommandItemDisplay="Top" DataKeyNames="EmployeeID" EditFormSettings-PopUpSettings-KeepInScreenBounds="true">
                <Columns>
                    <telerik:GridEditCommandColumn UniqueName="EditCommandColumn">
                    </telerik:GridEditCommandColumn>
                    <telerik:GridBoundColumn UniqueName="TitleOfCourtesy" HeaderText="TOC" DataField="TitleOfCourtesy">
                        <HeaderStyle Width="60px"></HeaderStyle>
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="FirstName" HeaderText="FirstName" DataField="FirstName">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="LastName" HeaderText="LastName" DataField="LastName">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="HireDate" HeaderText="Hire Date" DataField="HireDate"
                        DataFormatString="{0:d}">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="Title" HeaderText="Title" DataField="Title">
                    </telerik:GridBoundColumn>
                    <telerik:GridButtonColumn UniqueName="DeleteColumn" Text="Delete" CommandName="Delete">
                    </telerik:GridButtonColumn>
                </Columns>
                <EditFormSettings UserControlName="EmployeeDetailsCS.ascx" EditFormType="WebUserControl">
                    <EditColumn UniqueName="EditCommandColumn1">
                    </EditColumn>
                </EditFormSettings>
            </MasterTableView>
            <ClientSettings>
                <ClientEvents OnRowDblClick="RowDblClick" OnPopUpShowing="onPopUpShowing" />
            </ClientSettings>
        </telerik:RadGrid>
    </div>
    <qsf:ConfiguratorPanel runat="server" ID="ConfiguratorPanel">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn runat="server" Title="EditForm type">
                    <qsf:RadioButtonList runat="server" ID="RadioButtonList1" AutoPostBack="true" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
                        <asp:ListItem Text="EditForms" Value="EditForms" Selected="True"></asp:ListItem>
                        <asp:ListItem Text="PopUp" Value="PopUp"></asp:ListItem>
                    </qsf:RadioButtonList>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance