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

Dynamic AjaxSettings

Next database reset in 0 hours, 39 minutes, 18 seconds
     Add new employee                    Delete selected employee                    Refresh employees list
27SERGIOasfsfsdfsyyy5555Dr. fff
37Billy0000fBobfpfdfdfffffffffffTehexxxfffffffffffff   
41HHH Mr HH
84adb   
95asdasddasdadasda   
116JoeTester Admin  
125tgiuhuhuhoi Mr.  
126asdasd asd asd
127asdasd asd asd
128asd2asd2 asd asd2
130asdfasdafdasd fasdfas fasdfasdf
134dsasad happysda   
1421134_1 Dr.  
144joshjosh joshy josk
145lllkkkxxxxMs.  
149ejemploejemplo    
1512222 22 22
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