- Home
- :
- All Communities
- :
- Developers
- :
- Developers - General
- :
- Developers Questions
- :
- filtering data in the grid
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Mute
- Printer Friendly Page
filtering data in the grid
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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!
