RadGrid Export to Excel with RadAjaxLoadingPanel and RadAjaxPanel

[jeslopmay]

Hi,
I've a RadGrid with an ExcelExportButton (CommandItemSettings ShowExportToExcelButton) in a RadAjaxPanel and a RadAjaxLoadingPanel. Everything works fine until I press the Export to Excel button, then the Excel appears, but RadAjaxLoadingPanel still "thinking" and never dissapear (do postbak).

Javascript to show Excel without ajax and trying to hide the RadAjaxLoadingPanel:

<script type="text/javascript">
function removePanel() {
    $telerik.findControl(document, "RadAjaxLoadingPanel1").hide();
}

function onRequestStart(sender, args) {
    if (args.get_eventTarget().indexOf("ExportToExcelButton") >= 0 ||
            args.get_eventTarget().indexOf("ExportToWordButton") >= 0 ||
            args.get_eventTarget().indexOf("ExportToPdfButton") >= 0 ||
            args.get_eventTarget().indexOf("ExportToCsvButton") >= 0) {
                setTimeout(removePanel, 10);
                args.set_enableAjax(false);
            }
        }
</script>

RadAjaxManager:

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

RadGrid with Expot to Excel button in CommandItemSetting:

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

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

.........

<telerik:RadGrid ID="gdvBuscarACPs" runat="server"

AllowSorting="true"

Width="1125px"

Height="400px"

Skin="Sunset"

OnNeedDataSource="gdvBuscarACPs_NeedDataSource"

OnItemDataBound="gdvBuscarACPs_ItemDataBound"

OnItemCommand="gdvBuscarACPs_ItemCommand"

OnExcelExportCellFormatting="gdvBuscarACPs_ExcelExportCellFormatting">

<ExportSettings HideStructureColumns="true" OpenInNewWindow="true"></ExportSettings>

<MasterTableView TableLayout="Fixed"

AutoGenerateColumns="false"

DataKeyNames="ID"

NoDetailRecordsText="No hay resultados"

NoMasterRecordsText="No hay resultados."

ShowFooter="true"

CommandItemDisplay="Top">

<CommandItemSettings ShowAddNewRecordButton="false" ShowExportToPdfButton="false" ShowExportToWordButton="false"

ShowExportToExcelButton="true" ShowExportToCsvButton="false" ShowRefreshButton="false" ></CommandItemSettings>

<Columns>

.............

</Columns>

</MasterTableView>

<ClientSettings EnableRowHoverStyle="true">

<Selecting AllowRowSelect="true" EnableDragToSelectRows="false" />

<Scrolling AllowScroll="true" UseStaticHeaders="true" />

</ClientSettings>

</telerik:RadGrid>
</telerik:RadAjaxPanel>

Everything works fine (export to Excel included) but when I press the Export button the RadAjaxPanel continues like the file attached.

Can you help me to hide the radajaxloadingpanel after press the export button?

Thank you!

[Princy]

Hi,

With reference to this forum thread, The problem is that you ajaxify RadGrid with RadAjaxManager and RadAjaxPanel at the same time. Please choose which of these controls to use and then remove the other one.

Thanks,
Princy.

[jeslopmay]

Hi Princy,

Thanks for your answer, but this does not solve my problem.

When I make a search, I want to update only a part of the page (the content of RadAjaxPanel). With your solution, if I choose to keep the RadAjaxManager and remove the RadAjaxPanel, everything runs but for each search, the page full refresh. On the other way, if I choose to keep the RadAjaxPanel and remove the RadAjaxManager, when I press the Export to Excel button, then breaks RadGrid and never appear the new window with the Excel file because they never get the function call OnRequestStart to disable Ajax.

How can I do to only update the RadGrid for each search and the export to Excel works fine?

Thank you!

[Eyup]

Hello Jesus,

Indeed, the use of RadAjaxManager and RadAjaxPanel simultaneously is not recommended. Please replace your RadAjaxPanel with a standard asp:Panel and include it in the RadAjaxManager settings to update only itself so you can achieve the same desired functionality.

I hope this will prove helpful. Please givei it a try and let me know about the result.

Regards,
Eyup
the Telerik team

[jeslopmay]

Hello Eyup,

(I regret the delay in answering)

Your solution was just I needed, thank you very much!

My steps to solve my problem:

1.- Replace the RadAjaxPanel with a standard <asp:Panel .....

2.- Add to the RadAjaxManager settings a calling for each of the buttons that update the RadGrid content

<telerik:AjaxSetting AjaxControlID="btnBusquedaDetallada">
      <UpdatedControls>
           <telerik:AjaxUpdatedControl ControlID="pnlResultados" LoadingPanelID="RadAjaxLoadingPanel1" UpdatePanelRenderMode="Inline" UpdatePanelHeight="200px"></telerik:AjaxUpdatedControl>
      </UpdatedControls>
</telerik:AjaxSetting>
 <telerik:AjaxSetting AjaxControlID="btnBusquedaRapida">
      <UpdatedControls>
          <telerik:AjaxUpdatedControl ControlID="pnlResultados" LoadingPanelID="RadAjaxLoadingPanel1" UpdatePanelRenderMode="Inline" UpdatePanelHeight="200px"></telerik:AjaxUpdatedControl>
       </UpdatedControls>
</telerik:AjaxSetting>

Everything works just as I wanted!

Thank you so much!!

[Mohamed]

Hi I too facing the same problem i am not getting a loading icon when i am clicking on export button . Can some one help me out in this issue as this is of high priority for me today. Please find the code below

<telerik:RadAjaxManager ID="RadAjaxManager" runat="server" EnableAJAX="true" >

<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="rgProviderSearch">

 

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="rgProviderSearch" LoadingPanelID="RadAjaxLoadingPanel" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadAjaxManager">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="rgProviderSearch" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

<ClientEvents OnRequestStart="mngRequestStarted" />

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel" runat="server" Skin="WebBlue">

</telerik:RadAjaxLoadingPanel>

My grid code
<telerik:RadGrid ID="rgProviderSearch" runat="server" GridLines="both" AllowPaging="True"

 AllowSorting="True" AutoGenerateHierarchy="True" EnableHeaderContextMenu="True"

 AllowFilteringByColumn="true" AllowMultiRowSelection="True" AutoGenerateDeleteColumn="False"

 OnNeedDataSource="rgProviderSearch_NeedDataSource" AutoGenerateEditColumn="false" PagerStyle-PageButtonCount="10"

 OnItemCommand="rgProviderSearch_ItemCommand" EnableHeaderContextFilterMenu="True" OnPreRender="rgProviderSearch_PreRender"

 Width="1887px" PageSize="20" OnItemCreated="rgProviderSearch_ItemCreated">

 <HeaderStyle Width="200px" CssClass="GridFooter" />

 <PagerStyle Mode="NextPrevNumericAndAdvanced" AlwaysVisible="true">

 </PagerStyle>

 <ClientSettings Scrolling-UseStaticHeaders="True">

 <Selecting AllowRowSelect="false" UseClientSelectColumnOnly="false" EnableDragToSelectRows="false">

 </Selecting>

 <Scrolling AllowScroll="True" UseStaticHeaders="true" SaveScrollPosition="true" ScrollHeight="60%"

 FrozenColumnsCount="5"></Scrolling>

 <Resizing AllowColumnResize="true" ResizeGridOnColumnResize="true" />

 </ClientSettings>

 <MasterTableView CommandItemDisplay="Top" Visible="True" HeaderStyle-Wrap="false"

 TableLayout="Auto" ItemStyle-Wrap="true" AllowMultiColumnSorting="true">

 <NoRecordsTemplate>

 <table width="100%" border="0">

 <tr>

 <td align="left">

 <asp:Label ID="lblNRF" runat="server" Text="No record(s) to display"></asp:Label>

 </td>

 </tr>

 </table>

 </NoRecordsTemplate>

 <CommandItemSettings ShowExportToExcelButton="true" ShowAddNewRecordButton="true" />

 <Columns>

 <telerik:GridTemplateColumn HeaderText="" DataField="" AllowFiltering="false" >

 <ItemTemplate>

 &nbsp;

 <asp:Image ID ="imgAdd" runat="server" ImageUrl="~/Images/addSc.png" />

 <asp:LinkButton ID="lnkAddSaveAs" runat="server" Font-Underline="true" Text="Add" CommandName="AddSaveAs" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"pidKey")%>'></asp:LinkButton>&nbsp;&nbsp;

 <asp:Image ID ="imgEdit" runat="server" ImageUrl="~/Images/Edit.png" />

 <asp:LinkButton ID="lnlChange" runat="server" Font-Underline="true" Text="Edit" CommandName="Change" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"NPI")%>'></asp:LinkButton>&nbsp;&nbsp;

 <asp:Image ID ="imgDelete" runat="server" ImageUrl="~/Images/Delete.png" Height="12px"/>

 <asp:LinkButton ID="lnkDelete" runat="server" Font-Underline="true" Text="Delete" CommandName="Delete" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"pidKey")%>'></asp:LinkButton>

 </ItemTemplate>

 </telerik:GridTemplateColumn>

 </Columns>

 </MasterTableView>

 <ExportSettings Excel-Format="ExcelML" ExportOnlyData="True" IgnorePaging="true">

 </ExportSettings>

 </telerik:RadGrid>

 


Can somoe one help me out to solve this

 

 

 

 

 

 

[Eyup]

Hello Mohamed, 

Please note that generally, the exporting feature of RadGrid work with regular postbacks only, therefore, configuring and displaying any AJAX-related features can be tricky:
http://www.telerik.com/help/aspnet-ajax/grid-export-with-ajax-enabled.html

Nevertheless, you can check the following code-library:
http://www.telerik.com/community/code-library/aspnet-ajax/grid/show-loading-panel-when-exporting-radgrid.aspx

Hope this helps.

Regards,
Eyup
Telerik