AnsweredAssumed Answered

EnhancedGrid vs DataGrid for Print (mix code)

Question asked by cosgisadmin on Nov 6, 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> 

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

        <meta http-equiv="X-UA-Compatible" content="IE=edge"> 

        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> 

        <title>Title</title> 

<link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">

<link rel="stylesheet" href="http://js.arcgis.com/3.11/dojox/grid/resources/Grid.css">

<link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">

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

<body class="claro"> 

    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:true" style="width:100%;height:100%;margin: 0;">

        <div id="header" data-dojo-type="dijit/layout/ContentPane" region="top"> 

            <div> 

                <ul style="margin:20px"> 

                    <b>Title</b> 

                    <div id="search"></div> 

                </ul>    

            </div> 

        </div> 

        <div data-dojo-type="dijit/layout/ContentPane" id="leftPane" region="left" splitter="true">

            <div data-dojo-type="dijit/layout/AccordionContainer" style="height: 300px;">

               .......

                    </div> 

                </div>

                <div data-dojo-type="dijit/layout/ContentPane" title="Click for GEOGNO results" >

                    <input type="text" id="searchText" value="Input Parcel ID" />

                    <input type="button" value="Search" id="doParcelSearch"/>

                    <input type="button" value="Print All" id="printAll"/>

                    <input type="button" value="Clear" id="ClearSearch"/>

                    <table data-dojo-type="dojox.grid.DataGrid" jsid="grid" id="grid" >

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

        </div>

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

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

            <div id="HomeButton"></div> 

            <div style="position:absolute; right:50px; top:10px; z-Index:999;"> 

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

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

                    <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;"> 

                        <div id="basemapGallery"></div> 

                    </div> 

                </div> 

            </div> 

        </div> 

 

 

</body>

 

 

</html>

 


     

    Attachments

    Outcomes