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

Ajaxify Particular Templated GridView Buttons with AjaxManager


Product Progress® Telerik® UI for ASP.NET AJAX AjaxManager


How can I ajaxify specific controls, residing in the template column of the GridView control, to update other controls, for example, outside of the GridView, without a postback?


To achieve the desired scenario, ajaxify the whole GridView.

<asp:ScriptManager ID="ScriptManager" runat="server" />
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <telerik:AjaxSetting AjaxControlID="GridView1">
                <telerik:AjaxUpdatedControl ControlID="GridView1" />
                <telerik:AjaxUpdatedControl ControlID="TextBox" />

However, you may need another column to make regular postbacks or even the rest of the actions to trigger standard postback requests.

This is when the RadAjaxManager comes into place. You can add the manager settings programmatically and specify each particular control which you want to ajaxify or update. The essential part is to attach the appropriate event or events in which to apply the Ajax settings. For the GridView in this scenario, the proper place is the Row_PreRender event handler.

The GridView in the sample contains one template and one button column. The ImageButtons in the template column are ajaxified by the AjaxManager and the buttons in the ButtonField start regular postbacks. Both the image and the push buttons update the text box outside of the GridView.

<asp:TextBox ID="TextBox1" runat="server" Width="400px" Text="not updated"></asp:TextBox>
<asp:ScriptManager ID="ScriptManager" runat="server" />
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<asp:GridView ID="GridView1" DataSourceID="AccessDataSource1" AllowPaging="true"
                <asp:TemplateField HeaderText="TemplateField">
                        <asp:ImageButton ID="ImageButton1" CommandName="MyCommand" CommandArgument='<%# Eval("CustomerID") %>'
                            ImageUrl="arrow.gif" runat="server" />
                <asp:ButtonField ButtonType="Button" HeaderText="ButtonField" CommandName="Test"
                    Text="Button" ImageUrl="arrow.gif" />
<asp:AccessDataSource ID="AccessDataSource1" DataFile="~/Grid/Data/Access/Nwind.mdb"
    runat="server" SelectCommand="SELECT * FROM [Customers]"></asp:AccessDataSource>

protected void GridView1_RowCreated(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e)
    if (e.Row.RowType == DataControlRowType.DataRow)
            e.Row.PreRender += new System.EventHandler(Row_PreRender);

protected void GridView1_RowCommand(object sender, System.Web.UI.WebControls.GridViewCommandEventArgs e)
    TextBox1.Text = string.Format("CommandName:{0}, CommandArgument:{1}", e.CommandName, e.CommandArgument);

protected void Row_PreRender(object sender, System.EventArgs e)
    ImageButton ImageButton1 = ((ImageButton)(((Control)(sender)).FindControl("ImageButton1")));
    RadAjaxManager1.AjaxSettings.AddAjaxSetting(ImageButton1, TextBox1);

Protected Sub GridView1_RowCreated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowCreated
            If e.Row.RowType = DataControlRowType.DataRow Then
                AddHandler e.Row.PreRender, AddressOf Row_PreRender
            End If
End Sub

Protected Sub GridView1_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) Handles GridView1.RowCommand
            TextBox1.Text = String.Format("CommandName:{0}, CommandArgument:{1}", e.CommandName, e.CommandArgument)
End Sub

Protected Sub Row_PreRender(ByVal sender As Object, ByVal e As System.EventArgs)
            Dim ImageButton1 As ImageButton = CType(CType(sender, Control).FindControl("ImageButton1"), ImageButton)
            RadAjaxManager1.AjaxSettings.AddAjaxSetting(ImageButton1, TextBox1)
End Sub

See Also

In this article