DISPLAY QUERY RESULTS IN A GRID/TABLE

[LauraBusolo2]

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*
 }

 }


 );


 });

 });


  

[MirHashmi · Accepted solution]

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/";

[LauraBusolo2]

Thank you Mir Hashmi. Let me have a look.

[MirHashmi]

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

[LauraBusolo2]

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.

[MirHashmi]

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

[LauraBusolo2]

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

Is it possible to have the grid with print functionality?

[LauraBusolo2]

@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!

[MirHashmi]

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.

[MirHashmi]

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