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

[Acadia]

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>

 

[Sebastian]

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.

[Acadia]

Thanks that worked perfectly to set the grid as the initiator.