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

Dynamic AjaxSettings

Next database reset in 0 hours, 15 minutes, 18 seconds
     Add new employee                    Delete selected employee                    Refresh employees list
24Jim5Check out the designdsadasdaDr.  
27elkljlwww12knlDr.  
33ttertertermejia   
34Am3 Kumaryadavrrrr   
35jk goldenttttttttttGolden   
361xxxxxxxxxxxxxxxxsdsd   
37BillyBobTehe   
41HHH Mr HH
42sdfgsdfgsdfg   
43qwqqwqAAwq   
45aaa   
46bbbbGbb   
47wrqewqweqweeqweqw   
48weqeqweqewqweqweq   
49wrqewqsdadasdsadasdasdasdsasdasdsaaaaaaaaaaaaa   
50HernanDarioDr.   
51JFGJ555FHJKJHFFHKHK   
52HernanDarioDr.   
53123123123   
54aaaadddd444uuuuuuu   
5512312312345   
56TestaMeNow   
57aaddxasdsad   
58PaBas    
59ddddddddd   
60TestSmithSales   
62aaa   
63TestTestTest   
64558548   
681e2e21ee21e2   
693411   
70sofiayoolyo   
72YGY   
73abmy title   
75aaaaaaaaaaa   
78testtesttest   
79testtesttest   
80pkpjg   
82111   
83pk111   
84adb   
85111   
86jjj   
87aaaacccccqqqqq   
882222222222   
89FDSGDSFGSDFGSDFGFDSDFGFGFGDFads   
90BillyBobfriend   
91thTestr   
92ggghhh Dr.  
93111   
94asdassasdasdaASAsda   
95asdasddasdadasda   
96dasdadasdasdadsa   
97ttttttt   
98Cm n en jNo nbvEl JVC   
99sfádasáda   
1022323 Mr.  
103232323   
10452312112   
1051212121212   
106miguel111111   
107asdasdasd   
108asda asdaasd    
109aaa   
110daniginanjarST   
111aaaaabbbbbcccccd   
112xxxxxx   
113jamesedwardHello   
114MyNameHello   
116JoeTester Admin  
11813231231fffggg   
119lrll   
120fff   
121eqwhkheqjkehjqwioqwu   
122EdSmithFriend   
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.
  • defaultvb.aspx
  • EmployeesGridVB.ascx
  • defaultvb.aspx.vb
    • defaultvb.aspx.vb
    • EmployeesGridVB.ascx.vb
  • scripts.js
  • styles.css
<%@ Page Language="vb" CodeFile="defaultvb.aspx.vb" AutoEventWireup="false" 
    Inherits="Telerik.AjaxManager.ServerSideProgramming.DynamicAjaxSettings.DefaultVB" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Src="EmployeesGridVB.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(Telerik.Web.SkinRegistrar.GetWebResourceUrl(Page,GetType(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