RadAjaxLoadingPanel not displaying on RadGrid Filter

[Eric]

I modified the RADGrid Basic Filtering demo very slightly to try it out inside a content page. Very little changed other than that I simplified the grid to one column and changed data to be set using the OnNeedsDatasource event.... The grid loads and filters the data but I never see the RADAJAXLoadingPanel. The first time I run it I sometimes see the panel for a tenth of a second but it goes away while the code is still processing ( I put a threading.thread.sleep on the Page load event to be sure). Any clue what I'm doing wrong. I would like it to work like the demo. Listed below is my code:

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="WebForm2.aspx.vb" Inherits="_3POC.WebForm2" %>
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <!-- content start -->
    <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
    </asp:ScriptManagerProxy>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Vista" ></telerik:RadAjaxLoadingPanel>

        <telerik:RadCodeBlock runat="server" ID="radCodeBlock">
            <script type="text/javascript">
                function showFilterItem() {
                    $find('<%=RadGrid1.ClientID %>').get_masterTableView().showFilterItem();
                }
                function hideFilterItem() {
                    $find('<%=RadGrid1.ClientID %>').get_masterTableView().hideFilterItem();
                }
            </script>
        </telerik:RadCodeBlock>

        <div>
            Show filtering item <input id="Radio1" type="radio" runat="server" name="showHideGroup" checked="true" onclick="showFilterItem()" /><label for="Radio1">Yes</label>
            <input id="Radio2" type="radio" runat="server" name="showHideGroup" onclick="hideFilterItem()"/><label for="Radio2" >No</label>
        </div>
        <br/>
        <telerik:RadGrid AutoGenerateColumns="false" ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource"
            Width="760px" AllowFilteringByColumn="True" AllowSorting="True"
            PageSize="15" ShowFooter="True" AllowPaging="True" runat="server"
            GridLines="None" EnableLinqExpressions="false" >
            <PagerStyle Mode="NextPrevAndNumeric" />
            <GroupingSettings CaseSensitive="false" />
            <MasterTableView AutoGenerateColumns="false" EditMode="InPlace" AllowFilteringByColumn="True"
                ShowFooter="True" TableLayout="Auto">
                <Columns>

                                                <telerik:GridBoundColumn ItemStyle-Width="100%" DataField="FieldName" ShowFilterIcon="false" AllowFiltering="true" CurrentFilterFunction="StartsWith"
                                                    UniqueName="column" AutoPostBackOnFilter="true" FilterDelay="2000">
                                                </telerik:GridBoundColumn>
                                            </Columns>

            </MasterTableView>
            <ClientSettings>
                <Scrolling AllowScroll="false" />
            </ClientSettings>
        </telerik:RadGrid>
        <br />
        <asp:Button Text="PostBack" runat="server" ID="Button1" CssClass="button" style="margin:0 20px 0;" />
            Click "PostBack" to see the state of the grid is preserved.



</asp:Content>

[Pavlina]

Hi Eric,

I followed your scenario and prepared a sample project that is working as expected. Please give it a try and let me know if it works for you or you need further assistance.

Regards,
Pavlina
the Telerik team

[Chandan Dey]

Hi,

I tried your suggestion and it made no difference.

In my tekerik rad grid the telerik RadAjaxLoadingPanel not showing.
My requrement I have a Button & a Rad Grid when user click on button the RadAjaxLoadingPanel loading circle want to show and when user click rad grid header column RadAjaxLoadingPanel loading circle also show. But in my application its not happening.
Please advice. I am using trial version of "Telerik.Web.UI_2011_1_413_Dev".
One more thing if I use "telerik:RadAjaxPanel" there is a JavaScript error (Microsoft JScript runtime error: Unable to set value of the property 'control': object is null or undefined).

I am sending you my test code.
I am using master page.

<%@ Page Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="TestPage.aspx.cs" Inherits="Test.TestPage" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>


<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<%--<script language="javascript" type="text/javascript">
    var currentLoadingPanel = null;
    var currentUpdatedControl = null;
    function RequestStart(sender, args) {
        currentLoadingPanel = $find("<%= RadAjaxLoadingPanel1.ClientID%>");


        if (args.get_eventTarget() == "<%= rgOrderDetails.UniqueID %>") {


            currentUpdatedControl = "<%= rgOrderDetails.ClientID %>";
            //show the loading panel over the updated control 
            currentLoadingPanel.show(currentUpdatedControl);
        }
    }
    function ResponseEnd() {
        //hide the loading panel and clean up the global variables 
        if (currentLoadingPanel != null) {
            currentLoadingPanel.hide(currentUpdatedControl);
        }
        currentUpdatedControl = null;
        currentLoadingPanel = null;
    } 
</script>--%>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div id="divCurrentOpenWorkOrders">
        <%--<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" >--%>
            <br /><br />
            <span class="PageTitle">Current Open Work Orders</span>
            <br /><br />
            <table width="78%">
                <tr>
                    <td align="left">
                        <telerik:RadButton ID="btnAddNew" runat="server" Text="Add New" OnClick="btnAddNew_Click"></telerik:RadButton>
                    </td>
                    <td align="right">
                        <asp:Label ID="lblFilter" runat="server" Text="Filter by Status :"></asp:Label>
                    </td>
                    <td align="left">
                        <telerik:RadComboBox ID="cmbStatus" runat="server" onselectedindexchanged="cmbStatus_SelectedIndexChanged" AutoPostBack="true">
                            <Items>
                                <telerik:RadComboBoxItem Value="0" Text="All" />
                                <telerik:RadComboBoxItem Value="1" Text="Open" />
                                <telerik:RadComboBoxItem Value="2" Text="Complete" />
                            </Items>
                        </telerik:RadComboBox>
                        
                    </td>
                </tr>
                <tr>
                    <td style="height:5px;"></td>
                </tr>
            </table>
            <div id="divOrderDetails">
                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                    <AjaxSettings>
                        <telerik:AjaxSetting AjaxControlID="rgOrderDetails">
                            <UpdatedControls>
                                <telerik:AjaxUpdatedControl ControlID="rgOrderDetails" LoadingPanelID="RadAjaxLoadingPanel1" />
                            </UpdatedControls>
                        </telerik:AjaxSetting>
                        <telerik:AjaxSetting AjaxControlID="btnAddNew">
                            <UpdatedControls>
                                <telerik:AjaxUpdatedControl ControlID="RadAjaxLoadingPanel1" />
                            </UpdatedControls>
                        </telerik:AjaxSetting>
                    </AjaxSettings>
                </telerik:RadAjaxManager>


                <telerik:RadGrid ID="rgOrderDetails" runat="server" AllowSorting="true" AllowPaging="true" PageSize="10" AutoGenerateColumns="false" Skin="WebBlue" OnItemCommand="rgOrderDetails_ItemCommand" OnItemDataBound="rgOrderDetails_ItemDataBound" oninit="rgOrderDetails_Init1" onitemcreated="rgOrderDetails_ItemCreated">
                    <HeaderStyle CssClass="dg_font" />
                    <ItemStyle CssClass="dg_font" />
                    <AlternatingItemStyle CssClass="dg_font" />
                    <MasterTableView DataKeyNames="WorkOrderNo" AutoGenerateColumns="false" >
                        <Columns>
                            <telerik:GridHyperLinkColumn DataNavigateUrlFields="WorkOrderNo, CustomerName, BuildingName" UniqueName="WorkOrderNo" HeaderText="Work Order No." DataTextField="WorkOrderNo" DataTextFormatString="<u>{0}</u>" SortExpression="WorkOrderNo" DataNavigateUrlFormatString="WorkOrderEquipment.aspx?wo={0}&amp;cn={1}&amp;bn={2}&amp;" >
                            </telerik:GridHyperLinkColumn>
                            <telerik:GridTemplateColumn HeaderText="Date" SortExpression="OrderDate" >
                                <ItemTemplate>
    <%# (System.Convert.ToDateTime(DataBinder.Eval(Container.DataItem, "OrderDate"))).ToString("MMM dd, yyyy")%>
    </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridBoundColumn DataField="Customer" HeaderText="Customer" UniqueName="Customer" ></telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="Type" HeaderText="Type" UniqueName="Type" ></telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="StatusText" HeaderText="StatusText" UniqueName="StatusText" Visible="false"></telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="Status" HeaderText="Status" UniqueName="Status" ></telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="Building" HeaderText="Building" UniqueName="Building" ></telerik:GridBoundColumn>
                            <telerik:GridTemplateColumn HeaderText="" Visible="false">
                                <ItemTemplate>
    <asp:LinkButton id="lnkView" runat="server" Text="View" CausesValidation="false" CommandName="Select" >View</asp:LinkButton>
    </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridBoundColumn DataField="CustomerName" HeaderText="CustomerName" UniqueName="CustomerName" Visible="false" ></telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="BuildingName" HeaderText="BuildingName" UniqueName="BuildingName" Visible="false" ></telerik:GridBoundColumn>
                        </Columns>
                    </MasterTableView>
                </telerik:RadGrid>
                <%--<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="" IsSticky="true" MinDisplayTime="1000" Width="256px" Height="64px" EnableSkinTransparency="false">--%>
                    <%--<div class="loading">
                        <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/loading5.gif" AlternateText="loading" />
                    </div>--%>
                <%--</telerik:RadAjaxLoadingPanel>--%>
                <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Skin="Default" InitialDelayTime="0" MinDisplayTime="1000" EnableSkinTransparency="false" runat="server"></telerik:RadAjaxLoadingPanel>
            </div>
            <div class="div_footer"></div>
        <%--</telerik:RadAjaxPanel>--%>
    </div>
</asp:Content>


Thanks,
Chandan

[Pavlina]

Hi Chandan Dey,

I already answered your other ticket with the same questions. To avoid duplicate posts I suggest that we continue our communication there.

Kind regards,
Pavlina
the Telerik team