Product Bundles
DevCraft
All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:
Web
Mobile
Document Management
Desktop
Reporting
Testing & Mocking
CMS
UI/UX Tools
Debugging
Free Tools
Support and Learning
Productivity and Design Tools
New to Telerik UI for ASP.NET AJAX? Download free 30-day trial
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.
<%@ 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>