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

Grey out RadGrid when sort/filter with RadAjaxLoadingPanel

1 Answer 165 Views

General Discussions

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

Rajesh asked on 14 Feb 2014, 06:23 PM

Hi ,

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:
http://demos.telerik.com/aspnet-ajax/controls/examples/integration/persisting-grid-settings/defaultcs.aspx?product=grid

How can I achieve this by just customizing RadAjaxLoadingPanel

Below is my code

<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 />

</telerik:RadAjaxPanel>

</form>

1 Answer, 1 is accepted

answered on 15 Feb 2014, 05:59 AM

Hi Rajesh,

It is not recommended to use RadAjaxPanel and RadAjaxManager together. Please use either one. To have the loading panel, please try setting its Skin property. Have a look at the following code snippet:

ASPX:

<telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Default">

</telerik:RadAjaxLoadingPanel>

<telerik:RadAjaxPanel ID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1" runat="server">

<telerik:RadGrid runat="server" ID="rgrdViewAnotherAccount">

. . .

</telerik:RadGrid>

</telerik:RadAjaxPanel>

Thanks,
Shinu