Grid - Edit Form Types

Next database reset in 0 hours, 23 minutes, 51 seconds
Command item
Command item
Add new recordRefresh
 TOCFirstNameLastNameHire DateTitle 
       
EditMs.NancyDavoliot5/1/1992Sales RepresentativeDelete
EditDr.AndrewFuller8/14/1992Vice President, SalesDelete
Employee Details
Company Info:
Country:
City:
Region:
Personal Info:
Title Of Courtesy
FirstName:
Last Name:
Birth Date:
RadDatePicker
RadDatePicker
Open the calendar popup.
Hire Date:
RadDatePicker
RadDatePicker
Open the calendar popup.
Title:
Home Phone:
Notes:
Address:
 
EditMs.JanetLeverling4/1/1992Sales RepresentativeDelete
EditMrs.MargaretPeacock5/3/1993Sales RepresentativeDelete
EditMr.StevenBuchanan10/17/1993Sales ManagerDelete
EditMr.MichaelSuyama10/17/1993Sales RepresentativeDelete
EditMr.RobertKing1/2/1994Sales RepresentativeDelete
EditMs.LauraCallahan3/5/1994Inside Sales CoordinatorDelete
EditMs.AnneDodsworth11/15/1994Sales RepresentativeDelete

Demo Configurator

EditForm type
Isolate this demo as a stand-alone application

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.
<%@ 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 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" 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 ID="RadFormDecorator1" runat="server" DecorationZoneID="demo" DecoratedControls="All" EnableRoundedCorners="false"  />
    <div id="demo" class="demo-container no-bg">
        <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" ShowFooter="true"
            AllowSorting="True" AutoGenerateColumns="False" ShowStatusBar="true"
            OnPreRender="RadGrid1_PreRender" OnNeedDataSource="RadGrid1_NeedDataSource" OnUpdateCommand="RadGrid1_UpdateCommand"
            OnInsertCommand="RadGrid1_InsertCommand" OnDeleteCommand="RadGrid1_DeleteCommand">
            <MasterTableView Width="100%" CommandItemDisplay="Top" DataKeyNames="EmployeeID">
                <EditFormSettings>
                    <PopUpSettings Modal="true" ZIndex="100010" />
                </EditFormSettings>
                <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>

Find Assistance

Help Us Improve

Was this example helpful?