AnsweredAssumed Answered

filtering data in the grid

Question asked by srajoli on Apr 23, 2015

Hello,

 

I am trying to filter the data in the grid. As below in the code. I am trying to filter the grid based  on single  column " MEMORIAL".

I don't get any error, filtering doesn't work. Please let me know, if  I am missing out something or doing wrong.

<!DOCTYPE html>

<html>

    <head>

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

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

        <title>BGSU Memorial Tree Listing</title>

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

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

        <style>        

            html, body {

                height: 0%;

                width: 0%;

                margin: 0;

                padding: 0;

            }

 

 

            body {

                overflow: hidden;

                font-family: "Roboto Condensed", sans-serif;

                font-size: 0.90em;

                margin: 0 auto;

                width: 750px;

            }

 

 

            #grid {

                height: 400px;

                width: 180%;

            }

 

 

            .field-OBJECTID {

                width: 10px;

                font-size: .80em;

                font-weight: normal;

            }

 

 

            .field-MEMORIAL {

                width: 20px;

                font-size: .80em;

                font-weight: normal;

            }

 

 

            .field-DONOR {

                width: 20px;

                font-size: .80em;

                font-weight: normal;

            }

 

 

            .field-INSCRIPTION1 {

                width: 30px;

                font-size: .80em;

                font-weight: normal;

            }

 

 

            .field-INSCRIPTION2 {

                width: 30px;

                font-size: .80em;

                font-weight: normal;

            }

 

 

            .field-MEMNUM {

                width: 10px;

                font-size: .80em;

                font-weight: normal;

            }

 

 

            .field-PLINK {

                width: 10px;

                font-size: .80em;

                font-weight: normal;

            }

 

 

            .field-TLINK {

                width: 10px;

                font-size: .70em;

                font-weight: normal;

            }

 

 

            .field-PRZ {

                width: 10px;

                font-size: .80em;

                font-weight: normal;

            }

 

 

            .field-GLOBALID {

                width: 10px;

                font-size: .80em;

                font-weight: normal;

            }

 

 

            .field-TREE_SPECIES {

                width: 10px;

                font-size: .80em;

                font-weight: normal;

            }

 

 

            .field-TREE_VARIETY {

                width: 10px;

                font-size: .80em;

                font-weight: normal;

            }

 

 

            #grid .dgrid-row-odd {

                background: #F2F5F9;

            }

        </style>

        <script src="http://js.arcgis.com/3.10/">

        </script>

        <script>

 

 

            var grid;

            require(["esri/layers/FeatureLayer", "dgrid/Grid", "dojo/store/Memory",

             "dojo/_base/array", "esri/map", "esri/tasks/query", "esri/tasks/QueryTask",

             "dojo/_base/declare", "dojo/on", "dojo/number", "dojo/dom", "dojo/dom-style",

             "dojo/ready", "dojo/store/Memory", "dgrid/OnDemandGrid"],

             function(FeatureLayer, OnDemandGrid, Memory, array, map, Query, QueryTask, declare,

              on, number, dom,Memory, domStyle, ready){

                var form = dom.byId("filtering"),

                grid = new OnDemandGrid({

 

 

                    columns: {                 

                        OBJECTID: "OBJECTID",                      

                        MEMORIAL: "MEMORIAL",                       

                        DONOR: "DONOR",                      

                        INSCRIPTION1: "INSCRIPTION1",                      

                        INSCRIPTION2: "INSCRIPTION2",                      

                        MEMNUM: "MEMNUM",                     

                        PRZ: "PRZ",                     

                        GLOBALID: "GLOBALID",                     

                        TREE_SPECIES: "SPECIES",                     

                        TREE_VARIETY: "VARIETY",                     

                        TLINK: {

                            label: "TLINK",

                            formatter: makeLink

                        },                     

                        PLINK: {

                            label: "PLINK",

                            formatter: makeLink

                        }

                    }, 

                }, "grid");

 

 

 

 

                // create a feature layer

                var layer = new FeatureLayer("https://gistest2.bgsu.edu/arcgis/rest/services/MemorialTrees/MemorialTrees/MapServer/0", {

 

 

                    outFields: ["*"] });

 

 

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

 

 

                    //populateTable(Memory);

                    var query = new Query();                

                    query.where = "1=1";

                    query.outFields = ["*"];

 

 

                    layer.queryFeatures(query, function(featureSet){

 

 

                        // executes on success

                        console.log("query featureSet", featureSet);                    

                        populateTable(featureSet);                                                                    

                    }, function(error){                                      

                        console.log("query error", error);                                            

                    });                                                         

                });

 

 

 

 

                function populateTable(featureSet){          

                    var data = array.map(featureSet.features, function(feature){

                        return {   

                            // property names used here match those used when creating the grid

 

 

                            "OBJECTID": feature.attributes.OBJECTID,                           

                            "MEMORIAL": feature.attributes.MEMORIAL,                         

                            "DONOR": feature.attributes.MEMORIAL_TREE_DONOR,            

                            "INSCRIPTION1": feature.attributes.MEMORIAL_INSCRIPTION1,                    

                            "INSCRIPTION2": feature.attributes.MEMORIAL_INSCRIPTION2,                           

                            "MEMNUM": feature.attributes.MEMNUM,            

                            "PLINK": feature.attributes.PLINK,

                            "TLINK": feature.attributes.TLINK,                          

                            "PRZ": feature.attributes.PRZ,                          

                            "GLOBALID": feature.attributes.GLOBALID,                          

                            "TREE_SPECIES": feature.attributes.TREE_SPECIES,                          

                            "TREE_VARIETY": feature.attributes.TREE_VARIETY                      

                        };    

                    });

                    grid.renderArray(data);                       

                }

 

 

                function makeLink(data){               

                    console.log("make link", data);                  

                    return " <a target=\"_blank\" href=\"" + data + "\">" + 'Plaque'  + "</a>";                  

                }

 

 

               on(dom.byId('filtering'), 'submit', function(event){

                    var value = form.elements.filter.value;

                    // Filters donor name, matching against the input text       

                   // grid.set("query", { MEMORIAL: value });

                   grid.set('query', { DONOR: new RegExp(value, 'i') });                          

                    event.preventDefault();               

               });   

 

 

            });     

        </script>

    </head>

    <body>

        <form id="filtering">

            Filter by Memorial Tree: <input type="text" name="filter">

            <button type="submit">Filter</button>

        </form>

        <br/>

        <div id="grid">

        </div>

    </body>

</html>

 

 

Thanks!

Outcomes