Export Data Grid to CSV after querying

3820
2
Jump to solution
11-13-2015 09:36 AM
AlexGole
Occasional Contributor II

Hi all, I wondered if someone had a good on how to export a data grid to csv file after query. I would like something like this but this fiddle does not seem to work. Also  instead of the findTask, I use a simple queryTask. Any idea is welcome. Thanks,

Alex

function addToMap3(results) {

                             // make sure both queries finished successfully

                            

                             map.graphics.clear();

                             var featureArray = results.features;

                             if (featureArray && featureArray.length > 0) {

                                 // do stuff with the features

                                 arrayUtils.forEach(featureArray, function (feat) {

                                     feat.setSymbol(symbol8);

                                     map.graphics.add(feat);

                                 });

                                 var extent = esri.graphicsExtent(map.graphics.graphics);

                                 map.setExtent(extent, true);

                             } else {

                                 // do stuff when no features were found

                                 alert("No features found")

                             }

                           

                            

                         }

0 Kudos
1 Solution

Accepted Solutions
TracySchloss
Frequent Contributor

There are a lot of pieces to this, including a server-side script needed to create the output file  I got mine from:

Export dojo datagrid results to csv in javascript web application - Geographic Information Systems S...

I made subfolder in my project, which I called webservices. The script is  csv.ashx.

You will need a form to manage the interaction with this script.  It's not something you display, but you still need it.

  You will need to add a hidden form to access this.

        <div id="downloadForm" data-dojo-type="dijit/form/Form" method="post" action="webservices/csv.ashx" target="_blank">
            <input type="hidden" name="report" id="reportinput" value="" /><input type="hidden" name="filename" id="filename" value="" />
        </div>

In my project generating the contents of my grid dynamically, placing a 'Save' button above it.  You could just have a button that calls it more directly.

                var saveButton1 = new Button({
                  label: "Save List",
                  onClick: function(){
                    myCSV.saveGridCSV(grid);//existing grid is passed to the saveGridCSV function
                  }
                }, "btnSave");

This is my script.  I have two different grids and since they are dynamic, I needed code to generate the appropriate output name.  You wouldn't necessarily need that part.

//function for saving the grid contents to a CSV output file
define([
"dojo/on",
"dojo/dom",
"dijit/registry",
"dojo/_base/array"],
function(on, dom, registry, arrayUtils){
    return {
        saveGridCSV: function(gridData){
            var fName;
            var fieldNames = [];
            var dataArray = [];
            if (gridData) {
                var gridLength = gridData.store.data.length;
                dataArray.length = 0;
                fieldNames.length = 0;
                var fieldValue = "";
              // var gridColumns = gridData.columns;
                for (var col in gridData.columns) {
                    fieldNames.push(col);
                }
                var lastCol = fieldNames.length - 1;
                var lastField = fieldNames[lastCol];
               
                dataArray.push(fieldNames.toString() + " \n");
                var gridStore = gridData.store;
                for (var i = 0; i < gridLength; i++) {
                    var gridRow = gridStore.data;
                    arrayUtils.forEach(fieldNames, function(fieldName){
                        fieldValue = gridRow[fieldName];
                        var stringValue = String(fieldValue);
                        if (stringValue.indexOf(",") > 0) { //removes any commas from data                   
                            stringValue = stringValue.replace(/,/g, " ");
                        }
                        if (stringValue.indexOf('\'') != -1 || stringValue.indexOf('\"') != -1) { //removes any slashes from data
                            //  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");//adds a new line when value is from the last field
                        }
                        else {
                            dataArray.push(stringValue);//otherwise just adds the value
                        }
                    });
                }//one row pushed to array   
                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(gridData.id, inputData);
            }
            else { //nothing to save
                alert("Error saving data.");
            }
           
            function submitCSVprint(gridName, inputData){
                var f = registry.byId("downloadForm");
                dom.byId("reportinput").value = inputData;
               
                var outFileName = setOutName(gridName);
                dom.byId("filename").value = outFileName;
                //    console.log(inputData); 
                f.submit();
            }
           
            function setOutName(gridName){
                var outFileName;
                var countyString1 = countyName.replace(". ", "_");
                var countyString = countyString1.replace(" ", "_");
                switch (gridName) {
                    case "offSatGrid":
                        outFileName = countyString + "_WIC_agency";
                        break;
                    case "venGrid":
                        outFileName = countyString + "_WIC_store";
                        break;
                }
                return outFileName;
            }
        }
    }
});

Here the link to my current project. I haven't gone to production yet with the most recent updates, which include separate my code into modules, as described here, but I didn't change the functionality.

Select any county from the dropdown and a list of sites available in that county is generated.  You can either save the list or open the map to that county.

Find WIC Locations by County

View solution in original post

2 Replies
TracySchloss
Frequent Contributor

There are a lot of pieces to this, including a server-side script needed to create the output file  I got mine from:

Export dojo datagrid results to csv in javascript web application - Geographic Information Systems S...

I made subfolder in my project, which I called webservices. The script is  csv.ashx.

You will need a form to manage the interaction with this script.  It's not something you display, but you still need it.

  You will need to add a hidden form to access this.

        <div id="downloadForm" data-dojo-type="dijit/form/Form" method="post" action="webservices/csv.ashx" target="_blank">
            <input type="hidden" name="report" id="reportinput" value="" /><input type="hidden" name="filename" id="filename" value="" />
        </div>

In my project generating the contents of my grid dynamically, placing a 'Save' button above it.  You could just have a button that calls it more directly.

                var saveButton1 = new Button({
                  label: "Save List",
                  onClick: function(){
                    myCSV.saveGridCSV(grid);//existing grid is passed to the saveGridCSV function
                  }
                }, "btnSave");

This is my script.  I have two different grids and since they are dynamic, I needed code to generate the appropriate output name.  You wouldn't necessarily need that part.

//function for saving the grid contents to a CSV output file
define([
"dojo/on",
"dojo/dom",
"dijit/registry",
"dojo/_base/array"],
function(on, dom, registry, arrayUtils){
    return {
        saveGridCSV: function(gridData){
            var fName;
            var fieldNames = [];
            var dataArray = [];
            if (gridData) {
                var gridLength = gridData.store.data.length;
                dataArray.length = 0;
                fieldNames.length = 0;
                var fieldValue = "";
              // var gridColumns = gridData.columns;
                for (var col in gridData.columns) {
                    fieldNames.push(col);
                }
                var lastCol = fieldNames.length - 1;
                var lastField = fieldNames[lastCol];
               
                dataArray.push(fieldNames.toString() + " \n");
                var gridStore = gridData.store;
                for (var i = 0; i < gridLength; i++) {
                    var gridRow = gridStore.data;
                    arrayUtils.forEach(fieldNames, function(fieldName){
                        fieldValue = gridRow[fieldName];
                        var stringValue = String(fieldValue);
                        if (stringValue.indexOf(",") > 0) { //removes any commas from data                   
                            stringValue = stringValue.replace(/,/g, " ");
                        }
                        if (stringValue.indexOf('\'') != -1 || stringValue.indexOf('\"') != -1) { //removes any slashes from data
                            //  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");//adds a new line when value is from the last field
                        }
                        else {
                            dataArray.push(stringValue);//otherwise just adds the value
                        }
                    });
                }//one row pushed to array   
                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(gridData.id, inputData);
            }
            else { //nothing to save
                alert("Error saving data.");
            }
           
            function submitCSVprint(gridName, inputData){
                var f = registry.byId("downloadForm");
                dom.byId("reportinput").value = inputData;
               
                var outFileName = setOutName(gridName);
                dom.byId("filename").value = outFileName;
                //    console.log(inputData); 
                f.submit();
            }
           
            function setOutName(gridName){
                var outFileName;
                var countyString1 = countyName.replace(". ", "_");
                var countyString = countyString1.replace(" ", "_");
                switch (gridName) {
                    case "offSatGrid":
                        outFileName = countyString + "_WIC_agency";
                        break;
                    case "venGrid":
                        outFileName = countyString + "_WIC_store";
                        break;
                }
                return outFileName;
            }
        }
    }
});

Here the link to my current project. I haven't gone to production yet with the most recent updates, which include separate my code into modules, as described here, but I didn't change the functionality.

Select any county from the dropdown and a list of sites available in that county is generated.  You can either save the list or open the map to that county.

Find WIC Locations by County

AlexGole
Occasional Contributor II

Thank you! That will be helpful

0 Kudos