Excel Export via AJAX Call

Hello,

I’m trying to use the following sample page to set up a simple Excel export:

http://www.igniteui.com/infragistics-excel/create-excel-worksheet

My goals are the following:

1) When the Export button is clicked, the current page should not have to be re-drawn.

2) The user shouldn’t have to be redirected to another window to perform the export.

To achieve those goals, I set up a little ajax call like this when the Export button is pressed:

var grid= $(“#igGrid”).data(“igGrid”).dataSource.dataView();

$.ajax({
type: “POST”,
url: “/Excel/ExcelExport”,
contentType: “application/json”,
data: JSON.stringify(grid)
});

Everything works fine when the controller receives this post, but when it executes the SendForDownload() method in my controller, no download is actually triggered in the browser.  I suspect this is because of the nature of how ajax calls are interpreted by the browser.  My SendForDownload() method is almost identical to the sample:

private void SendForDownload(Workbook document, WorkbookFormat excelFormat)
{
string documentFileNameRoot;
documentFileNameRoot = “Document.xlxs”;

Response.Clear();
Response.AppendHeader(“content-disposition”, “attachment; filename=” + documentFileNameRoot);
Response.ContentType = “application/octet-stream”;
document.SetCurrentFormat(excelFormat);
document.Save(Response.OutputStream);
Response.End();
}

Am I going about this the right way?  I would really appreciate any advice from the support devs on how to achieve this functionality, whereby the user can simply click Export and see a download prompt appear without altering the state of the currently loaded page.

Thank you!

Hi kylemilner,

I'm looking into this issue to see what we can recommend to address this for you. I will proceed with my research and will follow-up with you here on this thread.

Thanks Troy, I appreciate the support.  I'll look forward to your next post.

Hi kylemilnerm,

So I wanted to return to you really to confirm the behavior I believe you are looking for as it relates to this scenario. As I am understanding, you are wanting for the export/download to execute directly without the user needing to perform the extra step of selecting to 'SaveAs or Open" in the dialog. Please confirm.

First, thinking about the 'redirection' aspect that you had mentioned; with this scenario there really isn't a page re-direction occurring. While the user is making the selection from the dialog, the 'main' page remains open. After the selections is made to SaveAs or Open the file, the users focus is returned to the 'main' page.

With regards to making an ajax call, this wouldn't really work primarily because upon receiving the request, it has no idea what to do with the file. This is what you are seeing. You need to have a full post for the page to respond with the export/download.

Let me know if you need any additional assistance.

Thanks!

 

Hi Troy, thanks for the response.  What I'm really trying to get at is the ability to export the contents of the grid without having to repeat the database query which produced the grid in the first place.  That seems to be the way it's done in the interactive example.

Since all of the grid rows exist client-side after the page is initially rendered, I was hoping to just package it up and post it back to the server to be transformed into an xlsx without needing to query the database again.  That's where I was trying to go with the ajax call.  I'm totally okay with having the standard browser dialog pop-up (save as, open, cancel, etc).  

Please let me know if anything about my scenario is unclear.  It's highly possible I'm going about this in a weird way (I don't normally do web development, so the stateless world of http GETs and POSTs isn't very intuitive for me sometimes).

Hi kylemilner,

There are two resources you can give a look at. Both look promising for addressing what you are aiming to do:

1) the first is the ExcelBuilder.js library: http://excelbuilderjs.com/index.html

2) is an alternative approach in that it shows how to export a grid to a csv file on the client : http://stackoverflow.com/questions/14964035/how-to-export-javascript-array-info-to-csv-on-client-side

 

Hope one of these approaches help!

 

Thanks Troy,

in the end what seemed to work best for me is to simply use the Session cache to store the contents of the query when it is initially executed.  Then, after the grid is displayed and the user clicks the Export to Excel button, I can just pull the contents from cache and use the Infragistics sample code to transform it to xlsx.  The approach does have a couple of weaknesses, but I think it will cover my use case just fine.

If I need to return to this problem, I'll definitely consider the two resources you posted.  I read through them, and they both seem pretty interesting.

Thanks!

Hi Kylemilner,

Thank you for positing your approach for resolving this with the Infragistics Community! Let us know if we can be of further assistance.

I have the exact same problem as Klye explains in this post and was wondering if there is a way to still send the response back to the client without the caching workaround that Klye used? I have to wait for the user to make their changes to the grid and only then take that data and save it off to Excel. I can get all the data to the server fine using a simple ajax call but I can't get the Reponse.OutputStream back to the client most likely due to the async nature of ajax. Is it possible to simply upload the contents of a iggrid to the server and have the server sendback the stream in the response like the example SendForDownload method does? I have seen other posts from Infragistics members saying that you can send a JSON array of data to the server and have the server send back the xlsx file but no clear complete working example.

We also eventually needed a solution that would allow the user to make edits in the grid and see those changes reflected in the export.  We settled on a little utility called jQuery File Download Plugin.  Might be worth a try for you:

https://github.com/johnculviner/jquery.fileDownload

You wire up an export button on your page to an ajax call, something like this:

function exportItems() {
    var items = { items: $('#igGrid').igGrid('option', 'dataSource').Records };
    $.fileDownload('Excel/ItemExport', {
        httpMethod: "POST",
        data: items
    });
}

Then in your SendForDownload() method, you include this statement:

Response.SetCookie(new HttpCookie("fileDownload", "true") { Path = "/" });

There are probably many other ways to make this work, but this approach ended up working fine for us.