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

Grey out RadGrid when sort/filter with RadAjaxLoadingPanel

1 Answer 160 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Rajesh
Top achievements
Rank 1
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 />
                                             <br />            
                                         
                                  </telerik:RadAjaxPanel>
                                  </form>

1 Answer, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
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
Tags
General Discussions
Asked by
Rajesh
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Share this question
or