Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q1 2012 released 04/11/2012
select
  • Rate / Review ▼

    • Give your Feedback:

      Rate this demo:


Grid / PopUp Edit Form

Next database reset in 0 hours, 47 minutes, 37 seconds

Example Configuration

Add new recordRefresh
 Product IDProduct NameCategory IDQuantity Per UnitUnit PriceUnits In StockDiscontinued
1234567
Page size:
select
 61 items in 7 pages
Edit12Queso Manchego La Pastora410 - 500 g pkgs.38.0086
Edit13Konbu82 kg box6.0024
Edit14Tofu740 - 100 g pkgs.23.2535
Edit15Genen Shouyu224 - 250 ml bottles15.5039
Edit16Pavlova332 - 500 g boxes17.4529
Edit18Carnarvon Tigers816 kg pkg.62.5042
Edit19Teatime Chocolate Biscuits310 boxes x 12 pieces9.2025
Edit20Sir Rodney's Marmalade330 gift boxes81.0040
Edit21Sir Rodney's Scones324 pkgs. x 4 pieces10.003
Edit22Gustaf's Knäckebröd524 - 500 g pkgs.21.00104

Add new recordRefresh
 TOCFirstNameLastNameCityTitle 
Add new recordRefresh
EditDr.AndrewFullerTacomaVice President, SalesDelete
EditMs.JanetLeverlingKirklandSales RepresentativeDelete
EditMrs.MargaretPeacockRedmondSales RepresentativeDelete
EditMr.StevenBuchananLondonSales ManagerDelete
EditMr.MichaelSuyamaLondonSales RepresentativeDelete
EditMr.RobertKingLondonSales RepresentativeDelete
EditMs.LauraCallahanSeattleInside Sales CoordinatorDelete
EditMs.AnneDodsworthLondonSales RepresentativeDelete

  • RadGrid supports 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.

    You can toggle the Allow multi-row Edit checkbox for each of the grids to verify that popup edit forms is compatible with this feature. The first grid in the example is further extended with Paging, Sorting and AJAX functionality delivered by RadAjaxManager. The second grid shows a FormTemplate edit form in the popup.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="VB" AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.GridExamplesVBNET.DataEditing.PopUpEditForm.DefaultVB" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="telerik" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ 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">
        <telerik:HeadTag runat="server" ID="Headtag2"></telerik:HeadTag>
    </head>
    <body class="BODY">
        <form id="mainForm" runat="server">
        <telerik:Header runat="server" ID="Header1" NavigationLanguage="VB" ShowSkinChooser="false" ShowDbResetTimer="true">
        </telerik:Header>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <!-- content start -->
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
                function RowDblClick(sender, eventArgs)
                {
                    sender.get_masterTableView().editItem(eventArgs.get_itemIndexHierarchical());
                }
            </script>
        </telerik:RadCodeBlock>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="CheckBox1" />
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="Label1" />
                        <telerik:AjaxUpdatedControl ControlID="Label2" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadGrid2">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="CheckBox2" />
                        <telerik:AjaxUpdatedControl ControlID="RadGrid2" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="CheckBox1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="CheckBox1" />
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="CheckBox2">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="CheckBox2" />
                        <telerik:AjaxUpdatedControl ControlID="RadGrid2" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
        <br />
        <telerik:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server" Expanded="true">
    <asp:CheckBox ID="CheckBox1" Text="Allow multi-row edit (first grid)" AutoPostBack="true"
    Checked="<%# RadGrid1.AllowMultiRowEdit %>" runat="server" OnCheckedChanged="CheckBox1_CheckedChanged" />
    <asp:CheckBox ID="CheckBox2" Text="Allow multi-row edit (second grid)" AutoPostBack="true"
    Checked="<%# RadGrid2.AllowMultiRowEdit %>" runat="server" OnCheckedChanged="CheckBox2_CheckedChanged" />
        </telerik:ConfiguratorPanel>
        <div>
            <asp:Label ID="Label1" runat="server" EnableViewState="False" Font-Bold="True" ForeColor="#FF8080"></asp:Label>
            <asp:Label ID="Label2" runat="server" EnableViewState="False" Font-Bold="True" ForeColor="#00C000"></asp:Label>
        </div>
        <br/>
        <telerik:RadGrid ID="RadGrid1" AutoGenerateEditColumn="true" Skin="Vista" runat="server"
            AllowAutomaticDeletes="True" AllowAutomaticInserts="True" AllowAutomaticUpdates="True"
            AllowPaging="True" AllowMultiRowEdit="<%# CheckBox1.Checked %>" DataSourceID="SqlDataSource1"
            AllowSorting="true" OnPreRender="RadGrid1_PreRender" OnItemDeleted="RadGrid1_ItemDeleted"
            OnItemInserted="RadGrid1_ItemInserted" OnItemUpdated="RadGrid1_ItemUpdated">
            <MasterTableView EditMode="PopUp" CommandItemDisplay="Top" DataKeyNames="ProductID">
                <EditFormSettings InsertCaption="Add new item" CaptionFormatString="Edit ProductID: {0}"
                    CaptionDataField="ProductID" />
            </MasterTableView>
            <ClientSettings>
                <ClientEvents OnRowDblClick="RowDblClick" />
            </ClientSettings>
        </telerik:RadGrid>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>"
            InsertCommand="INSERT INTO [Products] ([ProductName], [CategoryID], [QuantityPerUnit], [UnitPrice], [UnitsInStock], [Discontinued]) VALUES (@ProductName, @CategoryID, @QuantityPerUnit, @UnitPrice, @UnitsInStock, @Discontinued)"
            SelectCommand="SELECT [ProductID], [ProductName], [CategoryID], [QuantityPerUnit], [UnitPrice], [UnitsInStock], [Discontinued] FROM [Products]"
            UpdateCommand="UPDATE [Products] SET [ProductName] = @ProductName, [CategoryID] = @CategoryID, [QuantityPerUnit] = @QuantityPerUnit, [UnitPrice] = @UnitPrice, [UnitsInStock] = @UnitsInStock, [Discontinued] = @Discontinued WHERE [ProductID] = @ProductID">
            <InsertParameters>
                <asp:Parameter Name="ProductName" Type="String" />
                <asp:Parameter Name="CategoryID" Type="Int32" />
                <asp:Parameter Name="QuantityPerUnit" Type="String" />
                <asp:Parameter Name="UnitPrice" Type="Decimal" />
                <asp:Parameter Name="UnitsInStock" Type="Int16" />
                <asp:Parameter Name="Discontinued" Type="Boolean" />
            </InsertParameters>
            <UpdateParameters>
                <asp:Parameter Name="ProductName" Type="String" />
                <asp:Parameter Name="CategoryID" Type="Int32" />
                <asp:Parameter Name="QuantityPerUnit" Type="String" />
                <asp:Parameter Name="UnitPrice" Type="Decimal" />
                <asp:Parameter Name="UnitsInStock" Type="Int16" />
                <asp:Parameter Name="Discontinued" Type="Boolean" />
                <asp:Parameter Name="ProductID" Type="Int32" />
            </UpdateParameters>
        </asp:SqlDataSource>
        <br />
        <telerik:RadGrid ID="RadGrid2" runat="server" Skin="Vista" CssClass="RadGrid" GridLines="None"
            AllowPaging="True" PageSize="20" AllowSorting="True" AutoGenerateColumns="False"
            ShowStatusBar="true" AllowAutomaticDeletes="True" AllowAutomaticInserts="True"
            AllowAutomaticUpdates="True" DataSourceID="SqlDataSource2" HorizontalAlign="NotSet">
            <MasterTableView CommandItemDisplay="TopAndBottom" GridLines="None" DataSourceID="SqlDataSource2"
                DataKeyNames="EmployeeID" EditMode="PopUp">
                <Columns>
                    <telerik:GridEditCommandColumn>
                    </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="City" HeaderText="City" DataField="City">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="Title" HeaderText="Title" DataField="Title">
                    </telerik:GridBoundColumn>
                    <telerik:GridButtonColumn CommandName="Delete" Text="Delete" UniqueName="column">
                    </telerik:GridButtonColumn>
                </Columns>
                <EditFormSettings InsertCaption="Add new item" CaptionFormatString="Edit EmployeeID: {0}"
                    CaptionDataField="EmployeeID" EditFormType="Template" PopUpSettings-Modal="true">
                    <FormTemplate>
                        <table id="Table1" cellspacing="1" cellpadding="1" width="250" border="0">
                            <tr>
                                <td>
                                </td>
                                <td>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Country:
                                </td>
                                <td>
                                    <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind( "Country" ) %>'>
                                    </asp:TextBox>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    City:
                                </td>
                                <td>
                                    <asp:TextBox ID="TextBox5" runat="server" Text='<%# Bind( "City") %>' TabIndex="1">
                                    </asp:TextBox>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Region:
                                </td>
                                <td>
                                    <asp:TextBox ID="TextBox6" runat="server" Text='<%# Bind( "Region") %>' TabIndex="2">
                                    </asp:TextBox>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Title Of Courtesy
                                </td>
                                <td>
                                    <asp:DropDownList ID="DropDownList1" runat="server" SelectedValue='<%# Bind("TitleOfCourtesy") %>'
                                        DataSource='<%# (new string() { "Dr.", "Mr.", "Mrs.", "Ms." }) %>' TabIndex="7"
                                        AppendDataBoundItems="True">
                                        <asp:ListItem Selected="True" Text="Select" Value=""></asp:ListItem>
                                    </asp:DropDownList>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <hr />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    FirstName:
                                </td>
                                <td>
                                    <asp:TextBox ID="TextBox10" Text='<%# Bind( "FirstName") %>' runat="server" TabIndex="8">
                                    </asp:TextBox>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Last Name:
                                </td>
                                <td>
                                    <asp:TextBox ID="TextBox11" Text='<%# Bind( "LastName") %>' runat="server" TabIndex="9">
                                    </asp:TextBox>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Title:
                                </td>
                                <td>
                                    <asp:TextBox ID="TextBox12" Text='<%# Bind( "Title") %>' runat="server" TabIndex="11">
                                    </asp:TextBox>
                                </td>
                            </tr>
                        </table>
                        <table style="width: 100%">
                            <tr>
                                <td align="right" colspan="2">
                                    <asp:Button ID="Button1" Text='<%# Iif (TypeOf Container is GridEditFormInsertItem, "Insert", "Update") %>'
                                        runat="server" CommandName='<%# Iif (TypeOf Container is GridEditFormInsertItem, "PerformInsert", "Update") %>'>
                                    </asp:Button>&nbsp;
                                    <asp:Button ID="Button2" Text="Cancel" runat="server" CausesValidation="False" CommandName="Cancel">
                                    </asp:Button>
                                </td>
                            </tr>
                        </table>
                    </FormTemplate>
                </EditFormSettings>
            </MasterTableView>
            <ClientSettings>
                <ClientEvents OnRowDblClick="RowDblClick" />
            </ClientSettings>
        </telerik:RadGrid>
        <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>"
            DeleteCommand="DELETE FROM [Employees] WHERE [EmployeeID] = @EmployeeID" InsertCommand="INSERT INTO [Employees] ([LastName], [FirstName], [Title], [TitleOfCourtesy], [City], [Region], [Country]) VALUES (@LastName, @FirstName, @Title, @TitleOfCourtesy, @City, @Region, @Country)"
            SelectCommand="SELECT * FROM [Employees]" UpdateCommand="UPDATE [Employees] SET [LastName] = @LastName, [FirstName] = @FirstName, [Title] = @Title, [TitleOfCourtesy] = @TitleOfCourtesy, [City] = @City, [Region] = @Region, [Country] = @Country WHERE [EmployeeID] = @EmployeeID">
            <DeleteParameters>
                <asp:Parameter Name="EmployeeID" Type="Int32" />
            </DeleteParameters>
            <InsertParameters>
                <asp:Parameter Name="EmployeeID" Type="Int32" />
                <asp:Parameter Name="LastName" Type="String" DefaultValue="" ConvertEmptyStringToNull="false" />
                <asp:Parameter Name="FirstName" Type="String" DefaultValue="" ConvertEmptyStringToNull="false" />
                <asp:Parameter Name="Title" Type="String" />
                <asp:Parameter Name="TitleOfCourtesy" Type="String" />
                <asp:Parameter Name="City" Type="String" />
                <asp:Parameter Name="Region" Type="String" />
                <asp:Parameter Name="Country" Type="String" />
            </InsertParameters>
            <UpdateParameters>
                <asp:Parameter Name="LastName" Type="String" DefaultValue="" ConvertEmptyStringToNull="false" />
                <asp:Parameter Name="FirstName" Type="String" DefaultValue="" ConvertEmptyStringToNull="false" />
                <asp:Parameter Name="Title" Type="String" />
                <asp:Parameter Name="TitleOfCourtesy" Type="String" />
                <asp:Parameter Name="City" Type="String" />
                <asp:Parameter Name="Region" Type="String" />
                <asp:Parameter Name="Country" Type="String" />
                <asp:Parameter Name="EmployeeID" Type="Int32" />
            </UpdateParameters>
        </asp:SqlDataSource>
        <!-- content end -->
        <telerik:Footer runat="server" ID="Footer1"></telerik:Footer>
        </form>
    </body>
    </html>

Get more than expected!

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2012 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451