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!
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.
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.
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.
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,
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!