Hi Viktor, thanks for the response.

I'm using IE7 only for this Intranet Web Application. I have a WebDataGrid that is inside an Update Panel. I have a WebImageButton outside the Update Panel. I have a Trigger on the Update Panel that references the WebImageButton. The WebImageButton calls a server site event that refreshes the grid, which works nicely as you don't see a postback. The problem that I have is that I don't know how to kick off the Ajax Indicator on the WebDataGrid so that the user can see that the grid is busy updating (it does it automatically when I page, which is a custom pager template implemented with JavaScript and Server Side events). I was thinking that I could do this with JavaScript or jQuery.

I hope this makes sense. Any help on this would be greatly appreciated.

Thanks
Dave

Hi Dave,

I am not sure how jquery can help you to solve that task. The only suggestion I can give you is to process events of UpdatePanel and show/hide your indicator or whatever prompt you would like to have.

In case of WebDataGrid or any other Infragistics.Web.UI control, you may reuse the built-in shared indicator, which can be obtained by get_ajaxIndicator() member method. I wrote for you an example which uses request events of UpdatePanel, processes them on WebImageButton click and shows indicator inside of WebDataGrid located in UpdatePanel. Similar handlers (with same names) for UpdatePanels are used by igTab.js of WebTab control, but they have better validations for states of triggers and targets. So, you may look at logic of that file too.

<script type="text/javascript">
function WebImageButton1_Click(oButton, oEvent)
{
 _doAjax();
}
var _ajax;
function _doAjax()
{
 var rm = Sys.WebForms.PageRequestManager.getInstance();
 _clearAjax(rm);
 _ajax = true;
 /* add ajax event handlers */
 rm.add_beginRequest(_beginAjax);
 rm.add_endRequest(_endAjax);
 /* trigger async postback for UpdatePanel where id-trigger is located */
// __doPostBack('idOfAnyHtmlElementInUpdatePanel', '');
}
function _beginAjax(rm, args)
{
 if (!_ajax)
  return;
 //var elem = args.get_postBackElement();
 _doIndicator(true);
}
/* event called by PageRequestManager.endRequest */
function _endAjax(rm, args)
{
 if (!_ajax)
  return;
 _clearAjax(rm);
}
/* clear events handler from PageRequestManager */
function _clearAjax(rm)
{
 if (!_ajax)
  return;
 if (!rm)
  rm = Sys.WebForms.PageRequestManager.getInstance();
 if (!rm)
  return;
 _doIndicator();
 _ajax = null;
 rm.remove_beginRequest(_beginAjax);
 rm.remove_endRequest(_endAjax);
}
function _doIndicator(show)
{
 var grid = $find('<%=WebDataGrid1.ClientID%>');
 if (!grid)
 {
  alert((show ? 'Start AJAX' : 'End AJAX') + '\nImplement your indicator');
  return;
 }
 var ai = grid.get_ajaxIndicator();
 if (!ai)
  return;
 if (show)
 {
  ai.setRelativeContainer(grid.get_element());
  ai.show();
 }
 else
  ai.hide();
}

</script>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
   <ContentTemplate>
    <ig:WebDataGrid ID="WebDataGrid1" runat="server"></ig:WebDataGrid>
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
   </ContentTemplate>
   <Triggers>
   <asp:AsyncPostBackTrigger ControlID="WebImageButton1" />
   </Triggers>
</asp:UpdatePanel>
<igtxt:WebImageButton ID="WebImageButton1" runat="server" Text="Async">
   <ClientSideEvents Click="WebImageButton1_Click" />
</igtxt:WebImageButton>

Hi Viktor,

This is exactly what I was looking to do so thanks so much for the code. I didn't need to actually call the __postBack because the Refresh button is set to AutoPostBack anyway.

Thanks
Dave