setting the symbol to null does not seem to dynamically hide the symbol. You'd still have to remove and add the graphic to the map for it to take effect?
Here's an example of the only thing I could get to work.... and even then, it rearranges the draw order of the graphics... which I couldn't figure out a way to prohibit.
I'm using a slider to hide or peal through graphics.
var searchslider = new RangeSlider({
name: "slider",
value: [ 0, 500000 ],
minimum: 0,
maximum: 500000,
intermediateChanges: true,
//discreteValues:100, //The number of possible discrete slider values (make increments of 10) no worky
skip:1000,
showButtons: false, // false by default?
style: "width:300px;",
onChange: function(values){
console.log( values[0]+", "+values[1] );
var min = addCommas( values[0].toFixed(0) ); // cutt off all decimals
var max = addCommas( values[1].toFixed(0) );
$("#rngMin").html("1:"+min);
$("#rngMax").html("1:"+max);
//console.log(graphicsLayer.graphics);
console.log(graphicsLayer.graphics.length);
if (graphicsLayer.graphics.length > 0){
var tempFeatures = graphicsLayer.graphics.items;
dojo.forEach(tempFeatures, function(g){
console.log(g);
if (g.visible = true && g.attributes.scale_1 > values[1]){
//console.log("true!");
graphicsLayer.remove(g);
var hiddenGraphic = new Graphic({
geometry: g.geometry,
attributes: g.attributes,
popupTemplate: template,
symbol: hiddensymbol,
visible: false
});
graphicsLayer.add(hiddenGraphic);
} else if (g.visible == false && g.attributes.scale_1 < values[1]){
graphicsLayer.remove(g);
var visibleGraphic = new Graphic({
geometry: g.geometry,
attributes: g.attributes,
popupTemplate: template,
symbol: fillSymbol,
visible: true
});
graphicsLayer.add(visibleGraphic);
}
}); //end .each
} // end if
} // end onchange()
}, "mapbib-slider");