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

Dynamic AjaxSettings

Next database reset in 0 hours, 44 minutes, 32 seconds
     Add new employee                    Delete selected employee                    Refresh employees list
14What1EverDemo Job   
15JimSmithTest   
17zorrozzzz44t4 t44t4
18ericemmanuelasasasasawewweew   
20DanielLeguizamoLeguid   
21pinotaglialatelaportiere   
22pippozzplutotitolo   
23TakanaMidoriتستMs. Notes
24dwadadsadasddsadasda   
26YamamotoTakagi Mr. ......
27elkljlwwwknlDr.  
28ZZZZZZyyyyyy Dr. JKKK
31t443tgr4trt gf434 3y443y3
33ttertertertest   
34Amit Kumaryadavmr   
35jk goldenjkkk   
361xxxxxxxxxxxxxxxxsdsd   
37BillyBobTehe   
41HHH Mr HH
42sdfgsdfgsdfg   
43qwqqwqwq   
45aaa   
46bbbbbb   
47wrqewqweqweeqweqw   
48weqeqweqewqweqweq   
49wrqewqsdadasdsadasdasdasdsasdasdsaaaaaaaaaaaaa   
50HernanDarioDr.   
51JFGJ555FHJKJHFFHKHK   
52HernanDarioDr.   
53123123123   
54aaaadddd444uuuuuuu   
5512312312345   
56TestMeNow   
57aaddxasdsad   
58PaBas    
59ddddddddd   
60TestSmithSales   
61gersgrsergsergerg   
62aaa   
63TestTestTest   
64558548   
681e2e21ee21e2   
69111   
70sofiayoolyo   
72YGY   
73abbbasdsds   
This example demonstrates how to perform edit/update/delete/insert operations in RadGrid using an external form for this purpose.

The sample focuses on how to AJAX-enable a RadGrid control programmatically (when residing in a user control) and use the edit/add buttons in the grid individually (intercepting the ItemCreated server event of the control - see the RadAjaxManager -> Partial Ajaxificationdemo for reference). The sample also illustrates how to change the declaratively set AJAX settings for the update/delete/insert buttons from the external form to update the grid instance instead of the form itself. This is done by intercepting the OnAjaxSettingCreating event of the RadAjaxManager in which we determine the initiator of the AJAX request and change the updated control dynamically.

  • Click the Edit icon in a grid row to edit its date in an external form.
  • Click the 'Add new employee' button in the command item to insert a new grid row through an external form.
  • Delete grid items by either selecting a row and clicking the 'Delete selected employee' link at the top of the grid or choose to edit a row and then press the 'Delete' button from the external form.
  • defaultcs.aspx
  • EmployeesGridCS.ascx
  • defaultcs.aspx.cs
    • defaultcs.aspx.cs
    • EmployeesGridCS.ascx.cs
  • scripts.js
  • styles.css
<%@ Page Language="c#" CodeFile="defaultcs.aspx.cs" AutoEventWireup="false" 
    Inherits="Telerik.AjaxManager.ServerSideProgramming.DynamicAjaxSettings.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Src="EmployeesGridCS.ascx" TagName="EmployeesGrid" TagPrefix="uc1" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href='<%= HttpUtility.HtmlEncode(Page.ClientScript.GetWebResourceUrl(typeof(RadEditor), "Telerik.Web.UI.Skins.Editor.css")) %>'
        rel="stylesheet" type="text/css" />
    <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" />
    <div class="demo-container ">
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript" src="scripts.js"></script>
        </telerik:RadCodeBlock>

        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxSettingCreating="RadAjaxManager1_AjaxSettingCreating">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="btnSaveChanges">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="DivExternalForm" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="btnDelete">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="DivExternalForm" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>

        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />

        <telerik:RadWindowManager RenderMode="Lightweight" ID="RadWindowManager1" runat="server" />

        <uc1:EmployeesGrid ID="EmployeesGrid1" runat="server" />

        <div id="DivExternalForm" runat="server" class="editPanel">
            <asp:Panel ID="pnlExternalForm" runat="server" Visible="false">
                <table border="0" style="margin-top: 20px; width: 100%;">
                    <tr>
                        <td colspan="2">
                            <div class="buttonsContainer">
                                <telerik:RadButton RenderMode="Lightweight" ID="btnSaveChanges" Text="Save" runat="server" OnClientClicked="processUpdate"
                                    OnClick="SaveChanges_Click" />
                                <telerik:RadButton RenderMode="Lightweight" ID="btnDelete" OnClientClicked="processDelete" Text="Delete"
                                    runat="server" OnClick="Delete_Click" />
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 100px;">Employee ID:
                        </td>
                        <td>
                            <asp:Label ID="EmployeeID" runat="server" />
                        </td>
                    </tr>
                    <tr>
                        <td>Last name:
                        </td>
                        <td>
                            <telerik:RadTextBox RenderMode="Lightweight" ID="LastName" runat="server" />
                        </td>
                    </tr>
                    <tr>
                        <td>First name:
                        </td>
                        <td>
                            <telerik:RadTextBox RenderMode="Lightweight" ID="FirstName" runat="server" />
                        </td>
                    </tr>
                    <tr>
                        <td>Title:
                        </td>
                        <td>
                            <telerik:RadTextBox RenderMode="Lightweight" ID="Title" runat="server" />
                        </td>
                    </tr>
                    <tr>
                        <td>Title of courtesy:
                        </td>
                        <td>
                            <telerik:RadComboBox RenderMode="Lightweight" ID="TitleOfCourtesy" runat="server">
                                <Items>
                                    <telerik:RadComboBoxItem Text="" Value="" />
                                    <telerik:RadComboBoxItem Text="Dr." Value="Dr." />
                                    <telerik:RadComboBoxItem Text="Mr." Value="Mr." />
                                    <telerik:RadComboBoxItem Text="Mrs." Value="Mrs." />
                                    <telerik:RadComboBoxItem Text="Ms." Value="Ms." />
                                </Items>
                            </telerik:RadComboBox>
                        </td>
                    </tr>
                    <tr>
                        <td>Birth date:
                        </td>
                        <td>
                            <telerik:RadDatePicker RenderMode="Lightweight" ID="BirthDate" MinDate="01/01/1900" runat="server" />
                        </td>
                    </tr>
                    <tr>
                        <td style="vertical-align: top;">Notes:
                        </td>
                        <td style="height: 300px; vertical-align: top;">
                            <telerik:RadEditor RenderMode="Lightweight" ID="Notes" Width="400px" runat="server" Height="250px">
                                <Tools>
                                    <telerik:EditorToolGroup>
                                        <telerik:EditorTool Name="Italic" />
                                        <telerik:EditorTool Name="Bold" />
                                        <telerik:EditorTool Name="Underline" />
                                        <telerik:EditorTool Name="StrikeThrough" />
                                        <telerik:EditorTool Name="JustifyLeft" />
                                        <telerik:EditorTool Name="JustifyCenter" />
                                        <telerik:EditorTool Name="JustifyRight" />
                                        <telerik:EditorTool Name="JustifyFull" />
                                    </telerik:EditorToolGroup>
                                </Tools>
                            </telerik:RadEditor>
                        </td>
                    </tr>
                </table>
            </asp:Panel>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance