EnhancedGrid vs DataGrid for Print (mix code)

JenniferZumbado-Hannibal1 · ‎11-06-2014

Hi there,

I'm kinda new at programming so please excuse me if I ask stupid questions.

What I want to do is simple:

Show a Search grid inside an accordion left panel where it will print the grid with a button.

I've achieved doing the all of it until I get to the part where I want to print the grid. I'm confuse about using DataGrid or EnhancedGrid and when and how to use it. I want to take advantage of the plugin that dojox has. I actually found a script that uses this feature (see attachment).

But, now I'm stuck on how to make it work on my side. And for some reason my Clear button is not working anymore. Also, I wanted to hightlight the outline polygon a different color when the row in the grid gets selected. Any ideas on this?

I'm purposely omitting some parts. This is what I have so far:

<html>

<head>

<title>Title</title>

<style>

.....
</style>

var .......center, zoom, grid, store;

require([

"dojo/_base/connect",

"dojo/dom",

"dojo/parser",

"dojo/on",

......

"dojo/_base/array",

"dojo/data/ItemFileReadStore",

"dojo/data/ItemFileWriteStore",

"esri/map",

.....

"esri/layers/FeatureLayer",

.....

"esri/symbols/SimpleFillSymbol",

"esri/symbols/SimpleLineSymbol",

"esri/symbols/SimpleMarkerSymbol",

.....

"esri/graphic",

.....

"esri/config",

"esri/InfoTemplate",

.....

"esri/tasks/query",

"esri/Color",

"esri/tasks/FindTask",

"esri/tasks/FindParameters",

......

"dijit/layout/AccordionContainer",

"dijit/layout/BorderContainer",

"dijit/layout/ContentPane",

"dijit/registry",

"dijit/form/Button",

"dijit/layout/TabContainer",

"dojox/grid/DataGrid",

"dojox/grid/EnhancedGrid",

"dojox/grid/enhanced/plugins/Printer",

"dojo/fx",

"dojo/domReady!"

], function

(

connect, dom, parser, on, ..... arrayUtils, ItemFileReadStore, ItemFileWriteStore,

Map,....FeatureLayer, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer, SimpleFillSymbol, SimpleLineSymbol,

SimpleMarkerSymbol, ..... Graphic, .....esriConfig, InfoTemplate, ......

Query, Color, FindTask, FindParameters,..... AccordionContainer, BorderContainer, ContentPane, registry, Button, TabContainer,

DataGrid, EnhanceGrid, Printer, fx, domReady

) {

// call the parser to create the dijit layout dijits

parser.parse();

.....

map = new Map("map", {

sliderOrientation: "horizontal",

basemap: "topo",

center: [-93.745776, 32.513614],

zoom: 14,

..... });

dynaLayer1 = "http://......./MapServer/";

map.on("load", mapReady);

//variable REST service Shreveport as a layer

var layer = new ArcGISDynamicMapServiceLayer(dynaLayer1, {

opacity: 0.8 })

map.addLayer(layer);

//Create Find Task using the URL of the map service to search Caddo Parcels Parcels

findTask = new FindTask("http://......./MapServer/");

map.on("load", function () {

//Create the find parameters

findParams = new FindParameters();

findParams.returnGeometry = true;

findParams.layerIds = [12];

findParams.searchFields = ["PARCELID"];

findParams.outSpatialReference = map.spatialReference;

});

function doFind() {

//Set the search text to the value in the box

findParams.searchText = dom.byId("searchText").value;

findTask.execute(findParams, showResults);

}

dom.byId('doParcelSearch').onclick = doFind;

function showResults(results) {

//This function works with an array of FindResult that the task returns

map.graphics.clear();

var symbol = new SimpleFillSymbol(

SimpleFillSymbol.STYLE_SOLID,

new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([50, 25, 200]), 2),

new Color([98, 194, 204, 0.5])

);

//create array of attributes

var items = arrayUtils.map(results, function (result) {

var graphic = result.feature;

graphic.setSymbol(symbol);

map.graphics.add(graphic);

return result.feature.attributes;

});

//Create data object to be used in store

var data = {

identifier: "PARCELID", //This field needs to have unique values

label: "PARCELID", //Name field for display. Not pertinent to a grid but may be used elsewhere.

items: items

};

//Create data store and bind to grid.

store = new ItemFileReadStore({

data: data

});

grid = registry.byId("grid");

grid.setStore(store);

grid.on("rowclick", onRowClickHandler);

//Zoom back to the initial map extent

map.centerAndZoom(center, zoom);

}

//dojo Methods

on(dojo.byID("printAll"), "click", function () {

grid.printGrid({title: "Print Grid", cssFiles: []});

});

//Zoom to the parcel when the user clicks a row

function onRowClickHandler(evt) {

var clickedTaxLotId = evt.grid.getItem(evt.rowIndex).PARCELID;

var selectedTaxLot = arrayUtils.filter(map.graphics.graphics, function (graphic) {

return ((graphic.attributes) && graphic.attributes.PARCELID === clickedTaxLotId);

});

if (selectedTaxLot.length) {

map.setExtent(selectedTaxLot[0].geometry.getExtent(), true);

}

dom.byId('ClearSearch').onclick = clearMyGrid;

function clearMyGrid() {

map.graphics.clear();

var emptyCells = { items: "" };

var emptyStore = new dojo.data.ItemFileReadStore({data: emptyCells});

grid.setStore(emptyStore);

}

.......

});

</script>

</head>

<div>

<b>Title</b>

</ul>

</div>

.......

</div>

<thead>

<th field="ParcelID">Parcel ID</th>

<th field="OWNER" >Owner</th>

<th field="ADDRESS">Address</th>

<th field="DESCRIPTION">Legal Description</th>

<th field="TAXSTATUS" width="100%">Tax Status</th>

</thead>

</table>

</div>

<div id="map" data-dojo-type="dijit/layout/ContentPane"

data-dojo-props="region:'center'">

<div data-dojo-type="dijit/TitlePane"

data-dojo-props="title:'Switch Basemap', closable:false, open:false">

</div>

</body>

</html>