This is a migrated thread and some comments may be shown as answers.

How do I trigger ajax for my grid when clicking a CommandItemTemplate button within the grid?

2 Answers 162 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Acadia
Top achievements
Rank 1
Iron
Acadia asked on 06 Feb 2009, 10:03 PM
I have a grid and within its CommandItemTemplate I have a Save button.  When I click that button I want the grid to update with AJAX, which it does, but for some reason the LoadingPanel I have assigned to the grid in my AjaxManager does not show.  There's not visible postback and the grid updates, but the loadingpanel icon doesn't show.  Why not?  It shows up everywhere else and even shows for the grid when it is triggered by a button outside of the CommandItemTemplate.

Any help on this would be appreciated as I have several ways I would like to apply this.  Thanks!

 

<CommandItemTemplate>

 

 

<div id="DivUA" runat="server" style="padding-top: 5px; padding-bottom: 5px">

 

 

<table>

 

 

<tr>

 

 

<td>

 

 

<asp:Button runat="server" ID="btnUA" Text="Save" ToolTip="Save all changes you've made to the data"

 

 

Width="70px" CommandName="UpdateAll" CssClass="CommandButton" />
</
td>

 

 

</tr>

 

 

</table>

 

 

</div>

 

 

</CommandItemTemplate>

 



<

telerik:RadAjaxManager ID="ram1" runat="server">

 

 

<AjaxSettings>

 

 

<telerik:AjaxSetting AjaxControlID="btnUA">

 

 

 

 

<UpdatedControls>

 

 

 

 

<telerik:AjaxUpdatedControl ControlID="rgT" LoadingPanelID="loader1"></telerik:AjaxUpdatedControl>

 

 

 

 

<telerik:AjaxUpdatedControl ControlID="lblrgTLoad" LoadingPanelID="loader1"></telerik:AjaxUpdatedControl>

 

 

 

 

<telerik:AjaxUpdatedControl ControlID="lblUpdMsg"></telerik:AjaxUpdatedControl>

 

 

 

 

</UpdatedControls>

 

 

 

 

</telerik:AjaxSetting>

 

</

telerik:RadAjaxManager>

 

 

<telerik:RadAjaxLoadingPanel ID="loader1" runat="server" Height="75px" radcontrolsdir="../RadControls/"

 

 

 

 

Width="75px">

 

 

 

 

<img alt="Processing..." src="../RadControls/Ajax/Skins/Default/loading6.gif" style="background-color: Transparent" />

 

 

 

 

</telerik:RadAjaxLoadingPanel>

 

2 Answers, 1 is accepted

Sort by
0
Accepted
Sebastian
Telerik team
answered on 09 Feb 2009, 05:37 PM
Hi Acadia,

The reason for the discrepancy is that the id of the button which resides inside the command item is different (consists of the id of its naming containers - RadGrid and the GridCommandItem object plus its actual id). That is why if you define it with the following ajax setting:

<AjaxSettings> 
   <telerik:AjaxSetting AjaxControlID="btnUA"
    <UpdatedControls> 
      <telerik:AjaxUpdatedControl ControlID="rgT" LoadingPanelID="loader1">   
</telerik:AjaxUpdatedControl>  

the ajax manager will not find a control with such id on the page and display a loading panel when it triggers form submit.

The solution is either to set the grid itself as an initiator of the ajax request, namely:

<AjaxSettings>  
   <telerik:AjaxSetting AjaxControlID="rgT">  
    <UpdatedControls>  
      <telerik:AjaxUpdatedControl ControlID="rgT" LoadingPanelID="loader1">    
</telerik:AjaxUpdatedControl>   

or intercept the ItemCreated event of the grid, find the button by its id when e.Item is GridCommandItem and add ajax setting for the button dynamically. How to find controls inside the RadGrid command item programmatically you can see from this topic from the documentation.

Best regards,
Sebastian
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Acadia
Top achievements
Rank 1
Iron
answered on 10 Feb 2009, 06:05 PM
Thanks that worked perfectly to set the grid as the initiator.
Tags
Grid
Asked by
Acadia
Top achievements
Rank 1
Iron
Answers by
Sebastian
Telerik team
Acadia
Top achievements
Rank 1
Iron
Share this question
or