Display an alert using JavaScript once the RadGrid Telerik web component has finished exporting data

Question

Display an alert using JavaScript once the RadGrid Telerik web component has finished exporting data

I'm currently utilizing a Telerik web component called RadGrid that is connected to an Asp.Net ObjectDataSource. This component allows the data it is linked to be exported into Excel, PDF, or Word formats. However, I am facing an issue where I am unable to trigger a JavaScript alert once the file download is complete. I have attempted using the OnResponseEnd method in JavaScript, but it has not yielded the desired result.

Any recommendations or suggestions?

Here is the codebehind code that I have implemented so far:

protected void bXls_Click(object sender, EventArgs e)
    {
        RadGrid1.MasterTableView.GetColumn("Historico").Visible = false;
        RadGrid1.MasterTableView.GetColumn("TareaIdExport").Visible = true;

        RadGrid1.ExportSettings.IgnorePaging = true;
        RadGrid1.ExportSettings.OpenInNewWindow = false;
        RadGrid1.MasterTableView.ExportToExcel();
    }

And here is a shortened version of the component code:

<telerik:RadGrid ID="RadGrid1" runat="server"
                    AutoGenerateColumns="False"
                    Culture="es-ES"
                    GroupPanelPosition="Top" DataSourceID="objGrid"
                    OnItemCommand="RadGrid1_ItemCommand"
                    OnItemDataBound="RadGrid1_ItemDataBound"
                    RenderMode="Lightweight"
                    AllowFilteringByColumn="True"
                    AllowPaging="True"
                    AllowSorting="True"
                    OnItemCreated="RadGrid1_ItemCreated"
                    PageSize="4"
                    OnGridExporting="RadGrid1_GridExporting"
                    OnPdfExporting="RadGrid1_PdfExporting"> 
</telerik:RadGrid>

javascript c#asp.net telerik

Answer 1

Answer №1

When performing an export that requires a full postback, ajax is not feasible as it limits the returned data from the post. This can make handling the complete event challenging. One workaround is to use a cookie that will be returned after the full postback of the export process. The method outlined in the following tutorial demonstrates using this approach to address a similar issue related to displaying an AjaxLoadingPanel during export.

The solution involves adding a cookie to the form on the server side once the export is completed. Simultaneously, the client continuously checks for this cookie's presence. When the client detects the cookie, it signifies that the export has finished.

Show loading panel when exporting RadGrid

Below is a functional sample code tailored to your specific scenario:

ASPX:

function gridCommand(sender, args) {
  if (args.get_commandName().startsWith("Export")) {

    //initiate cookie polling
    appendDownloadToken();
  }
}

function appendDownloadToken() {
  window._downloadToken = new Date().getTime() + "";
  //add a form field containing the download token before submit
  $telerik.$("<input type='hidden' id='_downloadToken' name='_downloadToken' value='" + window._downloadToken + "' />").appendTo(document.forms[0]);

  pollDownloadCookie();
}


function pollDownloadCookie() {
  //compare cookie value and initial value
  if (cookie.get("_downloadToken") === window._downloadToken) {
    //erase download token cookie
    cookie.erase("_downloadToken");
    //remove the token value
    delete window._downloadToken;
    //remove the form field
    $telerik.$("#_downloadToken").remove();
    //show alert
    alert('Grid Exported');
  } else {
    setTimeout(pollDownloadCookie, 100);
  }
}

//Helper method to deal with cookies
cookie = {
  get: function(name) {
    var part = document.cookie.split(name + "=")[1];
    return part ? decodeURIComponent(part.split(";")[0]) : null;
  },
  set: function(name, value, days, path, secure) {
    document.cookie = [
      name + "=" + encodeURIComponent(value),
      days ? "expires=" + new Date(new Date().getTime() + (days * 24 * 60 * 60 * 1000)).toUTCString() : "",
      secure ? "secure" : "",
      path ? "path=" + path : "path=/"
    ].join("; ");
  },
  erase: function(name) {
    cookie.set(name, "", -1);
  },
  all: function() {
    var ret = {};
    var arr = document.cookie.split(";");
    for (var i = 0; i < arr.length; i++) {
      if (arr[i]) {
        var pair = arr[i].split("=");
        ret[pair[0]] = decodeURIComponent(pair[1]);
      }
    }
    return ret;
  }
}

<telerik:RadGrid ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource" AutoGenerateColumns="false" OnItemCommand="RadGrid1_ItemCommand">
  <ExportSettings ExportOnlyData="True" HideStructureColumns="True" OpenInNewWindow="True"></ExportSettings>
  <ClientSettings>
    <ClientEvents OnCommand="gridCommand" />
  </ClientSettings>
  <MasterTableView DataKeyNames="ID" CommandItemDisplay="Top">
    <CommandItemSettings ShowExportToExcelButton="true" ShowExportToCsvButton="true" ShowExportToPdfButton="true" ShowExportToWordButton="true" />
    <Columns>
      <telerik:GridBoundColumn UniqueName="Id" DataField="ID" HeaderText="ID"></telerik:GridBoundColumn>
      <telerik:GridBoundColumn UniqueName="Name" DataField="Name" HeaderText="Name"></telerik:GridBoundColumn>
    </Columns>
  </MasterTableView>
</telerik:RadGrid>

Answer 2

When performing an export that requires a full postback, ajax is not feasible as it limits the returned data from the post. This can make handling the complete event challenging. One workaround is to use a cookie that will be returned after the full postback of the export process. The method outlined in the following tutorial demonstrates using this approach to address a similar issue related to displaying an AjaxLoadingPanel during export.

The solution involves adding a cookie to the form on the server side once the export is completed. Simultaneously, the client continuously checks for this cookie's presence. When the client detects the cookie, it signifies that the export has finished.

Show loading panel when exporting RadGrid

Below is a functional sample code tailored to your specific scenario:

ASPX:

function gridCommand(sender, args) {
  if (args.get_commandName().startsWith("Export")) {

    //initiate cookie polling
    appendDownloadToken();
  }
}

function appendDownloadToken() {
  window._downloadToken = new Date().getTime() + "";
  //add a form field containing the download token before submit
  $telerik.$("<input type='hidden' id='_downloadToken' name='_downloadToken' value='" + window._downloadToken + "' />").appendTo(document.forms[0]);

  pollDownloadCookie();
}


function pollDownloadCookie() {
  //compare cookie value and initial value
  if (cookie.get("_downloadToken") === window._downloadToken) {
    //erase download token cookie
    cookie.erase("_downloadToken");
    //remove the token value
    delete window._downloadToken;
    //remove the form field
    $telerik.$("#_downloadToken").remove();
    //show alert
    alert('Grid Exported');
  } else {
    setTimeout(pollDownloadCookie, 100);
  }
}

//Helper method to deal with cookies
cookie = {
  get: function(name) {
    var part = document.cookie.split(name + "=")[1];
    return part ? decodeURIComponent(part.split(";")[0]) : null;
  },
  set: function(name, value, days, path, secure) {
    document.cookie = [
      name + "=" + encodeURIComponent(value),
      days ? "expires=" + new Date(new Date().getTime() + (days * 24 * 60 * 60 * 1000)).toUTCString() : "",
      secure ? "secure" : "",
      path ? "path=" + path : "path=/"
    ].join("; ");
  },
  erase: function(name) {
    cookie.set(name, "", -1);
  },
  all: function() {
    var ret = {};
    var arr = document.cookie.split(";");
    for (var i = 0; i < arr.length; i++) {
      if (arr[i]) {
        var pair = arr[i].split("=");
        ret[pair[0]] = decodeURIComponent(pair[1]);
      }
    }
    return ret;
  }
}

<telerik:RadGrid ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource" AutoGenerateColumns="false" OnItemCommand="RadGrid1_ItemCommand">
  <ExportSettings ExportOnlyData="True" HideStructureColumns="True" OpenInNewWindow="True"></ExportSettings>
  <ClientSettings>
    <ClientEvents OnCommand="gridCommand" />
  </ClientSettings>
  <MasterTableView DataKeyNames="ID" CommandItemDisplay="Top">
    <CommandItemSettings ShowExportToExcelButton="true" ShowExportToCsvButton="true" ShowExportToPdfButton="true" ShowExportToWordButton="true" />
    <Columns>
      <telerik:GridBoundColumn UniqueName="Id" DataField="ID" HeaderText="ID"></telerik:GridBoundColumn>
      <telerik:GridBoundColumn UniqueName="Name" DataField="Name" HeaderText="Name"></telerik:GridBoundColumn>
    </Columns>
  </MasterTableView>
</telerik:RadGrid>

Display an alert using JavaScript once the RadGrid Telerik web component has finished exporting data

Answer №1

Similar questions

AngularJS complications with data flow

JQuery is capable of hiding a div using the .hide() method but is unable to reveal it using the

Utilizing Vue.js: Disabling button on image carousel when there is no "next" photo accessible

Building a multi-page application with ExtJs MVC

What is the standard text displayed in a textarea using jQuery by default

The function screen.getByText is not available in this context

Restricting JQuery pop-up to be shown only once

Creating Typescript types based on the values of other props: A guide

Compile LESS scripts in Visual Studio Team Services as part of the build process

Exploring the depths of Nesting in Next.js Links

Integrating MVC capabilities into a WebForms website project

Passing a jQuery dialog variable for use in a php function using ajax

Limit the focus to the dialog box using JavaScript

Using VueJS: accessing this.$store within component data property

Saving data inputted in a form using ReactJS and JavaScript for exporting later

Three.js - Intense shadow cast on mesh's facial features

React components do not re-render when the context value changes

Move a <div> using a handle (without using JQuery)

Utilizing data attributes to configure jQuery plugin settings

Enhancing response accuracy with Prisma queries in Nest Js