DISPLAY QUERY RESULTS IN A GRID/TABLE

2833
11
Jump to solution
05-30-2017 02:53 PM
LauraBusolo2
New Contributor III

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

}


);


});

});


  
0 Kudos
1 Solution

Accepted Solutions
MirHashmi
Occasional Contributor

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

View solution in original post

11 Replies
MirHashmi
Occasional Contributor

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
New Contributor III

Thank you Mir Hashmi. Let me have a look.

0 Kudos
MirHashmi
Occasional Contributor

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

0 Kudos
LauraBusolo2
New Contributor III

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.

0 Kudos
MirHashmi
Occasional Contributor

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

LauraBusolo2
New Contributor III

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

Is it possible to have the grid with print functionality?

0 Kudos
LauraBusolo2
New Contributor III

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

0 Kudos
MirHashmi
Occasional Contributor

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
Occasional Contributor

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

0 Kudos