switch Dgrid with HTML to return results

jaykapalczynski · ‎10-17-2015

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?

RobertScheitlin__GISP · ‎10-19-2015

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.

jaykapalczynski · ‎10-19-2015

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

Thanks Again...cheers

RobertScheitlin__GISP · ‎10-19-2015

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.

jaykapalczynski · ‎10-19-2015

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

RobertScheitlin__GISP · ‎10-19-2015

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>

jaykapalczynski · ‎10-19-2015

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

RobertScheitlin__GISP · ‎10-20-2015

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>