topic Re: DISPLAY QUERY RESULTS IN A GRID/TABLE in ArcGIS JavaScript Maps SDK Questions

DISPLAY QUERY RESULTS IN A GRID/TABLE

LauraBusolo2 — Fri, 10 Dec 2021 22:01:04 GMT

I have my query results displaying as highlighted points on the map. However, I want to add the same results to display in a table as well that can be printed. Kindly assist. The results don't show up on my "created table".

  var myGrid = declare([Grid, Selection]);

/Columns for the grid
var columns = [
    {'field': 'NAME', 'label': "Academy"},
    {'field': 'Industry', 'label': "Academy Sector"},
    {'field': 'Descr', 'label': 'Sector Description'},
    {'field': 'District', 'label': 'School District'}
    // get it from high school {'field': 'ADDRESS', 'label': 'Street Address', width:"30%"}
];

 // // Creating an instance of the Grid
 grid = new myGrid({
 columns: columns,
 selectionMode: 'single',
 }, 'tableDiv');

 // grid.on("dgrid-select", onRowClickHandler);
 grid.on();


 var query = new Query();
 query.returnGeometry = true;
 query.outFields = ['NAME', 'No_of_students', 'Industry', 'Descr', 'District'];

 query.where = "Industry <> ''";
 queryTask_AcademySec.execute(query, populateDD);

 function populateDD(results) {
 var CVEPindustries = new Array();
 //populate drop down:
 var selectObj = document.getElementById("industrySelectDD");

 //Setting the value of the drop down to "Select Industry(s)" when length = 0
 selectObj.options.length = 0;
 var optObj = new Option("Select Industry(s)");
 //changing the values to what has been selected by user in drop down
 selectObj.options[selectObj.options.length] = optObj;
 //looping through each feature returned
 for (var i = 0, len = results.features.length; i < len; i++) {
 var featureAttributes = results.features[i].attributes;
 for (attribute in featureAttributes) {
 var index = CVEPindustries.indexOf(featureAttributes.Industry);
 if (index == -1) {
 CVEPindustries.push(featureAttributes.Industry)
 }

 }

 }
 //Translate the coded values for the domain to display in a more readable context in the dropdown
 IndyLibrary = {BCT:"Building and Construction Trades",
 MSS: "Marketing, Sales, and Services", AGR: "Agriculture and Natural Resources", TRA: "Transportation",ART: "Arts, Media, and Entertainment", ENG: "Engineering and Architecture", FSN: "Fashion and Interior Design", HLT: "Health Science and Medical Technology", AVI: "AVID", INF: "Information and Communication Technologies", PUB: "Public Services", MAN: "Manufacturing and Product Development", FIN: "Business and Finance", NRG: "Energy, Environment, and Utilities", EDU: " Education, Child Development, and Family Services", HOS: "Hospitality, Tourism, and Recreation" };
 // sorting the academy industries
 CVEPindustries.sort();
 for (var j = 0; j < CVEPindustries.length; j++) {
 var optObj = new Option(IndyLibrary[CVEPindustries[j]], CVEPindustries[j]);
 selectObj.options[selectObj.options.length] = optObj;
 }

 on(dom.byId("GetAcademies"), "click", executeIndQry);

 function executeIndQry() {
 // var selectedValue = dom.byId("industrySelectDD");
 var queryString='';
 var i=0;
 for(option in dom.byId("industrySelectDD").options){
 if(dom.byId("industrySelectDD").options[option].selected){
 if(i==0){
 queryString+="Industry ='" +dom.byId("industrySelectDD").options[option].value+"'"
 i+=1
 }else {
 queryString+=" or Industry ='" +dom.byId("industrySelectDD").options[option].value+"'"}
 }
 }
 console.log(queryString);
 query.where = queryString ;
 //execute the query
 //queryTask_AcademySec.execute(query, showResults);
 lyrAcademies.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(results){
 showResults(results);
 // populateGrid(response);
 })
 }
 }

 //Show the results as highlighted boxes on the map
 function showResults(results) {
 mapMain.graphics.clear();
 var selectSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 15,
 new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
 new Color([255,0,0]), 1),
 new Color([0,255,0,0.25]));

 //*test start*
 //create array of attributes from the results queried

 var items = arrayUtils.mapMain(results, function (results) {
 showResults(results);
 });


 for (result in results){
 var geo= results[result].geometry;
 graphicsLayer.add(new Graphic(geo, selectSymbol))
 console.log(results);}

 //display the results in the grid
 grid.refresh();
 grid.renderArray(items);
 //*end test*
 }

 }


 );


 });

 });

Re: DISPLAY QUERY RESULTS IN A GRID/TABLE

MirHashmi — Wed, 31 May 2017 11:51:01 GMT

Hi,

After going through your script i have found few issues with the code as follows.

1. grid.on() ==> due to this line it triggered an error and the query never initiated.
2. The query was always returning OBJECTID. Need to define outfields at the constructor level which takes precedence on any other outField declarations.
3. In Function showResults... it is arrayUtils.map not arrayUtils.mapMain. "map" is a function within arrayUtils class.
4. In Function showresults... arrayUtils.map was calling again showresults() and therefore it never return results to the table.

You can check your code that works now at JSBin.

Note: In order to test & work from jsbin i had to add these two lines that you can remove.

"esri/config" in require

esriConfig.defaults.io.proxyUrl = "/proxy/";

Re: DISPLAY QUERY RESULTS IN A GRID/TABLE

LauraBusolo2 — Wed, 31 May 2017 21:03:17 GMT

Thank you Mir Hashmi. Let me have a look.

Re: DISPLAY QUERY RESULTS IN A GRID/TABLE

MirHashmi — Thu, 01 Jun 2017 07:10:55 GMT

If that solves your problem would you kindly mark it as the correct answer for this question. This will help others too.

Re: DISPLAY QUERY RESULTS IN A GRID/TABLE

LauraBusolo2 — Thu, 01 Jun 2017 07:14:50 GMT

It works partially. This is how the table displays when I fire up the application on my browser. The actual results "text" don't show up on the table. I'm also curious as to whether one can add print functionality to the table.

Re: DISPLAY QUERY RESULTS IN A GRID/TABLE

MirHashmi — Thu, 01 Jun 2017 07:18:25 GMT

If you have taken the exact code from JSBin it should have worked. Do you see any errors in your browser console?

Re: DISPLAY QUERY RESULTS IN A GRID/TABLE

LauraBusolo2 — Thu, 01 Jun 2017 07:28:21 GMT

Thanks! I had to double check some things! It works.

Is it possible to have the grid with print functionality?

Re: DISPLAY QUERY RESULTS IN A GRID/TABLE

LauraBusolo2 — Thu, 01 Jun 2017 07:36:15 GMT

@Mir Hashmi, Thanks again. Since the app may not be public yet, kindly take it down from the JS Bin, or edit to only leave the section with the grid up.

Thanks!

Re: DISPLAY QUERY RESULTS IN A GRID/TABLE

MirHashmi — Thu, 01 Jun 2017 07:52:59 GMT

I tried to delete or edit jsbin but it didn't work. I will try again.

Here is your full code with print function. You can tweak it more to suite your page style.

Re: DISPLAY QUERY RESULTS IN A GRID/TABLE

MirHashmi — Thu, 01 Jun 2017 09:12:34 GMT

Here is another update on the source that prints only the table as per defined format.

Re: DISPLAY QUERY RESULTS IN A GRID/TABLE

BjornSvensson — Fri, 02 Jun 2017 00:20:47 GMT

Laura, have you considered using the FeatureTable widget from the API?

FeatureTable | API Reference | ArcGIS API for JavaScript 3.20

Re: DISPLAY QUERY RESULTS IN A GRID/TABLE

LauraBusolo2 — Fri, 02 Jun 2017 00:24:11 GMT

I haven't tried it yet, Bjorn. Will it allow me to get related records on the table, and print the table only?