nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Export Dojo Datagrid Results to .csv File?

EmilyLaMunyon

Hello,

Does anyone have advice on how to export the contents of a dojo.datagrid to a .csv file or excel spreadsheet? I am needing this function in my Javascript API web mapping application.

Thanks!

Finde mehr Beiträge mit dem Tag

Accepted answers

All comments

anthonyzzanthonyzz

I recently happen to read something about the grid data export introduction, including the datagrid export to csv, however it was in C# code. Anyways, I put them here and hope it can be some kinda help.

ExportToCSV exporter = new ExportToCSV(this.ketticGridView1);
string fileName = "C:\\ExportedGridData1.csv";
exporter.RunExport(fileName);
void exporter_CSVFormatCell(object sender, Kettic.WinForms.UI.Export.CSV.CSVFormatCellEventArgs e)
{
    if (e.GridColumnIndex == 1 && e.GridRowInformationType == typeof(GridViewDataRowInformation))
    {
        e.CSVCellElement.Value = "Value for Test";
    }
}

TracySchloss

I'm trying to update my code to AMD style. First I thought I could also switch from dojox/grid/dataGrid to dGrid/enhancedGrid. I'm not sure my problem is related to the type of grid I'm using. But I am having so many problems, I decided to leave it as my original grid type for now.

This feels very close to the AMD version of what I posted earlier. But this version doesn't work. I can get all the way to the point where I can see my data formatted as a long string with the line returns in it. But the part where I use the form to submit the action to the csv.ashx fails. I'm getting an error 405 - HTTP verb used to access this page is not allowed.
The page you are looking for cannot be displayed because an invalid method (HTTP verb) was used to attempt access.

This is titlePane section

<div id="tp_print" data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Print Options', closable:false, open:false">
<div>
<form data-dojo-type="dijit/form/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>
 <button id="btnExportGridCSV" data-dojo-type="dijit/form/Button" data-dojo-props="title:'Save Search Results to CSV file', label:'Save List'"></button>  
</div>

</div>

I have a click event added to the button btnExportGridCSV, which executes this function

//functions for printing
function exportGridCSV() {//creates a CSV file that can be saved by the user
    var fieldValue = "";
    dataArray.length = 0;
    arrayUtil.forEach(qTaskNameList, function(gridName) {
        dataArray.length = 0;
        var gridData = registry.byId(gridName+"_grid");
        var gridLength = gridData.rowCount;
        var fields = gridData.layout.cells;
        fieldNames.length = 0;
        //populates an array with the field names used to find the values in the data store
        if (fields.length > 0){
         arrayUtil.forEach(fields, function (field) {     
            if (field.name) {        //this skips the internal IDs, which don't have names 
                var lastField = fields[fields.length -1].name;
                var fName = field.name;         
                fieldNames.push(fName);
                if (fName != lastField) {
                dataArray.push(fName);
                } else {
                dataArray.push(fName+" \n");    
                }               
            }
         });
        }
        if (gridLength > 0) {//don't try to export if there were not values in that grid
        var gridStore = gridData.store._arrayOfAllItems;//the store of one grid
    //populates the array with the values for one record
        for (var i=0; i< gridStore.length; i++) {
            rowData.length = 0;
            var gridRec = gridStore;         
            arrayUtil.forEach (fieldNames, function(fieldName) {
            var lastField = fieldNames[fieldNames.length -1];
                fieldValue = gridRec[fieldName];
                var stringValue = String(fieldValue);
                    if (stringValue.indexOf(",") > 0) {
                        console.log ("Field Value before replace " + stringValue);                      
                        stringValue = stringValue.replace(/,/g , " ");
                        console.log ("Field Value after replace = " + stringValue);
                    }
                    if (stringValue.indexOf('\'') != -1 || stringValue.indexOf('\"') != -1 ) {
                    console.log ("Data has a slash in it. Not sure of this section of the code!");
                       if (stringValue.indexOf('\"') != -1) {
                           stringValue = stringValue.replace("\"", "\"\"");
                        }               
                        stringValue = "\"" + stringValue + "\"";
                    }
                    if (fieldName == lastField) {
                    dataArray.push(stringValue + " \n");
                    }else{
                    dataArray.push(stringValue);
                    }
            });
        }//end of one row of datarecord
        }
        var data = dataArray.join();
        var inputData = data.replace(/\n,/g, "\n");//some clean up to get rid of the leading commas in the data
        submitCSVprint(gridName, inputData);//calls the form that is mostly hidden which runs the c# script
    });

}

This is the function where it fails. I can see that it is populating the values so I have a string to act as a file name, I think it must be failing at f.submit.

Is that not a valid way to use a form anymore? I don't typically execute C# scripts, nor do I use forms. Is there something new or different in the AMD style of form that doesn't work like this anymore? Maybe additional require statements that aren't obvious? I do have dijit/form/Form.

function submitCSVprint(gridName, inputData) {
//opens the data in a hidden form used for printing and allows the user to either open or save the file.
var url = "webservices/csv.ashx";
var f = registry.byId("downloadForm");
f.action = url;
dom.byId("reportinput").value = inputData;
var distType = registry.byId("distTypeSelect").value;
var distNum = registry.byId("txtDistNumber").value;
dom.byId("filename").value = distType+"Dist_"+distNum+"_"+gridName;
f.submit();
}

I am still using the same script as before, csv.ashx. Here that is again:

<%@ 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("MMdyyyy");
        }
        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;
    }
}

}

ThomasHynes

This worked perfectly with very little additional coding. Just wanted to add that instead of pulling results from the DataGrid, I pulled the data from custom graphics layer that is managed by the grid.

Thanks Mark for http://gis.stackexchange.com/questions/67862/export-dojo-datagrid-results-to-csv-in-javascript-web-application

TracySchloss

I decided it was the fact that I was pushing values into an array, along with my row return that was causing my data to 'shift' over one column. Instead of each row of data ending in just '\r', it was ending as \r , (newline followed by a comma). This meant the first string value after the new line was a comma, which forced the whole row over one place.

I ended up writing a global replacement for \r , (new row comma) , replacing it with just new row.

var inputData = data.replace(/\n,/g, "\n");//some clean up to get rid of the leading commas in the data

TracySchloss

I found this thread very helpful and was able to get 99% of the way through my print issue. I'm trying to print not from just one grid, but several, created as a result of executing a series of querytasks on multiple layers.

I decided it was acceptable to have one CSV file for all the grid output and I'll rely on the users ability to copy/paste the output into separate work sheets or separate files as needed.

My problem is within the function that is supposed to format the data. Somewhere in this code, I'm introducing something that translates into a column shift in the output CSV (I assume a comma). Viewed in Excel, for the first grid the field names start in column A , but all the data that corresponds with it starts in column B, shifted over one column to the right.

When I process all subsequent grids, both fields and data start in column B, with nothing in column A. At least for these the names and data line up!

Have I taken a simple task and made it complicated? My output looks right, except for the shift in the columns.

function exportGridCSV() {
 dataArray.length = 0;
 var fieldValue;
 var fieldNames = [];
//qTaskNameList created from query task that populated the grids
 dojo.forEach(qTaskNameList, function(gridName) {
  var gridData = dijit.byId(gridName+"_grid");
  var gridLength = gridData.rowCount;
        var fields = gridData.layout.cells;
  var fieldNames.length = 0;
  //populates an array with the field names used to find the values in the data store
  dojo.forEach(fields, function (field) {
   fieldNames.push(field.field);  
   dataArray.push(field.field);
  });
  dataArray.push("\r");//first line is the field names
  
  if (gridLength > 0) {//don't try to export if there were not values in that grid
  var gridStore = gridData.store._arrayOfAllItems;//the store of one grid
 //for each record, populates the array with the values for the fields stored in the field array
  for (var i=0; i< gridStore.length; i++) {
   var gridRec = gridStore;
   var j = 0;
   dojo.forEach (fieldNames, function(fieldName) {
    fieldValue = gridRec[fieldName];
    if (isNaN(fieldValue)) {//for data containing slashes
                        if (fieldValue.indexOf('\'') != -1 || fieldValue.indexOf('\"') != -1 || fieldValue.indexOf(',') != -1) {
                            if (fieldValue.indexOf('\"') != -1) {
                             fieldValue = fieldValue.replace("\"", "\"\"");
                            }
                            fieldValue = "\"" + fieldValue + "\"";
                    }
                   }
   dataArray.push(fieldValue);
    j++;
   });
  dataArray.push("\r");
  }//end of record
 dataArray.push("\r"); //puts an empty row before the next set of records
  }
 });
submitCSVprint();
}
function submitCSVprint() {
//opens the data in a hidden form used for printing and allows the user to either open or save the file.
var url = "webservices/csv.ashx";
var data = dataArray.join();
var f = dojo.byId("downloadForm");
f.action = url;
dojo.byId("reportinput").value = data;
var distType = dijit.byId("distTypeSelect").value;
var distNum = dojo.byId("txtDistNumber").value;
dojo.byId("filename").value = distType+"_Dist_"+distNum+"_";
f.submit();
}

BrianLord1

I finally got my export functionality to work. I went kind of along the same lines as mentioned above, but got the exact code from a post on gis.stackexhange.

Here is the link to that thread in case this could help someone else.
http://gis.stackexchange.com/questions/67862/export-dojo-datagrid-results-to-csv-in-javascript-web-application

Thanks,
Mark

VinayBansal

Could you please provide all the code for your MyWebHandler.ashx file? I am trying to implement your strategy but keep getting errors in that file. I assume I missed some code or something so if you could provide the entire code for that file it would be greatly appreciated.

Thanks,
Mark

MyWebHandler.ashx has only one method as mentioned in my above post. And this is how the method is called of ExportHelper

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


    }

BrianLord1

I have taken this approach for exporting the data to csv from datagrid.

Added a form in page with hidden attribute and set its action to handler

[HTML]<form id="csvForm" action="Handlers/MyWebHandler.ashx?module=ExportToExcel" method="post">
<input type="hidden" value="" id="csvdata" name="csvdata" />
<input type="hidden" value="" id="title" name="title" />
</form>[/HTML]

Then in js function is written to get the grid data.

function exportCSVData() {
        var gridData = dijit.byId("grid");
        var csvdatafield = dojo.byId("csvdata");
        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; ifldCnt++) {
                    fieldValue = "";

                    //columnVal = this.getValuefromAttribute(featureAttribute[fields[ifldCnt].field], false, "");
                    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";
            }
            if (csvText != "")
                csvText = escape(csvText);
            csvdatafield.value = csvText;  // After value is set for the hidden field submit the form
            var formCSV = dojo.byId("csvForm");
            formCSV.submit();

        }
    }

Once the form is submitted, the control is passed to handler, that will fetch the data from form submitted and create csv

In handler get the attributes "MyWebHandler.ashx"

public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        System.Collections.Specialized.NameValueCollection parameters = context.Request.Form;
        string moduleName = parameters["module"];
        
        ExportHelper objExportCSVHelper = new ExportHelper();
        objExportCSVHelper.ExportToCSV(parameters["csvdata"].ToString(), HttpContext.Current, parameters["title"].ToString());
               


    }

And in ExportHelper class write the ExportToCSV Function

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

        }
//Since we used escape to send text from javascript to Server side we need this function
 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;
        }

Could you please provide all the code for your MyWebHandler.ashx file? I am trying to implement your strategy but keep getting errors in that file. I assume I missed some code or something so if you could provide the entire code for that file it would be greatly appreciated.

Thanks,
Mark

BrianLord1

Are you using the python script tabletoexcel.py that i pointed to? if so, here is how i modified it to fit my use. I added Make Feature Layer (or Make Table View) with the Query Expression (the same as you use query task's where clause). then use the result feature layer or table view (in your case would be data store) as the first input for the tabletoexcel.py and published it as a GP service (i also include a zip module to zip the result).

Would it be possible for you to paste some code to show exactly how you implemented the gp service within your code? What did you do for the second input?

Also, did you change anything within the actual table2excel python script?

Any help would be greatly appreciated, I have been stuck on this for a while now.

Thanks,
Mark

VinayBansal

function exportCSVData() {
        var gridData = dijit.byId("grid");
        var csvdatafield = dojo.byId("csvdata");
        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; ifldCnt++) {
                    fieldValue = "";

                    //columnVal = this.getValuefromAttribute(featureAttribute[fields[ifldCnt].field], false, "");
                    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";
            }
            if (csvText != "")
                csvText = escape(csvText);
            csvdatafield.value = csvText;  // After value is set for the hidden field submit the form
            var formCSV = dojo.byId("csvForm");
            formCSV.submit();

        }
    }

Once the form is submitted, the control is passed to handler, that will fetch the data from form submitted and create csv

In handler get the attributes "MyWebHandler.ashx"

public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        System.Collections.Specialized.NameValueCollection parameters = context.Request.Form;
        string moduleName = parameters["module"];
        
        ExportHelper objExportCSVHelper = new ExportHelper();
        objExportCSVHelper.ExportToCSV(parameters["csvdata"].ToString(), HttpContext.Current, parameters["title"].ToString());
               


    }

And in ExportHelper class write the ExportToCSV Function

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

        }
//Since we used escape to send text from javascript to Server side we need this function
 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;
        }

JohannesLindner_0-1651581249616.png

InfodimGIS_0-1651581561881.png

BrianLord1

There is a python script in http://resources.arcgis.com/gallery/file/geoprocessing/details?entryID=95009B25-1422-2418-7FB5-B8638ECB2FA9. You can easily modify it and use it as a GP Service. I personally used it to convert a query results (FeatureSet) to CSV or .XLS file.

I know this has been idle for a while, but I am stuck.

What do I have to modify within the python script so that I can use it as a geoprocessing service to export data from a datagrid?

Thanks,
Mark

Todd_1-1611016361648.png

HemingZhu

Heming,

Before I use the example you provided, I am trying to use the following sample. I have it working, the problem is that only one result is being exported from the data store. I think it has to do with the feature attributes returning only one result. Does an Identify Task return a Feature Set?

http://arcscripts.esri.com/details.asp?dbid=16528

 function executeIdentifyTask(geom) {
      //clear the graphics layer 
      map.graphics.clear();
     
      identifyParams.geometry = geom;
      identifyParams.mapExtent = map.extent;
      identifyTask.execute(identifyParams,function(response){
  
  var polygonSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([98,194,204]), 2), new dojo.Color([98,94,204,0.8]));
        var markerSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([25,50,225,0.3])); 
        
         var controlItems = [];
         var surveyItems = [];
                    
         dojo.forEach(response,function(result){
         var feature = result.feature;
        alert(feature.attributes);
           
        if (result.layerName =="surveys"){
     showSurveysNameGrid();
        
  feature.setSymbol(polygonSymbol);
     //searchType="selSurvey";
   //for (var i = 0; i < feature.length; i++) {
    //alert(result.feature);
        var attributes = feature.attributes;
        surveyItems.push(attributes);
  var csvTextSurv = "DOCUMENT_N;TOWNSHIP_RANGE;SECTION\n";  
  
  
  csvTextSurv += attributes["DOCUMENT_N"] + ";" +
                               attributes["TOWNSHIP_RANGE"] + ";" +
                               attributes["SECTION"] + "\n";
                               
       
      
   
         document.getElementById("csvSurv").value = csvTextSurv; 
         map.graphics.add(feature);
    }

Identify task return identifyResults. which is a litttle different from featureSet retured from Query Task. What are common among them is that they all include features. For identifyResults, you have to regroup features based on layer id or name so that you are the same as as QueryTask's featureSet that can be used in a GP service as featureSet (or featureLayer).

EmilyLaMunyon

 function executeIdentifyTask(geom) {
      //clear the graphics layer 
      map.graphics.clear();
     
      identifyParams.geometry = geom;
      identifyParams.mapExtent = map.extent;
      identifyTask.execute(identifyParams,function(response){
  
  var polygonSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([98,194,204]), 2), new dojo.Color([98,94,204,0.8]));
        var markerSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([25,50,225,0.3])); 
        
         var controlItems = [];
         var surveyItems = [];
                    
         dojo.forEach(response,function(result){
         var feature = result.feature;
        alert(feature.attributes);
           
        if (result.layerName =="surveys"){
     showSurveysNameGrid();
        
  feature.setSymbol(polygonSymbol);
     //searchType="selSurvey";
   //for (var i = 0; i < feature.length; i++) {
    //alert(result.feature);
        var attributes = feature.attributes;
        surveyItems.push(attributes);
  var csvTextSurv = "DOCUMENT_N;TOWNSHIP_RANGE;SECTION\n";  
  
  
  csvTextSurv += attributes["DOCUMENT_N"] + ";" +
                               attributes["TOWNSHIP_RANGE"] + ";" +
                               attributes["SECTION"] + "\n";
                               
       
      
   
         document.getElementById("csvSurv").value = csvTextSurv; 
         map.graphics.add(feature);
    }

HemingZhu

I am getting close. The problem is that only one result, the last one, from my datagrid is showing up in my text area for export to excel. I think the csv is not getting the full results from the feature selected, for some reason it only gets one. How do I get the full results of the selection ready for csv export?

function executeIdentifyTask(geom) {
      //clear the graphics layer 
      map.graphics.clear();
     
      identifyParams.geometry = geom;
      identifyParams.mapExtent = map.extent;
      identifyTask.execute(identifyParams,function(response){
  
  var polygonSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([98,194,204]), 2), new dojo.Color([98,94,204,0.8]));
        var markerSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([25,50,225,0.3])); 
        
         var controlItems = [];
         var surveyItems = [];
                    
         dojo.forEach(response,function(result){
         var feature = result.feature;
                  
        if (result.layerName =="surveys"){
     showSurveysNameGrid();
                 feature.setSymbol(polygonSymbol);
      var attributes = feature.attributes;
                  surveyItems.push(attributes);
      var csvTextSurv = "DOCUMENT_N;TOWNSHIP_RANGE;SECTION\n";  
  
  
  csvTextSurv += attributes["DOCUMENT_N"] + ";" +
                               attributes["TOWNSHIP_RANGE"] + ";" +
                               attributes["SECTION"] + "\n";
                               
       
      
   
         document.getElementById("csvSurv").value = csvTextSurv; 
         map.graphics.add(feature);
    }else{
      showPointNameGrid();
  feature.setSymbol(markerSymbol);
  var attributes = feature.attributes;
  controlItems.push(feature.attributes); 
  var csvTextMons = "POINT_NAME;SECTION\n";  
  
  
  csvTextMons += attributes["POINT_NAME"] + ";" +
                               attributes["TOWNSHIP_RANGE"] + ";" +
                               attributes["SECTION"] + "\n";
    }
    
      document.getElementById("csvMons").value = csvTextMons; 
      map.graphics.add(feature);
  });
           
         if(surveyItems.length >0){
       
    showSurveysNameGrid();
            var surveysStore = new dojo.data.ItemFileReadStore({data:{identifier:'DOCUMENT_N',items:surveyItems}});
            var grid = dijit.byId('grid5');
            grid.setStore(surveysStore);
   
  }
  if(controlItems.length >0){
   
   showPointNameGrid();
     var controlStore = new dojo.data.ItemFileReadStore({data:{identifier:'POINT_NAME',items:controlItems}});
     var grid = dijit.byId('grid4');
        grid.setStore(controlStore);
       
  }  
   
              
     
     });
     
     
}  

      <div id="footerPoints" class="roundedCorners" dojotype="dijit.layout.ContentPane"  region="bottom"  style=" padding-bottom:5%; height:18%; display:none"> 
      <form action="http://surveyor.slco.org/JSAPIExportToExcel/DojoGridToExcel.asmx/CSV2Excel " method="POST">
    <textarea name="csv" id="csvMons" style="width: 500px; height:30px"></textarea>
    <input type="submit" value="Submit" />
    </form>
          <table dojotype="dojox.grid.DataGrid" data-dojo-id="grid4" id="grid4" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'"> 
   <thead>
              <tr> 
    
 <th field="POINT_NAME"  width="200px"  > 
                Point Name 
               </th> 
                <th field="GRID_ADDRESS" width="200px"  > 
                  Address
                </th> 
    <th field='TOWNSHIP_RANGE' width='200px'>Township/Range</th>
                <th field="SECTION" width="200px" > 
                 Section 
                </th> 
  <th fields="POINT_NAME,LONGITUDE_DD,LATITUDE_DD" formatter="makeLink1" width="200px" > 
                  Monument Reference Sheet
                </th>
    
              <th field="MON_NOTES" width="200px" > 
                  Monument Notes
                </th> 
    
  

            </tr>
            </thead>
          </table>
        </div> 
  
       <div id="footersurvName" class="roundedCorners" dojotype="dijit.layout.ContentPane"  region="bottom"  style=" padding-bottom:5%; height:18%; display:none"> 
       <form action="http://surveyor.slco.org/JSAPIExportToExcel/DojoGridToExcel.asmx/CSV2Excel " method="POST">
    <textarea name="csv" id="csvSurv" style="width: 500px; height:30px"></textarea>
    <input type="submit" value="Submit" />
    </form>
          <table dojotype="dojox.grid.DataGrid" data-dojo-id="grid5" id="grid5" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'"> 
        <thead>
        <tr>
      <th field="DOCUMENT_NUM" width="200px" > 
       Survey Number
       </th> 
       <th field="SURVEYOR"  width="200px"  > 
        Surveyor 
        </th> 
         <th field="ADDRESS_OF_SURVEY" width="200px"  > 
          Address
         </th> 
        <th field='TOWNSHIP_RANGE' width='200px'>
        Township/Range
        </th>
         <th field="SECTION" width="200px" > 
                 Section 
         </th> 
         <th fields="subdir,page_id" formatter="makeLink" width="200px" > 
                  PDF
                </th>
    
              </tr> 
            </thead>
          </table>
        </div>

Are you using the python script tabletoexcel.py that i pointed to? if so, here is how i modified it to fit my use. I added Make Feature Layer (or Make Table View) with the Query Expression (the same as you use query task's where clause). then use the result feature layer or table view (in your case would be data store) as the first input for the tabletoexcel.py and published it as a GP service (i also include a zip module to zip the result).

MattMoyles

A CSV output is possibly the simplest you could have. Take the datastore backing your grid. Query it. Loop the results, and concatenate a new line to some output variable. Post the data to a server-side script. (PHP or ASP.NET) that will write your data to a file and then redirect the user's browser to download the .csv file.

Here's some javascripty psedo-code.

itemStore //data store backing your grid
var queryResults = itemStore.query();

var output = '';
dojo.forEach(queryResults, function(result) {
    output = output + '\n' + result['col1'] + ',' + result['col2'] + ',' + result['col3'] + and so on...
});

xhr.post(/*post to some serverside script*/);
xhr.onSuccess(/*redirect them to download the file*/);

Piece of cake.

EDIT: Here found this for ya too. http://stackoverflow.com/questions/4440803/exporting-a-dojo-datagrid-to-a-csv-file

EmilyLaMunyon

function executeIdentifyTask(geom) {
      //clear the graphics layer 
      map.graphics.clear();
     
      identifyParams.geometry = geom;
      identifyParams.mapExtent = map.extent;
      identifyTask.execute(identifyParams,function(response){
  
  var polygonSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([98,194,204]), 2), new dojo.Color([98,94,204,0.8]));
        var markerSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([25,50,225,0.3])); 
        
         var controlItems = [];
         var surveyItems = [];
                    
         dojo.forEach(response,function(result){
         var feature = result.feature;
                  
        if (result.layerName =="surveys"){
     showSurveysNameGrid();
                 feature.setSymbol(polygonSymbol);
      var attributes = feature.attributes;
                  surveyItems.push(attributes);
      var csvTextSurv = "DOCUMENT_N;TOWNSHIP_RANGE;SECTION\n";  
  
  
  csvTextSurv += attributes["DOCUMENT_N"] + ";" +
                               attributes["TOWNSHIP_RANGE"] + ";" +
                               attributes["SECTION"] + "\n";
                               
       
      
   
         document.getElementById("csvSurv").value = csvTextSurv; 
         map.graphics.add(feature);
    }else{
      showPointNameGrid();
  feature.setSymbol(markerSymbol);
  var attributes = feature.attributes;
  controlItems.push(feature.attributes); 
  var csvTextMons = "POINT_NAME;SECTION\n";  
  
  
  csvTextMons += attributes["POINT_NAME"] + ";" +
                               attributes["TOWNSHIP_RANGE"] + ";" +
                               attributes["SECTION"] + "\n";
    }
    
      document.getElementById("csvMons").value = csvTextMons; 
      map.graphics.add(feature);
  });
           
         if(surveyItems.length >0){
       
    showSurveysNameGrid();
            var surveysStore = new dojo.data.ItemFileReadStore({data:{identifier:'DOCUMENT_N',items:surveyItems}});
            var grid = dijit.byId('grid5');
            grid.setStore(surveysStore);
   
  }
  if(controlItems.length >0){
   
   showPointNameGrid();
     var controlStore = new dojo.data.ItemFileReadStore({data:{identifier:'POINT_NAME',items:controlItems}});
     var grid = dijit.byId('grid4');
        grid.setStore(controlStore);
       
  }  
   
              
     
     });
     
     
}  

      <div id="footerPoints" class="roundedCorners" dojotype="dijit.layout.ContentPane"  region="bottom"  style=" padding-bottom:5%; height:18%; display:none"> 
      <form action="http://surveyor.slco.org/JSAPIExportToExcel/DojoGridToExcel.asmx/CSV2Excel " method="POST">
    <textarea name="csv" id="csvMons" style="width: 500px; height:30px"></textarea>
    <input type="submit" value="Submit" />
    </form>
          <table dojotype="dojox.grid.DataGrid" data-dojo-id="grid4" id="grid4" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'"> 
   <thead>
              <tr> 
    
 <th field="POINT_NAME"  width="200px"  > 
                Point Name 
               </th> 
                <th field="GRID_ADDRESS" width="200px"  > 
                  Address
                </th> 
    <th field='TOWNSHIP_RANGE' width='200px'>Township/Range</th>
                <th field="SECTION" width="200px" > 
                 Section 
                </th> 
  <th fields="POINT_NAME,LONGITUDE_DD,LATITUDE_DD" formatter="makeLink1" width="200px" > 
                  Monument Reference Sheet
                </th>
    
              <th field="MON_NOTES" width="200px" > 
                  Monument Notes
                </th> 
    
  

            </tr>
            </thead>
          </table>
        </div> 
  
       <div id="footersurvName" class="roundedCorners" dojotype="dijit.layout.ContentPane"  region="bottom"  style=" padding-bottom:5%; height:18%; display:none"> 
       <form action="http://surveyor.slco.org/JSAPIExportToExcel/DojoGridToExcel.asmx/CSV2Excel " method="POST">
    <textarea name="csv" id="csvSurv" style="width: 500px; height:30px"></textarea>
    <input type="submit" value="Submit" />
    </form>
          <table dojotype="dojox.grid.DataGrid" data-dojo-id="grid5" id="grid5" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'"> 
        <thead>
        <tr>
      <th field="DOCUMENT_NUM" width="200px" > 
       Survey Number
       </th> 
       <th field="SURVEYOR"  width="200px"  > 
        Surveyor 
        </th> 
         <th field="ADDRESS_OF_SURVEY" width="200px"  > 
          Address
         </th> 
        <th field='TOWNSHIP_RANGE' width='200px'>
        Township/Range
        </th>
         <th field="SECTION" width="200px" > 
                 Section 
         </th> 
         <th fields="subdir,page_id" formatter="makeLink" width="200px" > 
                  PDF
                </th>
    
              </tr> 
            </thead>
          </table>
        </div>

HemingZhu

Thanks again for your help!!

Do you know if this script works for a Dojo datagrid?

Yes, basically the data store for datagrid is either the query, find or identify featureset. I used the script in a Windows Phone 7 app where i convert a query result FeatureSet to csv or .xls based on user choice.

EmilyLaMunyon

Thanks again for your help!!

Do you know if this script works for a Dojo datagrid?

HemingZhu

Hi,

Has anyone had luck exporting a dojo datagrid to a csv file? The example above is a bit outdated and I am having trouble getting it to work.

Thanks!

There is a python script in http://resources.arcgis.com/gallery/file/geoprocessing/details?entryID=95009B25-1422-2418-7FB5-B8638ECB2FA9. You can easily modify it and use it as a GP Service. I personally used it to convert a query results (FeatureSet) to CSV or .XLS file.

EmilyLaMunyon

Hi,

Has anyone had luck exporting a dojo datagrid to a csv file? The example above is a bit outdated and I am having trouble getting it to work.

Thanks!

gsimpson4

You could also look at using the dojox.grid.EnhancedGrid which has "plugins" that can export to various formats

DeanSeales

I there an updated version of that sample?

khutchins

I haven't tested this but it looks like the following sample from ArcScripts may do what you need:

http://arcscripts.esri.com/details.asp?dbid=16528

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.