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

Window Editing

Next database reset in 1 hours, 54 minutes, 28 seconds
Add New Record
EmployeeIDFirstNameLastNameTitle 
12345678910...
 Page 1 of 15, items 1 to 5 of 75.
24Jim5Check out the designdsadasda Edit
27elkljlwww12knl Edit
33ttertertermejia Edit
34Am3 Kumaryadavrrrr Edit
35jk goldenttttttttttGolden Edit

This example demonstrates how to use RadWindow for editing RadGrid records

There are different ways to hook the RadWindow object to RadGrid in order to edit/insert data in a popup fashion, and then update the edited item/insert the new item (passing the new values back to the main page).

Below we describe the needed steps to use RadWindow in a sample case utilizing GridTemplateColumn/edit on row double click and the CommandItemTemplate and using ajax request:

Edit/Update

  1. For each GridDataItem in the ItemCreated handler find the Hyperlink instance inside the template column.
  2. Attach a javascript function to the onclick attribute of that anchor which opens RadWindow (passing the primary key for the currently created item as an argument to that function).
  3. Open the popup window calling window.radopen() and passing the primary key in the query string of the new window. The same can be done by intercepting the OnRowDblClick client event of the grid.
  4. In the content page of RadWindow retrieve the cell values from the grid source which correspond to the primary key from the query string and display them in editable textboxes.
  5. Edit the content in the textboxes, update the row in the grid source, close the popup window and refresh the grid.

Insert

  1. Add anchor and image to the CommandItemTemplate of the grid to allow items insertion (don't forget to set CommandItemDisplay property of the grid to value which differs from None).
  2. Hook the onclick attribute of the anchor to open the insertion form.
  3. Type values in the textbox editors, insert the new row in the grid source, close the popup window and refresh the grid calling the RadAjaxManager.ajaxRequestmethod.
  • DefaultCS.aspx
    • DefaultCS.aspx
    • EditForm_csharp.aspx
    • EditForm_vbasic.aspx
  • DefaultCS.aspx.cs
    • DefaultCS.aspx.cs
    • EditForm_csharp.aspx.cs
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Grid.Integration.GridAndWindow.DefaultCS" %>

<%@ 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>
    <telerik:RadCodeBlock ID="RadCodeBlock2" runat="server">
        <style type="text/css">
            .orderText {
                font: normal 12px Arial,Verdana;
                margin-top: 6px;
            }
        </style>
    </telerik:RadCodeBlock>
</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 ShowEditForm(id, rowIndex) {
                var grid = $find("<%= RadGrid1.ClientID %>");

                var rowControl = grid.get_masterTableView().get_dataItems()[rowIndex].get_element();
                grid.get_masterTableView().selectItem(rowControl, true);

                window.radopen("EditForm_csharp.aspx?EmployeeID=" + id, "UserListDialog");
                return false;
            }
            function ShowInsertForm() {
                window.radopen("EditForm_csharp.aspx", "UserListDialog");
                return false;
            }
            function refreshGrid(arg) {
                if (!arg) {
                    $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("Rebind");
                }
                else {
                    $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("RebindAndNavigate");
                }
            }
            function RowDblClick(sender, eventArgs) {
                window.radopen("EditForm_csharp.aspx?EmployeeID=" + eventArgs.getDataKeyValue("EmployeeID"), "UserListDialog");
            }
        </script>
    </telerik:RadCodeBlock>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="gridLoadingPanel"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="gridLoadingPanel"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel runat="server" ID="gridLoadingPanel"></telerik:RadAjaxLoadingPanel>
<div class="demo-container no-bg">
    <telerik:RadGrid RenderMode="Lightweight" OnItemCreated="RadGrid1_ItemCreated" ID="RadGrid1" runat="server"
        AllowPaging="True" Width="97%" DataSourceID="SqlDataSource1">
        <PagerStyle Mode="NumericPages"></PagerStyle>
        <MasterTableView AutoGenerateColumns="False" DataKeyNames="EmployeeID" ClientDataKeyNames="EmployeeID"
            Width="100%" CommandItemDisplay="Top" PageSize="5">
            <Columns>
                <telerik:GridBoundColumn DataField="EmployeeID" HeaderText="EmployeeID" ReadOnly="True"
                    SortExpression="EmployeeID" UniqueName="EmployeeID">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName"
                    UniqueName="FirstName">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="LastName" HeaderText="LastName" SortExpression="LastName"
                    UniqueName="LastName">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Title" HeaderText="Title" SortExpression="Title"
                    UniqueName="Title">
                </telerik:GridBoundColumn>
                <telerik:GridTemplateColumn UniqueName="TemplateEditColumn">
                    <ItemTemplate>
                        <asp:HyperLink ID="EditLink" runat="server" Text="Edit"></asp:HyperLink>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
            </Columns>
            <CommandItemTemplate>
                <a href="#" onclick="return ShowInsertForm();">Add New Record</a>
            </CommandItemTemplate>
        </MasterTableView>
        <ClientSettings>
            <Selecting AllowRowSelect="true"></Selecting>
            <ClientEvents OnRowDblClick="RowDblClick"></ClientEvents>
        </ClientSettings>
    </telerik:RadGrid>
    </div>
    <telerik:RadWindowManager RenderMode="Lightweight" ID="RadWindowManager1" runat="server" EnableShadow="true">
        <Windows>
            <telerik:RadWindow RenderMode="Lightweight" ID="UserListDialog" runat="server" Title="Editing record" Height="380px"
                Width="393px" Left="150px" ReloadOnShow="true" ShowContentDuringLoad="false"
                Modal="true">
            </telerik:RadWindow>
        </Windows>
    </telerik:RadWindowManager>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>"
        SelectCommand="SELECT [EmployeeID], [FirstName], [LastName], [Title] FROM [Employees]"></asp:SqlDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance