Ask Question

Waiting loading animation popup when exporting grid to excel

Meccanica Rossi

asked at 11 Jun 2025

we've updated our demo to have a `delay` checkbox: https://demo.aspnetawesome.com/GridExportToExcelDemo

at 13 Jun 2025 Omu

Answers

It can be done by using this js function instead of the one we have right now in our demo, we're appending the loading animation to body, so you get it above the whole screen, but it could be done in different ways. async function getFile(url) { // Collect request parameters from the grid var grid = $('#@(grid)'); var req = grid.data('api').getRequest(); var expCols = getExpColumns(grid); var formData = new FormData(); // Add visible columns info expCols.forEach((col, i) => { formData.append(`expColumns[${i}].Name`, col.name); formData.append(`expColumns[${i}].Header`, col.header); formData.append(`expColumns[${i}].Width`, col.width); formData.append(`expColumns[${i}].Hidden`, col.hidden); }); // Add request parameters req.forEach(val => { formData.append(val.name, val.value); }); formData.append('allPages', $('#allPages').val()); formData.append('loadDelay', $('#loadDelay').val()); try { const loadAnim = awem.loadingAnim({ cont: $('body') }); loadAnim.start(); // Make POST request using fetch let response = await fetch(url, { method: "POST", body: formData }); if (!response.ok) { throw new Error(`Server returned ${response.status} ${response.statusText}`); } // Extract filename from Content-Disposition header const contentDisposition = response.headers.get("Content-Disposition"); let filename = contentDisposition.match(/filename=([^;]+)/)?.[1].trim() || 'download.xls'; let blob = await response.blob(); loadAnim.stop(); // Trigger file download const downloadUrl = window.URL.createObjectURL(blob); const a = document.createElement("a"); a.href = downloadUrl; a.download = filename; document.body.appendChild(a); a.click(); a.remove(); window.URL.revokeObjectURL(downloadUrl); } catch (error) { loadAnim.stop(); console.error("Download failed:", error); } } function getExpColumns(g) { return awef.select(g.data('o').columns, function (col) { return { name: col.T || col.P, header: col.Header, hidden: !!col.Hid, width: col.W || col.Mw || col.needw }; }); }
Omu

answered at 11 Jun 2025
- miss source from getExpColumns function
  
  at 15 Jun 2025 Meccanica Rossi
- I've edited my answer
  
  at 15 Jun 2025 Omu

please Sign In to leave an answer