I have a RadGrid with sorting / paging / filtering enabled. While any of these operations are performed, the RadGrid should be greyed out with loading circle displayed and prevent the user to click anything inside the Radgrid.
To keep short, I am trying to achieve the exact behaviour which is demonstrated in the link below:
<form>
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Width="950px">
<telerik:RadAjaxManager runat="server" ID="RadAjaxManager2" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="rgrdViewAnotherAccount">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="rgrdViewAnotherAccount"></telerik:AjaxUpdatedControl>
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="btnClearFilter">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="rgrdViewAnotherAccount"></telerik:AjaxUpdatedControl>
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel runat="server" Transparency="50" ID="RadAjaxLoadingPanel1">Loading</telerik:RadAjaxLoadingPanel>
<div style="height: 20px;float:right;white-space:nowrap">
<asp:Button ID="btnClearFilter" runat="server" Text="CLEAR FILTER" OnClick="btnClearFilter_Click" />
<a class="tooltipclose" style="display: inline-block;" title="Close" href="javascript:void(0)" onclick="toggleviewaccounts()"></a>
</div>
<br /><br />
<p style="display:block">To <a class="tooltip" href="javascript:void(0)" title='<asp:Literal runat="server" Text="<%$ Resources: ToolTips, overview.viewanotheraccount.sort%>" />'>sort</a> the list, click the desired column heading.
To <a class="tooltip" href="javascript:void(0)" title='<asp:Literal runat="server" Text="<%$ Resources: ToolTips, overview.viewanotheraccount.filter%>" />'>filter</a> the list, enter a value in the desired
column and click the Filter icon</p>
<telerik:RadGrid runat="server" Width="950px" ID="rgrdViewAnotherAccount" AutoGenerateColumns="false" AllowPaging="true" AllowSorting="true"
AllowFilteringByColumn="true" Height="417px" OnItemCommand="rgrdViewAnotherAccount_ItemCommand" OnItemDataBound="rgrdViewAnotherAccount_ItemDataBound" OnNeedDataSource="rgrdViewAnotherAccount_NeedDataSource" CssClass="rgNoScrollImage">
<MasterTableView DataKeyNames="ListIndex" AllowFilteringByColumn="true" CommandItemDisplay="Top">
<PagerStyle AlwaysVisible="true" />
<FilterItemStyle HorizontalAlign="Left" />
<CommandItemSettings ShowRefreshButton="false" ShowAddNewRecordButton="false"/>
<Columns>
<telerik:GridTemplateColumn HeaderText="ACCOUNT #" HeaderStyle-Wrap="false" DataField="Account" SortExpression="Account" AutoPostBackOnFilter="true" AllowFiltering="True" CurrentFilterFunction="Contains"
ShowFilterIcon="true">
<ItemTemplate>
<asp:LinkButton ID="lnkbtnSelectAccount" CausesValidation="false" runat="server"
CommandName="Select" CommandArgument='<%#Eval("Account")%>' Text='<%#Eval("Account")%>' >
</asp:LinkButton>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Left" Width="200px" />
<ItemStyle HorizontalAlign="Left" Width="200px" />
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn HeaderText="NAME" FilterControlWidth="200px" SortExpression="FULL_COMPANYNAME" DataField="FULL_COMPANYNAME"
UniqueName="NAME" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"
ShowFilterIcon="true">
<HeaderStyle HorizontalAlign="Left" />
<ItemStyle HorizontalAlign="Left" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn FilterControlWidth="105px" HeaderText="ADDRESS" SortExpression="FULL_ADDRESS"
UniqueName="ADDRESS" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" DataField="FULL_ADDRESS"
ShowFilterIcon="true">
<HeaderStyle HorizontalAlign="Left" Width="200px" />
<ItemStyle HorizontalAlign="Left" Width="200px"/>
</telerik:GridBoundColumn>
<telerik:GridTemplateColumn HeaderText="MY DEFAULT" SortExpression="DefaultAccount" AllowFiltering="false" ShowFilterIcon="false">
<ItemTemplate>
<%#Eval("DefaultAccount")%>
<span class="<%#Eval("MakeDefault")%>">
<asp:LinkButton ID="lnkbtnMakeDefaultAccount" CausesValidation="false" runat="server"
CommandName="Default" CommandArgument='<%#Eval("Account")%>' OnCommand="lnkbtnMakeDefault_OnCommand" >Make Default</asp:LinkButton>
</span>
</ItemTemplate>
<HeaderStyle Width="105px" />
<ItemStyle Width="105px" />
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn FilterControlWidth="105px" DataField="Status" HeaderText="STATUS" SortExpression="Status"
UniqueName="Status" AllowFiltering="false">
<HeaderStyle HorizontalAlign="Left" Width="100px" />
<ItemStyle HorizontalAlign="Left" Width="100px" />
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
<GroupingSettings CaseSensitive="false"/>
<ClientSettings>
<Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="false">
</Scrolling>
<Selecting AllowRowSelect="false" />
</ClientSettings>
</telerik:RadGrid>
<br />
<br />
</telerik:RadAjaxPanel>
</form>