Waiting loading animation popup when exporting grid to excel

Title:

BI{code} ?

I have a complex TreeGrig, and I have to export in excel. I follow your sample https://demo.aspnetawesome.com/GridExportToExcelDemo I would like to have a waiting popup because the export process takes a long time Is it possible ? Thank You

Save Changes Cancel

Meccanica Rossi

asked 3 days ago

• we've updated our demo to have a `delay` checkbox: https://demo.aspnetawesome.com/GridExportToExcelDemo
  2 days ago Omu

Answers

• BI{code} ?

  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); } }

  Save Changes Cancel

  

  Omu

  answered 3 days ago

please Sign In to leave an answer