AjaxLoadingPanel not closing when issuing args.set_enableAjax(false);

[Steve]

I have a RadGrid that exports to a PDF. In order for the export to work, I need to issue the args.set_enableAjax(false); in javascript for the postback to happen. The problem is, the Loading Panel isn't closing. I'm left with the spinning image and a disabled grid.

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        var radWindow1 = null;
        var radGrid1 = null;

        Sys.Application.add_load(documentReady);
        function documentReady() {
            radGrid1 = $find("<%= RadGrid1.ClientID %>");
            }
        function onRequestStart(sender, args) {
            if (args.get_eventTarget().indexOf("ExportToPdf") >= 0)
                args.set_enableAjax(false);
        }
    </script>
</telerik:RadCodeBlock>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" ClientEvents-OnRequestStart="onRequestStart">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

Anyone know how to fix this?

[Shinu]

Hi Steve,

Unfortunately I couldn't replicate the issue at my end. Please have a look into the sample code snippet which works fine at my end.

ASPX:

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Black">
</telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1"
    ClientEvents-OnRequestStart="requestStart">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadGrid1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadGrid ID="RadGrid1" runat="server" GridLines="None" DataSourceID="SqlDataSource1"
    AutoGenerateColumns="False">
    <ExportSettings IgnorePaging="true" OpenInNewWindow="true">
    </ExportSettings>
    <MasterTableView CommandItemDisplay="Top" DataSourceID="SqlDataSource1" DataKeyNames="OrderID">
        <CommandItemTemplate>
            <asp:Button ID="DownloadPDF" Text="ExportToPdf" runat="server" Width="100%" CommandName="ExportToPdf">
            </asp:Button>
        </CommandItemTemplate>
        <Columns>
            <telerik:GridBoundColumn DataField="OrderID" UniqueName="OrderID" HeaderText="Menu;">
            </telerik:GridBoundColumn>
            <telerik:GridTemplateColumn DataField="ShipName" HeaderText="Name" SortExpression="ShipName"
                UniqueName="ShipName">
                <ItemTemplate>
                    <table style="width: 170px;">
                        <colgroup>
                            <col />
                        </colgroup>
                        <tr align="center">
                            <td>
                                <asp:Label ID="Label1" runat="server" Text='<%# Eval("ShipName") %>'></asp:Label>
                            </td>
                        </tr>
                        <tr align="center">
                            <td>
                                <asp:Label ID="Label2" runat="server" Text='<%# "[ " + Eval("ShipCountry") + " ]" %>'></asp:Label>
                            </td>
                        </tr>
                    </table>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

JavaScript:

<script type="text/javascript">
    function requestStart(sender, args) {
        if (args.get_eventTarget().indexOf("DownloadPDF") > 0)
            args.set_enableAjax(false);
    }
</script>

Hope this will helps you.
Thanks,
Shinu.

[Steve]

Thanks Shinu, but it's still not working.

I'm wondering if it's the button itself that may be causing the problem.
I had to add an image button programmatically into the footer of the grid.

This is the logic in the code behind:

Protected Sub RadGrid1_ItemCreated(sender As Object, e As GridItemEventArgs)
    If TypeOf e.Item Is GridFooterItem Then
        Dim footerItem As GridFooterItem = DirectCast(e.Item, GridFooterItem)
        Dim btn As New ImageButton
        btn.ImageUrl = "../Images/application_pdf.gif"
        btn.Height = 16
        btn.Width = 16
        btn.ID = "ExportToPdf"
        btn.CommandName = "ExportToPdf"
        AddHandler btn.Click, AddressOf btnPDFClick
        footerItem.Cells(2).Controls.Add(btn)
    End If
End Sub


Private Sub btnPDFClick(sender As Object, e As ImageClickEventArgs)
    RadGrid1.ClientSettings.Scrolling.AllowScroll = False
    RadGrid1.ClientSettings.Scrolling.UseStaticHeaders = False
    RadGrid1.MasterTableView.ExportToPdf()

End Sub

I'll open a ticket with support and see what they say.
Thanks!

[Shinu]

Hi Steve,

Please have a look into the full code snippet which works fine at my end.

ASPX:

<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Black">
        </telerik:RadAjaxLoadingPanel>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1"
            ClientEvents-OnRequestStart="requestStart">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadGrid ID="RadGrid1" runat="server" GridLines="None" DataSourceID="SqlDataSource1"
            AutoGenerateColumns="False" OnItemCreated="RadGrid1_ItemCreated1" ShowFooter="true">
            <ExportSettings IgnorePaging="true" OpenInNewWindow="true">
            </ExportSettings>
            <MasterTableView CommandItemDisplay="Top" DataSourceID="SqlDataSource1" DataKeyNames="OrderID">
                <Columns>
                    <telerik:GridBoundColumn DataField="OrderID" UniqueName="OrderID" HeaderText="Menu;">
                    </telerik:GridBoundColumn>
                    <telerik:GridTemplateColumn DataField="ShipName" HeaderText="Name" SortExpression="ShipName"
                        UniqueName="ShipName">
                        <ItemTemplate>
                            <table style="width: 170px;">
                                <colgroup>
                                    <col />
                                </colgroup>
                                <tr align="center">
                                    <td>
                                        <asp:Label ID="Label1" runat="server" Text='<%# Eval("ShipName") %>'></asp:Label>
                                    </td>
                                </tr>
                                <tr align="center">
                                    <td>
                                        <asp:Label ID="Label2" runat="server" Text='<%# "[ " + Eval("ShipCountry") + " ]" %>'></asp:Label>
                                    </td>
                                </tr>
                            </table>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="SELECT top 10 * FROM [Orders]">
        </asp:SqlDataSource>
    </div>
    </form>
</body>

JavaScript:

<script type="text/javascript">
    function requestStart(sender, args) {
        if (args.get_eventTarget().indexOf("ExportToPdf") > 0)
            args.set_enableAjax(false);
    }
</script>

C#:

protected void RadGrid1_ItemCreated1(object sender, GridItemEventArgs e)

   {

       if (e.Item is GridFooterItem)

       {

           GridFooterItem footerItem = (GridFooterItem)e.Item;

           ImageButton btn = new ImageButton();

           btn.ImageUrl = "../Images/plus.gif";

           btn.Height = 50;

           btn.Width = 50;

           btn.ID = "ExportToPdf";

           btn.CommandName = "ExportToPdf";

           btn.Click += btnPDFClick;

           footerItem.Cells[2].Controls.Add(btn);

       }

   }
private void btnPDFClick(object sender, ImageClickEventArgs e)

   {

       RadGrid1.ClientSettings.Scrolling.AllowScroll = false;

       RadGrid1.ClientSettings.Scrolling.UseStaticHeaders = false;

       RadGrid1.MasterTableView.ExportToPdf();

   }

Please try the same code snippet and let me know if you have any concern.
Thanks,
Shinu.

[Daniel]

Hello Steve,

I have answered to your support ticket. At this point I would say the fastest way to solve the problem would be to have a runnable demo so that I can debug it on my end.

Regards,
Daniel
Telerik

[Steve]

I found the issue with the loading panel. The control is loaded in a multiview as a user control. The main aspx page had the RadAjaxManager on it, and instead of having a RadAjaxManagerProxy in the user control, I had a RadAjaxManager. By replacing it with the RadAjaxManager in the user control, it eliminated that issue.