topic Re: switch Dgrid with HTML to return results in ArcGIS JavaScript Maps SDK Questions

switch Dgrid with HTML to return results

jaykapalczynski — Sat, 17 Oct 2015 18:28:15 GMT

I am using a dgrid to reurn my results from a query. I am looking for a solution to do this in strictly HTML and cant find a solution. Does anyone have a very basic example.

This is what I am doing right now.

<div class="gridclassheader">Unique Species Observations:</div>

</div>

I ATTACHED the JavaScript as it was not formatting correctly when I tried to put in the post....

Just looking for an easy way to grab the result of the query and use HTML to format the returned results in my app. I am using printThis to allow the user to print the results of the query and map but the dgrid does not hold up...which is why I am trying to return the results to html which I can then format via CSS......

Can anyone help?

Re: switch Dgrid with HTML to return results

jaykapalczynski — Sun, 18 Oct 2015 02:08:49 GMT

I can convert the results to json which I think is easier to then display in html but have yet to find a dynamic way to represent the data in html

function updateGrid3(featureSet) {

var data = arrayUtils.map(featureSet.features, function (entry, i) {

return {

id: entry.attributes.OBJECTID,

ObsID: entry.attributes.ObsID,

SppBova: entry.attributes.SppBova,

COMMON_NAME: entry.attributes.COMMON_NAME,

GENUS: entry.attributes.GENUS,

SPECIES: entry.attributes.SPECIES,

Tier: entry.attributes.Tier,

FedStatus: entry.attributes.FedStatus,

TaxaGrp: entry.attributes.TaxaGrp,

};

});

// If you use a store...

dataStore = new Memory({

"data": data,

"idProperty": "id"

});

var myJsonString = JSON.stringify(data);

var json_obj = JSON.parse(myJsonString);

alert(JSON.stringify(json_obj));

Re: switch Dgrid with HTML to return results

jaykapalczynski — Sun, 18 Oct 2015 16:42:40 GMT

I took the array variable "data" and tried to get it into a table as seen below. I get the correct number of rows returning but NO data....just "undefined" Any thoughts as to why?

HTML

JAVASCRIPT

var i;

var out = "<table>";

for(i = 0; i < data.length; i++) {

out += "<tr><td >" +

arr.OBJECTID +

"</td><td>" +

arr.ObsID +

"</td><td>" +

arr.SppBova +

"</td><td>" +

arr.COMMON_NAME +

"</td><td>" +

arr.GENUS +

"</td><td>" +

arr.SPECIES +

"</td><td>" +

arr.Tier +

"</td><td>" +

arr.FedStatus +

"</td><td>" +

arr.TaxaGrp +

"</td></tr>";

}

out += "</table>";

document.getElementById("id01").innerHTML = out;

Re: switch Dgrid with HTML to return results

jaykapalczynski — Sun, 18 Oct 2015 16:47:09 GMT

think I got something....I was using the JSON string instead of the original array string "data" I changed to that and I am not getting a result...

added this before the For Loop

var arr = (data);

Re: switch Dgrid with HTML to return results

RobertScheitlin__GISP — Sat, 11 Dec 2021 08:11:05 GMT

Jay,

Here is a full working sample that takes queryTask results and builds a HTML Table from the results:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Query State Info without Map</title>

    <script src="http://js.arcgis.com/3.14/"></script>
    <style>
      table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
      }
      th, td {
        padding: 8px;
      }
      th {
        background-color: #eee;
      }
    </style>
    <script>
      require([
        "dojo/dom",
        "dojo/dom-construct",
        "dojo/on",
        "esri/tasks/query",
        "esri/tasks/QueryTask",
        "dojo/domReady!"
      ], function (dom, domConstruct, on, Query, QueryTask) {

        var queryTask = new QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5");

        var query = new Query();
        query.returnGeometry = false;
        query.outFields = [
          "SQMI", "STATE_NAME", "STATE_FIPS", "SUB_REGION", "STATE_ABBR",
          "POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI", "HOUSEHOLDS",
          "MALES", "FEMALES", "WHITE", "BLACK", "AMERI_ES", "ASIAN", "OTHER",
          "HISPANIC", "AGE_UNDER5", "AGE_5_17", "AGE_18_21", "AGE_22_29",
          "AGE_30_39", "AGE_40_49", "AGE_50_64", "AGE_65_UP"
        ];

        on(dom.byId("execute"), "click", execute);

        function execute () {
          query.text = dom.byId("stateName").value;
          queryTask.execute(query, showResults);
        }

        function showResults (results) {
          domConstruct.empty("info");
          var table = domConstruct.toDom('<table style="width:100%"></table>');
          domConstruct.place(table, "info");
          var resultItems = [];
          var resultCount = results.features.length;
          var tableHeaderRow, tableHeader, tableRow, tableCol, tableBody;
          for (var i = 0; i < resultCount; i++) {
            if(i === 0){
              tableHeaderRow = domConstruct.create("tr");
              domConstruct.place(tableHeaderRow, table);
              tableBody = domConstruct.create("tbody");
              domConstruct.place(tableBody, table);
            }
            tableRow = domConstruct.create("tr");
            domConstruct.place(tableRow, tableBody);
            var featureAttributes = results.features.attributes;
            for (var attr in featureAttributes) {
              if(i === 0){
                tableHeader = domConstruct.toDom('<th>' + attr + '</th>');
                domConstruct.place(tableHeader, tableHeaderRow);
              }
              tableCol = domConstruct.toDom('<td>' + featureAttributes[attr] + '</td>');
              domConstruct.place(tableCol, tableRow);
            }
            domConstruct.place(tableRow, table);
          }
        }
      });
    </script>
  </head>

  <body>
    US state name :
    <input type="text" id="stateName" value="California">
    <input id="execute" type="button" value="Get Details">
    <br />
    <br />
    <div id="info"></div>
  </body>
</html>

Re: switch Dgrid with HTML to return results

jaykapalczynski — Mon, 19 Oct 2015 15:03:39 GMT

Thanks for your reply Robert,...very much appreciated....but having issues because I think I am going about this slightly different

AS you can see from my code (attached) I am grabbing results from a Buffer Geometry.....then was sending those to a grid....little bit different from your example...

I hang up on your code here: var featureAttributes = results.features.attributes;

Is there a way to bring in this array or json string into your code? In my txt file attached I am trying to get the json object in....if I use the array "Data" it shows results but not formatted in any fashion.

thoughts? really confused.

Re: switch Dgrid with HTML to return results

jaykapalczynski — Mon, 19 Oct 2015 15:44:47 GMT

Alright I added the below and I was able to return results....but the formatting is all crazy....I assume that I can modify this with CSS?

	var query3 = new Query();
	query3.geometry = bufferGeometry;

// Select the Points within the Buffer and show them

	featureLayerVAFWIS.selectFeatures(query3, FeatureLayer.SELECTION_NEW, function(results){
	});
	// Query for the records with the given object IDs and populate the grid
	featureLayerVAFWIS.queryFeatures(query3, function (featureSet) {

updateGrid3(featureSet);

showResults(featureSet);

});

Re: switch Dgrid with HTML to return results

RobertScheitlin__GISP — Sat, 11 Dec 2021 08:11:08 GMT

Jay,

There is no reason (that I am aware of) to map thought the results and create a Memory store if you are not using a dGrid.

Here is the function updated with your function name and input parameter name.

        function updateGrid3(featureSet) {
          domConstruct.empty("info");
          var table = domConstruct.toDom('<table style="width:100%"></table>');
          domConstruct.place(table, "info");
          var resultItems = [];
          var resultCount = featureSet.features.length;
          var tableHeaderRow, tableHeader, tableRow, tableCol, tableBody;
          for (var i = 0; i < resultCount; i++) {
            if(i === 0){
              tableHeaderRow = domConstruct.create("tr");
              domConstruct.place(tableHeaderRow, table);
              tableBody = domConstruct.create("tbody");
              domConstruct.place(tableBody, table);
            }
            tableRow = domConstruct.create("tr");
            domConstruct.place(tableRow, tableBody);
            var featureAttributes = featureSet.features.attributes;
            for (var attr in featureAttributes) {
              if(i === 0){
                tableHeader = domConstruct.toDom('<th>' + attr + '</th>');
                domConstruct.place(tableHeader, tableHeaderRow);
              }
              tableCol = domConstruct.toDom('<td>' + featureAttributes[attr] + '</td>');
              domConstruct.place(tableCol, tableRow);
            }
            domConstruct.place(tableRow, table);
          }
        }

Re: switch Dgrid with HTML to return results

RobertScheitlin__GISP — Mon, 19 Oct 2015 15:53:49 GMT

Jay,

Sure I provided css styling in my example.

Re: switch Dgrid with HTML to return results

jaykapalczynski — Mon, 19 Oct 2015 16:12:50 GMT

Last three questions.....more for the understanding of where or not its possible....any thoughts would be appreciated....what ever you can help with I would be appreciative but understand either way...

Can I select a record and have it highlight its feature in the map?

Is there the ability to sort?

Can I specify the widths of each field?

THANK you for your help...its greatly appreciated.

Re: switch Dgrid with HTML to return results

RobertScheitlin__GISP — Mon, 19 Oct 2015 16:26:16 GMT

Jay,

Don't forget to mark this thread as answered. Now for your follow up questions:

Q1: Can I select a record and have it highlight its feature in the map?

A1: You would have to add an event listener to the row to fire a function that does a select on the feature layer based on the ObjectId of the rows data. A bit of work that do not have a snippet for right now.

Q2: Is there the ability to sort?

A2: There is no UI ability to apply a sort at runtime when dealing with a standard HTML table. You can sort the data before adding it to the table using your ArcGIS Servers sorting ability. You can also spend the time to programatically add sorting coding to your code but this is not trivial.

Q3: Can I specify the widths of each field?

A3: Absolutely just add a style property to the table header (td) dom element that are created with a width property.

Q4: Where can I change the font of the header text?

A4: In the css. in my example I set the background-color for the table headers, just add proper font css properties there.

Re: switch Dgrid with HTML to return results

jaykapalczynski — Mon, 19 Oct 2015 16:32:03 GMT

thanks....for question three....do I use an index number or something?

Thanks Again...cheers

Re: switch Dgrid with HTML to return results

RobertScheitlin__GISP — Mon, 19 Oct 2015 16:55:17 GMT

Jay,

You could just have an JS switch statemnt or an if statement checking for the field name and set the with based on your knowledge of the field and your desired width.

Re: switch Dgrid with HTML to return results

jaykapalczynski — Mon, 19 Oct 2015 23:01:56 GMT

are you referring to putting that JS switch or If Statement in the Function?

Re: switch Dgrid with HTML to return results

RobertScheitlin__GISP — Sat, 11 Dec 2021 08:11:11 GMT

Jay,

Here is an updated sample:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Query State Info without Map</title>

    <script src="http://js.arcgis.com/3.14/"></script>
    <style>
      table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
      }
      th, td {
        padding: 8px;
      }
      th {
        background-color: #eee;
      }
    </style>
    <script>
      require([
        "dojo/dom",
        "dojo/dom-construct",
        "dojo/dom-style",
        "dojo/on",
        "esri/tasks/query",
        "esri/tasks/QueryTask",
        "dojo/domReady!"
      ], function (dom, domConstruct, domStyle, on, Query, QueryTask) {

        var queryTask = new QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5");

        var query = new Query();
        query.returnGeometry = false;
        query.outFields = [
          "SQMI", "STATE_NAME", "STATE_FIPS", "SUB_REGION", "STATE_ABBR",
          "POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI", "HOUSEHOLDS",
          "MALES", "FEMALES", "WHITE", "BLACK", "AMERI_ES", "ASIAN", "OTHER",
          "HISPANIC", "AGE_UNDER5", "AGE_5_17", "AGE_18_21", "AGE_22_29",
          "AGE_30_39", "AGE_40_49", "AGE_50_64", "AGE_65_UP"
        ];

        on(dom.byId("execute"), "click", execute);

        function execute () {
          query.text = dom.byId("stateName").value;
          queryTask.execute(query, showResults);
        }

        function showResults (results) {
          domConstruct.empty("info");
          var table = domConstruct.toDom('<table style="width:3000px"></table>');
          domConstruct.place(table, "info");
          var resultItems = [];
          var resultCount = results.features.length;
          var tableHeaderRow, tableHeader, tableRow, tableCol, tableBody, col, tableHead;
          for (var i = 0; i < resultCount; i++) {
            if(i === 0){
              col = domConstruct.create("col")
              tableHeaderRow = domConstruct.create("tr");
              tableBody = domConstruct.create("tbody");
              tableHead = domConstruct.create("thead");
              domConstruct.place(tableHeaderRow, tableHead);
            }
            tableRow = domConstruct.create("tr");
            domConstruct.place(tableRow, tableBody);
            var featureAttributes = results.features.attributes;
            for (var attr in featureAttributes) {
              if(i === 0){
                tableHeader = domConstruct.toDom('<th>' + attr + '</th>');
                domConstruct.place(tableHeader, tableHeaderRow);
                col = domConstruct.create("col")
                if(attr === 'STATE_NAME'){
                  domStyle.set(col, 'width', '300px');
                }
                domConstruct.place(col, table);
              }
              tableCol = domConstruct.toDom('<td>' + featureAttributes[attr] + '</td>');

              domConstruct.place(tableCol, tableRow);
            }
            domConstruct.place(tableRow, tableBody);
          }
          domConstruct.place(tableHead, table);
          domConstruct.place(tableBody, table);
        }
      });
    </script>
  </head>

  <body>
    US state name :
    <input type="text" id="stateName" value="California">
    <input id="execute" type="button" value="Get Details">
    <br />
    <br />
    <div id="info"></div>
  </body>
</html>

Re: switch Dgrid with HTML to return results

jaykapalczynski — Tue, 20 Oct 2015 01:20:28 GMT

Thanks again....I pasted your Function into my code although not seeing the width adjustment...

I changed the field name to GENUS as I have a field named GENUS....as can be seen from the old grid code below.

I changed the table width and then added the else in the if statement....

Please see image attached.....nothing really happening...

BUT when I use your 3000px table width I do see some width in the cell....confused...

Shouldn't the max size be 600, all fields except GENUS be 25px and GENUS be 200px

domConstruct.empty("info");

var table = domConstruct.toDom('<table style="width:600px"></table>');

domConstruct.place(table, "info");

var resultItems = [];

var resultCount = results.features.length;

var tableHeaderRow, tableHeader, tableRow, tableCol, tableBody, col, tableHead;

for (var i = 0; i < resultCount; i++) {

if(i === 0){

col = domConstruct.create("col")

tableHeaderRow = domConstruct.create("tr");

tableBody = domConstruct.create("tbody");

tableHead = domConstruct.create("thead");

domConstruct.place(tableHeaderRow, tableHead);

}

tableRow = domConstruct.create("tr");

domConstruct.place(tableRow, tableBody);

var featureAttributes = results.features.attributes;

for (var attr in featureAttributes) {

if(i === 0){

tableHeader = domConstruct.toDom('<th>' + attr + '</th>');

domConstruct.place(tableHeader, tableHeaderRow);

col = domConstruct.create("col")

if(attr === 'GENUS'){

domStyle.set(col, 'width', '200px');

}

else{

domStyle.set(col, 'width', '25px');

}

domConstruct.place(col, table);

Re: switch Dgrid with HTML to return results

RobertScheitlin__GISP — Sat, 11 Dec 2021 08:11:14 GMT

Jay,

You need to adjust the css for this case Line 2-5 and 11.

    <style>
      table {
        table-layout: fixed;
      }
      table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
      }
      th, td {
        padding: 8px;
        overflow: hidden;
      }
      th {
        background-color: #eee;
      }
    </style>