filtering data in the grid

ShruthiR — Fri, 24 Apr 2015 05:52:32 GMT

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>

<title>BGSU Memorial Tree Listing</title>

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

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>

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

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

</form>

<br/>

</div>

</body>

</html>

Thanks!

topic filtering data in the grid in Developers Questions

filtering data in the grid