Grey out RadGrid when sort/filter with RadAjaxLoadingPanel

2 posts, 0 answers
  1. Rajesh
    Rajesh avatar
    6 posts
    Member since:
    Apr 2013

    Posted 14 Feb 2014 Link to this post

    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>
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 14 Feb 2014 in reply to Rajesh Link to this post

    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
Back to Top