Grid

Controls

All Controls

Grid

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

Grid - Edit Form Types

Next database reset in 0 hours, 19 minutes, 50 seconds
Command item
Command item
Add new recordRefresh
 TOCFirstNameLastNameHire DateTitle 
       
EditMs.NancyDavolio5/1/1992Sales RepresentativeDelete
EditDr.AndrewFuller8/14/1992Vice President, SalesDelete
Employee Details
Personal Info:
Country:
City:
Region:
Home Phone:
Birth Date:
RadDatePicker
RadDatePicker
Open the calendar popup.
Title Of Courtesy
Notes:
Address:
Company Info:
FirstName:
Last Name:
Hire Date:
RadDatePicker
RadDatePicker
Open the calendar popup.
Title:
 
EditMs.JanetLeverling4/1/1992Sales RepresentativeDelete
EditMrs.MargaretPeacock5/3/1993Sales RepresentativeDelete
EditMr.StevenBuchanan10/17/1993Sales ManagerDelete
EditMr.MichaelSuyama10/17/1993Sales RepresentativeDelete
EditMr.RobertKingcccc1/2/1994Sales RepresentativeDelete
EditMs.Laura999993/5/1994Inside Sales CoordinatorDelete
EditMs.AnneDodsworth11/15/1994Sales RepresentativeDelete
This example shows how:
  • One can adopt user controls as RadGrid's edit/insert forms.
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.
C# VB
Show code in new window Demo isolation steps
     <%@ 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>Edit Form Types in ASP.NET AJAX DataGrid Control | RadGrid Demo</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="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
    <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>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>
    <label for="RadioButtonList1">EditForm type:</label>
    <asp:RadioButtonList runat="server" ID="RadioButtonList1" AutoPostBack="true" RepeatDirection="Horizontal" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
        <asp:ListItem Text="EditForms" Value="EditForms" Selected="True"></asp:ListItem>
        <asp:ListItem Text="PopUp" Value="PopUp"></asp:ListItem>
    </asp:RadioButtonList>
    <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" />
            </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>
    </form>
</body>
</html>