Home / Community & Support / Knowledge Base / RadControls for ASP.NET and ASP.NET AJAX / Grid / Ajaxifying particular controls in RadGrid template column with ajax manager

Ajaxifying particular controls in RadGrid template column with ajax manager

Article Info

Rating: 5

Article information

Article relates to

RadGrid
RadAjax

Created by

 Steve

Last modified

 March 06, 2008

Last modified by

 Stephen, Telerik


HOW-TO
Ajaxify particular controls in Radgrid template column with ajax manager


DESCRIPTION
Sometimes you may want to ajaxify particular controls (residing in template column of Radgrid) in order to update controls outside the grid without postback. The built-in AJAX mechanism of Radgrid can't be used in this case because it is limited to controls within the grid structure.

Note that the grid's AJAX should be switched off - only then the Radajax controls can ajaxify the designated controls inside the grid body.


SOLUTION
The most straight-forward solution is to ajaxify the whole grid. Here is a sample code:

  <rad:RadAjaxManager ID="RadAjaxManager1" runat="server"> 
            <AjaxSettings> 
                <rad:AjaxSetting AjaxControlID="RadGrid1"> 
                    <UpdatedControls> 
                        <rad:AjaxUpdatedControl ControlID="RadGrid1" /> 
                        <rad:AjaxUpdatedControl ControlID="TextBox" /> 
                    </UpdatedControls> 
                </rad:AjaxSetting> 
            </AjaxSettings> 
  </rad:RadAjaxManager> 

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. The manager settings can be added programmatically specifying each particular control which you want to ajaxify and/or update. The essential part is to attach the appropriate event(s) in which to apply the ajax settings. For Radgrid in this situation the proper place is the ItemCreated event handler.

The forthcoming code snippets are parts of a full working example. At the botton of the article you will also find a complete runnable application - all you need to do to test it is to add references to the RadAjax and RadGrid assemblies.

The grid in the sample contains one template and one button column. The ImageButtons in the template column are ajaxified by the ajax manager and the buttons in the GridButtonColumn start regular postbacks. Both the image and the oush buttons update text box outside of the grid.

  <asp:TextBox ID="TextBox1" runat="server" Width="400px" Text="not updated"></asp:TextBox> 
        <radA:radajaxmanager id="RadAjaxManager1" runat="server"> 
        </radA:radajaxmanager> 
        <radG:RadGrid ID="RadGrid1" DataSourceID="AccessDataSource1" AllowPaging="true" runat="server"> 
            <MasterTableView> 
                <Columns> 
                    <radG:GridTemplateColumn UniqueName="TemplateColumn"> 
                        <ItemTemplate> 
                            <asp:ImageButton ID="ImageButton1" CommandName="MyCommand" CommandArgument='<%# Eval("CustomerID") %>' 
                                runat="server" /> 
                        </ItemTemplate> 
                    </radG:GridTemplateColumn> 
                    <radG:GridButtonColumn FooterText="b" DataTextFormatString="Postback update" UniqueName="ButtonColumn" 
                        HeaderText="Button" CommandName="Test" CommandArgument='postback' DataTextField="CustomerID"> 
                    </radG:GridButtonColumn> 
                </Columns> 
            </MasterTableView> 
        </radG:RadGrid> 
        <asp:AccessDataSource ID="AccessDataSource1" DataFile="~/Grid/Data/Access/Nwind.mdb" 
            runat="server" SelectCommand="SELECT * FROM [Customers]"></asp:AccessDataSource> 

C#:

 protected void RadGrid1_ItemCommand(object source, Telerik.WebControls.GridCommandEventArgs e) 
    { 
        TextBox1.Text = string.Format("CommandName:{0}, CommandArgument:{1}", e.CommandName, e.CommandArgument); 
    } 
 
    protected void RadGrid1_ItemCreated(object sender, Telerik.WebControls.GridItemEventArgs e) 
    { 
        if (e.Item is GridDataItem) 
        { 
            GridDataItem item = (GridDataItem)e.Item; 
            ImageButton ImageButton1 = (ImageButton)item["TemplateColumn"].FindControl("ImageButton1"); 
            RadAjaxManager1.AjaxSettings.AddAjaxSetting(ImageButton1, TextBox1, null); 
        } 
    }  

VB:
 Protected Sub RadGrid1_ItemCommand(ByVal source As Object, ByVal e As Telerik.WebControls.GridCommandEventArgs) Handles RadGrid1.ItemCommand   
        TextBox1.Text = String.Format("CommandName:{0}, CommandArgument:{1}", e.CommandName, e.CommandArgument)   
    End Sub  
  
    Protected Sub RadGrid1_ItemCreated(ByVal sender As Object, ByVal e As Telerik.WebControls.GridItemEventArgs) Handles RadGrid1.ItemCreated   
        If TypeOf (e.Item) Is GridDataItem Then  
            Dim item As GridDataItem = CType(e.Item, GridDataItem)   
            Dim ImageButton1 As ImageButton = CType(item("TemplateColumn").FindControl("ImageButton1"), ImageButton)   
            RadAjaxManager1.AjaxSettings.AddAjaxSetting(ImageButton1, TextBox1, Nothing)   
        End If  
    End Sub  


 

Here is the code for Telerik's RadControls Prometheus:

   <asp:ScriptManager id="ScriptManager1" runat="server"> 
        </asp:ScriptManager> 
            <asp:TextBox ID="TextBox1" runat="server" Width="400px" Text="not updated"></asp:TextBox> 
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> 
            </telerik:RadAjaxManager> 
            <telerik:RadGrid ID="RadGrid1" DataSourceID="AccessDataSource1" AllowPaging="true" runat="server"> 
                <MasterTableView> 
                <Columns> 
                 <telerik:GridTemplateColumn UniqueName="TemplateColumn"> 
                        <ItemTemplate> 
                            <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/ajax-loader.gif" CommandName="MyCommand" CommandArgument='<%# Eval("CustomerID") %>'/> 
                        </ItemTemplate> 
                    </telerik:GridTemplateColumn> 
                    <telerik:GridButtonColumn FooterText="b" DataTextFormatString="Postback update" 
                        UniqueName="ButtonColumn" HeaderText="Button" CommandName="Test" CommandArgument='postback' 
                        DataTextField="CustomerID"> 
                    </telerik:GridButtonColumn> 
                    
                </Columns> 
                </MasterTableView> 
            </telerik:RadGrid> 
     
            <asp:AccessDataSource ID="AccessDataSource1" DataFile="~/Grid/Data/Access/Nwind.mdb" runat="server" 
                SelectCommand="SELECT * FROM [Customers]"></asp:AccessDataSource>  

C#

protected void RadGrid1_ItemCommand(object source, Telerik.Web.UI.GridCommandEventArgs e) 
{ 
    TextBox1.Text = string.Format("CommandName:{0}, CommandArgument:{1}", e.CommandName, e.CommandArgument); 
} 
 
protected void RadGrid1_ItemCreated(object sender, Telerik.Web.UI.GridItemEventArgs e) 
{ 
    if ((e.Item) is GridDataItem) 
    { 
        GridDataItem item = (GridDataItem)e.Item; 
        ImageButton ImageButton1 = (ImageButton)item("TemplateColumn").FindControl("ImageButton1"); 
        RadAjaxManager1.AjaxSettings.AddAjaxSetting(ImageButton1, TextBox1, null); 
    } 
} 


VB:

Protected Sub RadGrid1_ItemCommand(ByVal source As Object, ByVal e As Telerik.Web.UI.GridCommandEventArgs) Handles RadGrid1.ItemCommand 
        TextBox1.Text = String.Format("CommandName:{0}, CommandArgument:{1}", e.CommandName, e.CommandArgument) 
    End Sub 
 
    Protected Sub RadGrid1_ItemCreated(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles RadGrid1.ItemCreated 
        If TypeOf (e.Item) Is GridDataItem Then 
            Dim item As GridDataItem = CType(e.Item, GridDataItem) 
            Dim ImageButton1 As ImageButton = CType(item("TemplateColumn").FindControl("ImageButton1"), ImageButton) 
            RadAjaxManager1.AjaxSettings.AddAjaxSetting(ImageButton1, TextBox1, Nothing) 
        End If 
    End Sub 



Files

Comments

If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!

Please Sign In to rate this article.