topic Re: Trouble with Datagrid export CSV in ArcGIS JavaScript Maps SDK Questions

Trouble with Datagrid export CSV

Chang-HengYang — Thu, 06 Feb 2014 20:54:08 GMT

Hi Everyone,

I found the post related to Datagrid to .csv file useful. I followed the instructions to have these codes in my web application and .ashx file. I could draw a box to select the features. However, it failed to export the file and a error message was shown in Chrome Web Console after clicking the button (Save to CSV), Uncaught TypeError: Cannot read property 'structure' of undefined.

The web application is in jsbin

In addition, I have my web application file and MyWebHandler.ashx at the same folder

Please let me know how I fix this problem.

Many thanks,
Hank

The below code is the MyWebHandler.ashx file

public void ProcessRequest(HttpContext context)     {         context.Response.ContentType = "text/plain";         System.Collections.Specialized.NameValueCollection parameters = context.Request.Form;         string moduleName = parameters["module"];         string requestFeedback = "";         switch (moduleName)         {              case "ExportToExcel":                 EgisWeb.ExportHelper objExportCSVHelper = new EgisWeb.ExportHelper();                 objExportCSVHelper.CSV2Excel(parameters["csvdata"].ToString(), HttpContext.Current, parameters["title"].ToString());                 break;                      }         if (moduleName != "ExportToExcel")              context.Response.Write(requestFeedback);       }    public void CSV2Excel(string strCSV, HttpContext current, string strTitle)         {             current.Response.Clear();             strCSV = removeUniCodeSequenceCharacters(strCSV);             strCSV = System.Text.RegularExpressions.Regex.Unescape(strCSV);             current.Response.AddHeader("content-disposition", "attachment;filename=" + strTitle +"_"+DateTime.Now.ToString("ddmmyyyyHHMMSS") + ".csv");             current.Response.Charset = "";             current.Response.ContentType = "application/octet-stream";             current.Response.Write(strCSV);             current.Response.End();          }   private string removeUniCodeSequenceCharacters(string strWithEscapeSequence)         {             string strUse = "";             strUse = strWithEscapeSequence.Replace("%20", " ");             strUse = strUse.Replace("%2C", ",");             strUse = strUse.Replace("%27", "'");             strUse = strUse.Replace("%22", "\"");             strUse = strUse.Replace("%3F", "?");             strUse = strUse.Replace("%0A", "\n");             strUse = strUse.Replace("%28", "(");             strUse = strUse.Replace("%29", ")");             strUse = strUse.Replace("%26", "&");             strUse = strUse.Replace("%23", "#");             strUse = strUse.Replace("%3A", ":");             strUse = strUse.Replace("%21", "!");             strUse = strUse.Replace("%2D", "-");             strUse = strUse.Replace("%3B", ";");             strUse = strUse.Replace("%2A", "*");             strUse = strUse.Replace("%2B", "+");             strUse = strUse.Replace("%2E", ".");             strUse = strUse.Replace("%3C", "<");             strUse = strUse.Replace("%3D", "=");             strUse = strUse.Replace("%3E", ">");             strUse = strUse.Replace("%40", "@");             return strUse;         }

Re: Trouble with Datagrid export CSV

BrianLord1 — Fri, 07 Feb 2014 11:32:20 GMT

Hank,

I have implemented an "Export to CSV" tool in a couple of my javascript apps. So once the datagrid is populated with my selected records I click on a button to export and save the csv file. Here is how I have done it, although there is probably a better way since I am still learning...

I have a web handler file that I have called csv.ashx located in a folder I called "webservices" located in the project folder (i have included a screenshot of my folder structure).

<%@ WebHandler Language="C#" Class="csv" %>  using System; using System.Web;  public class csv : IHttpHandler {          public void ProcessRequest (HttpContext context) {         String content = "no data";         String filename = "MyFile";         if (context.Request["report"] != null)         {             try             {                 content = context.Request["report"].ToString();             }             catch             {             }         }         if (context.Request["filename"] != null)          {             try             {                 filename = context.Request["filename"].ToString() + "_" + DateTime.Now.ToString("MMMd_HH.mm");             }             catch             {             }         }          context.Response.ContentType = "text/csv";         context.Response.AddHeader("Content-disposition", "attachment;filename=" + filename + ".csv");         context.Response.Write(content);     }       public bool IsReusable {         get {             return false;         }     }  }

Now within the main html doc (although this should probably be moved to a separate javascript file) I have the following functions.

This is the function called when the user clicks the button and it basically takes everything in the datagrid and into a csv text string.

function exportCSVData() {                 var gridData = dijit.byId("gridCorners");                 var csvdatafield = dojo.byId("csvdata");                 dijit.byId('btnExport').setAttribute('checked', false);                                  var csvText = "";                 var fields = gridData.structure[0].cells[0];                 if (fields != null && fields.length > 0) {                     for (var ifldCnt = 0; ifldCnt < fields.length; ifldCnt++) {                         if (ifldCnt == 0) {                             csvText = fields[ifldCnt].name;                         } else {                             csvText += "," + fields[ifldCnt].name;                         }                     }                     csvText += "\n";                     var fieldValue = "";                      for (var i = 0; i < gridData.rowCount; i++) {                         var featureAttribute = gridData.store._arrayOfAllItems;                         var columnVal;                         for (var ifldCnt = 0; ifldCnt < fields.length - 1; ifldCnt++) {                             fieldValue = "";                              columnVal = featureAttribute[fields[ifldCnt].field][0];                             if (columnVal != null && columnVal != "") {                                 fieldValue = columnVal;                             }                             if (isNaN(fieldValue)) {                                 if (fieldValue.indexOf('\'') != -1 || fieldValue.indexOf('\"') != -1 || fieldValue.indexOf(',') != -1) {                                     if (fieldValue.indexOf('\"') != -1) {                                         fieldValue = fieldValue.replace("\"", "\"\"");                                     }                                     fieldValue = "\"" + fieldValue + "\"";                                 }                             }                             if (ifldCnt == 0) {                                 csvText += fieldValue;                             } else {                                 csvText += "," + fieldValue;                             }                         }                         csvText += "\n";                     }                     getCSV(csvText)                 }             }

And this is what actually submits the form to the webhandler. There is also included code to prompt the user to name the file and if the do not they get an alert.

function getCSV(csvText) {                 //Get the stored CSV                 var url = "webservices/csv.ashx";                  var data = csvText;                  var f = dojo.byId("downloadform");                 f.action = url;                 dojo.byId("reportinput").value = data;                 userChoice = prompt("Choose a File Name (the date and time will be added to end of filename):");                 if (userChoice != null && userChoice != 'undefined' && userChoice != '') {                     dojo.byId("filename").value = userChoice;                     f.submit();                 } else if (userChoice == 'undefined') {                     alert("You must type in a filename!");                 } else if (userChoice == '') {                     alert("You must type in a filename!");                 } else if (userChoice == null) {                     alert("The CSV Export was Canceled");                 }             }

And here is the html for the hidden download form.
[HTML]<form method="post" action="" style="height: 0px; width: 0px; display: none;" class="dlform"
            id="downloadform" target="_blank">
                <input type="hidden" name="report" class="ri" id="reportinput" value="" />
                <input type="hidden" name="filename" class="fn" id="filename" value="" />
                <input type="hidden" name="s" class="s" id="s" value="" />
                <input type="hidden" name="numberofcolumns" class="rit" id="numberofcolumns" value="pdf" />
        </form>[/HTML]

I hope this helps. As I mentioned above, there might be a better way to accomplish this. This app has been up and running for a while now and I haven't had any users inform me of issues with exporting so it does work reliably.

Thanks,
Mark

Re: Trouble with Datagrid export CSV

Chang-HengYang — Fri, 07 Feb 2014 16:03:34 GMT

Hi Mark,

Thank you for your time in advance. Almost 99% done, I clicked the button and this popout info showed that I need to name this zipped file(Error.jpg). After clicking the button, I just saw the content of the .ashx file(error.jpg). It looks like my internet server does no support ASP.Net. My coworker told me that I am using the Linux sever. I wonder if your internet server is windows server.

Thanks,
Hank

Re: Trouble with Datagrid export CSV

BrianLord1 — Fri, 07 Feb 2014 18:24:07 GMT

Yes, our web server is windows.

I am not really sure what what you would need to change to get it tow work on a Linux server. That is an area I do not know much. I would say, assuming the rest of my code worked you should have a properly formatted csv text string. Now all you need to do is find a web handler that will work on a Linux server.

A quick search on stackoverflow found this thread that might be of some use to you.
http://stackoverflow.com/questions/1116175/running-asp-net-on-a-linux-based-server

Good Luck.

Mark

Re: Trouble with Datagrid export CSV

Chang-HengYang — Fri, 07 Feb 2014 20:29:34 GMT

Hi Mark,

Again thank you for the help. My server manager may not want to have a windows server in my department. Therefore, I will go for the other method"dojox.grid.EnhancedGrid". However, you post related to CSV export would be very helpful for these JS API developers. I will let you know when I successfully have the export to CSV function in dojox.grid.EnhancedGrid.

Keep in touch,

Hank

Re: Trouble with Datagrid export CSV

MayJeff — Mon, 02 Mar 2015 16:15:28 GMT

Do you able to complete your task? Thanks.

Re: Trouble with Datagrid export CSV

Chang-HengYang — Mon, 02 Mar 2015 21:28:07 GMT

Hi May,

I used another route to finish this work. However, I am not sure if my modified application fits your requirement. Basically, I have a table to display all the data and the filter window could provide users filter data by conditions users set. The post here is for users to drag a box and download the data in CSV/Excel format. However, there is a problem with the web server. I can not pass the website link.

Re: Trouble with Datagrid export CSV

MayJeff — Mon, 02 Mar 2015 22:06:22 GMT

Thanks Yang. I also got the same problem with the web.config file. I try to use EnhancedGrid and posted a thread here: Can't get export datagrid to csv

Which method do you use? Can you show me how do you do it? Thanks.

Re: Trouble with Datagrid export CSV

Chang-HengYang — Mon, 02 Mar 2015 22:15:16 GMT

Hi May,

I am wondering if you would like a similar web application like the website (Gridx Export ). If yes, I could show you the workflow. However, if you prefer the user could drag the box and download the data in csv/excel format on your web map, I am still working on it.

Please let me know your opinions.

Hank

Re: Trouble with Datagrid export CSV

MayJeff — Mon, 02 Mar 2015 22:30:38 GMT

Actually I just need to export the search results to csv just like JSFiddle I modified:

Edit fiddle - JSFiddle

I don't need to drag a box on a map to get the data to export to csv format. If you could, would be greatly appreciate.

Thanks.

Re: Trouble with Datagrid export CSV

MayJeff — Mon, 02 Mar 2015 22:34:41 GMT

So user can just download the data to csv format and not just show the string data on the screen then have to copy and paste to save to csv format.

Re: Trouble with Datagrid export CSV

Chang-HengYang — Mon, 02 Mar 2015 22:42:42 GMT

Hi May,

I have not studies the codes on the example you provided(Edit fiddle - JSFiddle). In addition, users still need to copy and paste and save to csv format in my application. For your requirement (users just download the data to csv format), I am still working on it. Hopefully you could let me know after you figured it out.

Thanks,

Hank

Re: Trouble with Datagrid export CSV

MayJeff — Mon, 02 Mar 2015 23:13:11 GMT

Sure. I will let you know

Re: Trouble with Datagrid export CSV

RobertScheitlin__GISP — Sun, 12 Dec 2021 03:39:33 GMT

Chang-Heng and May Jeff,

Marks solution is a server side code that handles the csv response format.

Attached I have the CSVHandler.ashx code that you can add to your web server.

The steps are simple

Unzip the attached file and place in a new folder your create under "c:\inetpub\wwwroot\" called "HttpHandlers"
In IIS Manager right click on "Default Web Site" and choose "Add Application"
for the Alias type "HttpHandlers"
for Physical path browse to "c:\inetpub\wwwroot\HttpHandlers"
click OK
Now you can add some simple code in your js app like this:

       grid.exportGrid("csv", function (str) {
          ioIframe.create('exportFrame', '', '');
          ioIframe._currentDfd = null;
          ioIframe.send({
            url: "/HttpHandlers/CSVHandler.ashx",
            content: {data: str, filename: 'MyExport.csv'}
          });
        });

Notice the url is /HttpHandlers/CSVHandler.ashx

the content contains your csv str and the desired output file name for the download.

Re: Trouble with Datagrid export CSV

MayJeff — Wed, 04 Mar 2015 13:30:43 GMT

Yang,

Robert helps me on my thread. See the answer here:

Can't get export datagrid to csv

Thanks.